sketches/BounceSketch.js

export const bounceReasoning = "For 'bounce', I'll implement simple physics with gravity and collision detection. Each particle will have its own velocity and acceleration, creating natural bouncing motions. Adding slight randomness to the bounce heights and timing creates a more organic, playful feel that captures the essence of bouncing.";

export const bounceSketch = `let font;
let fontSize = 200;
let word = "bounce";
let points;
let particles = [];
let gravity = 0.5;
let bounce = -0.7;
let friction = 0.99;
let particleMinSize = 3;
let particleMaxSize = 7;

let color1 = "#217BFE";
let color2 = "#078BFE";
let color3 = "#AC87EB";

function preload() {
  font = loadFont('fonts/GoogleSans-Bold.ttf');
}

function setup() {
  createCanvas(500, 500);
  background(0);
  textFont(font);
  textSize(fontSize);
  textAlign(CENTER, CENTER);

  // Get the width of the text
  let textW = textWidth(word);
  
  // If text is too wide, scale down fontSize
  if (textW > width * 0.8) {
    fontSize = fontSize * (width * 0.8) / textW;
    textSize(fontSize);
    textW = textWidth(word);
  }

  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  // Find min and max x positions for color gradient
  let minX = points[0].x;
  let maxX = points[0].x;
  for (let pt of points) {
    minX = min(minX, pt.x);
    maxX = max(maxX, pt.x);
  }

  for (let pt of points) {
    let normalizedX = map(pt.x, minX, maxX, 0, 1);
    particles.push(new Particle(pt.x, pt.y, normalizedX));
  }
}

function draw() {
  blendMode(BLEND);
  background(0);
  blendMode(SCREEN);

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(x, y, normalizedX) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(-2, 2), random(-10, -5));
    this.acc = createVector(0, gravity);
    this.size = random(particleMinSize, particleMaxSize);
    this.originalY = y;
    this.colorValue = this.getColor(normalizedX);
    this.frameDelay = 30; // Delay for about 30 frames
  }

  getColor(normalizedX) {
    let particleColor;
    if (normalizedX < 0.5) {
      particleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
    } else {
      particleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
    }
    return particleColor;
  }

  update() {
    if (this.frameDelay > 0) {
      this.frameDelay--;
      return; // Pause movement for the delay duration
    }

    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.vel.x *= friction;

    if (this.pos.y > height - this.size / 2) {
      this.pos.y = height - this.size / 2;
      this.vel.y *= bounce;
    }

    if (this.pos.x < this.size / 2) {
      this.pos.x = this.size / 2;
      this.vel.x *= bounce;
    } else if (this.pos.x > width - this.size / 2) {
      this.pos.x = width - this.size / 2;
      this.vel.x *= bounce;
    }

    if (this.pos.y > height + 100) {
      this.pos.y = this.originalY;
      this.vel.y = random(-10, -5);
      this.frameDelay = 30; // Reset delay when particle resets
    }
  }

  display() {
    noStroke();
    fill(this.colorValue);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}`;