xxxxxxxxxx
175
let myString = "jump";
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);
}
}