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); } }`;