sketches/InitialSketch.js

export const initialSketch = `
let font;
let fontSize = 200;
let word = "hello";
let points;
let particles = [];
let particleMinSize = 4;
let particleMaxSize = 8;

// Jump effect parameters
let jumpAmplitude = 5;
let jumpSpeed = 0.03;
let jumpOffsetRange = 2;

// Colors for gradient
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);
  }

  // Get points for the text centered in canvas
  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  // Create particles at each point
  for (let i = 0; i < points.length; i++) {
    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
  }
}

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

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

class Particle {
  constructor(x, y, index, totalParticles) {
    this.pos = createVector(x, y);
    this.originalPos = createVector(x, y);
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.colorValue = this.getColor(index, totalParticles);
    this.jumpOffset = random(jumpOffsetRange);
  }

  getColor(index, totalParticles) {
    let normalizedIndex = index / (totalParticles - 1);
    let particleColor;
    if (normalizedIndex < 0.5) {
      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
    } else {
      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
    }
    return particleColor;
  }

  update() {
    // Subtle wave-like jumping motion
    let jump = sin(frameCount * jumpSpeed + this.jumpOffset) * jumpAmplitude;
    this.pos.y = this.originalPos.y + jump;
  }

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