let zoomString = "zoom";

let letters = [];

let zoomWord; // Representing the entire "zoom" word

​

function setup() {

  createCanvas(600, 400); // Increased canvas width for better layout

  textFont("Courier New", 50);

​

  for (let i = 0; i < myString.length; i++) {

    letters.push(new JumpLetter(myString.charAt(i), width / 3 + i * 50, height * 0.25));

  }

​

  // Create a single Letter object for the entire "zoom" word

  zoomWord = new Letter(zoomString, width / 2, height * 0.75);

}

​

function draw() {

  ////// background colors //////

  let color1 = color(100, 170, 240); 

  let color2 = color(20, 80, 120);   

​

  ////// background gradient //////

  setGradient(0, 0, width, height, color1, color2);

  ////// text colors //////

  fill(170, 200, 255);

  noStroke();

​

 ////// jump //////

  for (let letter of letters) {

    letter.updateJump();

    letter.display();

  }

​

  zoomWord.updatePhysics();

  zoomWord.display();

}

​

  ////// jump class //////

class JumpLetter {

  constructor(char, x, y) {

    this.char = char;

    this.x = x;

    this.y = y;

    this.ySpeed = 0;

    this.gravity = 0.3;

    this.jumpForce = -7;

    this.size = 50;

    this.isJumping = false;

    this.jumpTimer = 0;

  }

​

  updateJump() {

    if (this.isJumping) {

      this.y += this.ySpeed;

      this.ySpeed += this.gravity;

​

      if (this.y > height * 0.25) {

        this.y = height * 0.25;

        this.ySpeed *= -0.6;

        this.isJumping = false;

      }

​

      this.jumpTimer--;

      if (this.jumpTimer <= 0) {

        this.isJumping = false;

      }

    } else {

      this.y += this.ySpeed;

      this.ySpeed += this.gravity;

​

      if (this.y > height * 0.25) {

        this.y = height * 0.25;

        this.ySpeed *= -0.6;

      }

    }

  }

​

  display() {

    textAlign(CENTER);

    text(this.char, this.x, this.y);

  }

​

  jump() {

    if (!this.isJumping) {

      this.ySpeed = this.jumpForce;

      this.isJumping = true;

      this.jumpTimer = 15;

    }

  }

​

  isMouseOver() {

    let letterWidth = textWidth(this.char);

    let letterHeight = this.size;

    return mouseX > this.x - letterWidth / 2 && mouseX < this.x + letterWidth / 2 &&

      mouseY > this.y - letterHeight / 2 && mouseY < this.y + letterHeight / 2;

  }

}

​

///// zoom class /////

class Letter {

  constructor(word, x, y) {

    this.word = word;

    this.x = x;

    this.y = y;

    this.velocity = 0;

    this.acceleration = 0;

    this.size = 50;

  }

​

  updatePhysics() {

    this.velocity += this.acceleration;

    this.x += this.velocity;

    this.velocity *= 0.9;

    this.acceleration *= 0.9;

    this.checkEdge();

  }

​

  checkEdge() {

    if (this.x > width) {

      this.x = -75;

    }

  }

​

  display() {

    textAlign(CENTER);

    text(this.word, this.x, this.y);

  }

​

  addForce(force) {

    this.acceleration = force / 5;

  }

​

  ////// zoom press ///// 

  isMouseOver() {

    let wordWidth = textWidth(this.word);

    let wordHeight = this.size;

    return mouseX > this.x - wordWidth / 2 && mouseX < this.x + wordWidth / 2 &&

      mouseY > this.y - wordHeight / 2 && mouseY < this.y + wordHeight / 2;

  }

  ///// zoom apply physics //////

  jump() {

    this.addForce(20);

  }

}

​

function mousePressed() {

///// jump press /////

  for (let letter of letters) {

    if (letter.isMouseOver()) {

      letter.jump();

    }

  }

​

////// zoom press /////

  if (zoomWord.isMouseOver()) {

    zoomWord.jump();

  }

}

​

///// background gradient /////

function setGradient(x, y, w, h, c1, c2) {

  noFill();

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(x, i, x + w, i);

  }

}

​