please analyze the following processing sketch and turn it into a html js code, keep all the nuances and the exact visuals the same, considering all the variables, sizes and any other particularity 


// Initialize variables
float Positionx = 1, Positiony = 30;
int difficultyRange = 4; 
String Text;
float TextWidthA, difficulty, difficulty2;
int counter = 0;
int randomDestructionCheck, randomDestructionNumber;
int victoryColorsA, victoryColorsB, victoryColorsC;
boolean finish = false;

/////////////////////////////////////////
// Adjustable parameters
int destructionProbability = 8000; // Destruction event range (Higher is less probable)
int backgroundColor = 0; // Background color of the canvas
int textColorBaseR = 0, textColorBaseG = 255, textColorBaseB = 80; // Base color for text
float difficulty2Range = 0.01; // Range for increasing difficulty by steps, 0 - 0.001 to 0.1

void setup() {
  // Set up canvas size and initial background
  size(200, 200);
  background(backgroundColor);
  frameRate(250);
}

void draw() {
  
  if (finish) {
    // Ending state
    victoryColorsA = int(random(255));
    victoryColorsB = int(random(255));
    victoryColorsC = int(random(255));

    fill(victoryColorsA, victoryColorsB, victoryColorsC);
    float finishSize=width/10;
    textSize(finishSize);
    String finishText = "Beyond the frontier";

    // Calculate text width
    float textWidth = textWidth(finishText);

    // Center the text horizontally
    float textX = (width - textWidth) / 2;

    // Display finish text
    background(backgroundColor);
    text(finishText, textX, height / 2);
  } else {
    
    // Random destruction numbers event
    randomDestructionCheck = int(random(destructionProbability));
    randomDestructionNumber = int(random(destructionProbability));
    // Random difficulty range
    difficulty = random(1, difficultyRange);
    // Generate first set of random numbers
    int randomCheck = int(random(5 + difficulty));
    int randomNumber = int(random(5 + difficulty));
   // println(randomCheck, "//", randomNumber);
    Text = str(randomNumber);
    TextWidthA = textWidth(Text);
    
    fill(textColorBaseR, textColorBaseG, textColorBaseB);
    textSize(20);
    
    // Second set of random numbers generator
    difficulty2 += difficulty2Range;
    int random2 = int(random(25 + difficulty2));
    int random3 = int(random(25 + difficulty2));
    //println("Difficulty", random2, "//", random3);
    // If both pairs are equal to each others set, draw the first number on the screen
    if (randomNumber == randomCheck && (random2 == random3)) {
      
     // println(randomCheck, "//", randomNumber, "//", "CORRECT");
      Positionx += TextWidthA;
      text(Text, Positionx, Positiony);
      counter++;
    }
    
    //Debugg print
   // println("Counter",counter*TextWidthA);
    //println("Text",TextWidthA);

    // Wrap text if it exceeds canvas width
    if ((TextWidthA * counter) >= width-(TextWidthA*3)) {
      counter = 0;
      Positiony += 20;
      Positionx = 0;
      TextWidthA =0;
    }

    // Check if text exceeds canvas height
    if (Positiony >= height) {
      Positionx = 0;
      Positiony = 30;
      background(backgroundColor);
      finish = true;
      counter=0;
    }

    // Check for destruction event
    if (randomDestructionCheck == randomDestructionNumber) {
      println("Destruction!!");
      Positionx = 0;
      Positiony = 30;
      background(backgroundColor);
      difficulty = 0;
      difficulty2 = 0;
      counter=0;
    }
  }
}

// Reset animation on mouse click
void mousePressed() {
  Positionx = 0;
  Positiony = 30;
  background(backgroundColor);
  difficulty = 0;
  finish = false;
  difficulty2 = 0;
  counter=0;
}