🔬 This loop moves particles upward and recycles them when they leave the screen. What happens if you change p.y -= p.speed to p.y += p.speed? Do particles now drift downward instead?
for (let p of particles) {
p.y -= p.speed;
if (p.y < -20) {
p.y = height + 20;
p.x = random(width);
}
🔬 This code morphs blob shapes using Perlin noise. The last argument (frameCount * 0.005) controls animation speed. What happens if you increase it to frameCount * 0.02? Do the blobs animate faster?
for (let i = 0; i < TWO_PI; i += 0.1) { // Iterate through angles
let xOff = map(cos(i), -1, 1, 0, 1);
let yOff = map(sin(i), -1, 1, 0, 1);
// More pronounced shape fluctuations
let r = shape.radius + map(noise(xOff + shape.noiseOffset, yOff + shape.noiseOffset, frameCount * 0.005), 0, 1, -shape.radius * 0.4, shape.radius * 0.4);
function draw() {
// Dark gradient background based on current scene hue
let currentHue = scenes[currentSceneIndex].bgHue;
// Layered gradient background - brighter and more saturated
fill(currentHue, 40, 30); // Base brighter color
rect(0, 0, width, height);
fill(currentHue, 60, 40, 40); // Lighter, more opaque layer
rect(0, 0, width, height);
fill(0, 0, 0, 5); // Very subtle, almost black layer for depth - less opaque
rect(0, 0, width, height);
// Animate floating particles (existing)
for (let p of particles) {
p.y -= p.speed;
if (p.y < -20) {
p.y = height + 20;
p.x = random(width);
}
p.hue = (p.hue + 0.8) % 360; // Faster hue change, still within blue range due to setup
fill(p.hue, 70, 80, 25); // More visible particles
circle(p.x, p.y, p.size);
}
// Animate and draw organic blob shapes (new)
for (let shape of ambientShapes) {
push();
translate(shape.x, shape.y);
fill(shape.hue, 80, 90, 30); // Brighter, more saturated, more visible blobs
beginShape();
for (let i = 0; i < TWO_PI; i += 0.1) { // Iterate through angles
let xOff = map(cos(i), -1, 1, 0, 1);
let yOff = map(sin(i), -1, 1, 0, 1);
// More pronounced shape fluctuations
let r = shape.radius + map(noise(xOff + shape.noiseOffset, yOff + shape.noiseOffset, frameCount * 0.005), 0, 1, -shape.radius * 0.4, shape.radius * 0.4);
let x = r * cos(i);
let y = r * sin(i);
vertex(x, y);
}
endShape(CLOSE);
shape.noiseOffset += 0.02; // Faster animation for blobs
pop();
}
// Auto-advance scenes (existing)
sceneTimer++;
if (sceneTimer >= sceneDuration) {
sceneTimer = 0;
currentSceneIndex = (currentSceneIndex + 1) % scenes.length;
}
let currentScene = scenes[currentSceneIndex];
let progress = sceneTimer / sceneDuration;
// Smooth fade in/out for scene elements (existing)
let alpha = progress < 0.15 ? map(progress, 0, 0.15, 0, 100) :
progress > 0.85 ? map(progress, 0.85, 1, 100, 0) : 100;
let centerY = height / 2;
let figureY = height * 0.7; // Stick figures stand on the bottom part of the screen
let figureBaseSize = width * 0.15; // Stick figures are bigger!
fill(0, 0, 100, alpha); // White color for stick figures
// Draw figure 1 if it exists for the current scene (existing)
if (currentScene.figure1) {
drawStickFigure(
width * currentScene.figure1.x,
figureY,
figureBaseSize * currentScene.figure1.size,
currentScene.figure1.pose,
alpha
);
// Draw item for figure 1
if (currentScene.figure1.item) {
drawPixelArtItem(
width * currentScene.figure1.x,
figureY,
figureBaseSize * currentScene.figure1.size,
currentScene.figure1.item,
alpha
);
}
}
// Draw figure 2 if it exists for the current scene (existing)
if (currentScene.figure2) {
drawStickFigure(
width * currentScene.figure2.x,
figureY,
figureBaseSize * currentScene.figure2.size,
currentScene.figure2.pose,
alpha
);
// Draw item for figure 2
if (currentScene.figure2.item) {
drawPixelArtItem(
width * currentScene.figure2.x,
figureY,
figureBaseSize * currentScene.figure2.size,
currentScene.figure2.item,
alpha
);
}
}
// Display scene text (dialogue/narration)
textSize(min(30, width / 12)); // Slightly larger base size for dialogue
textFont(robotoFontBold); // Use the bold font for the main text
fill(0, 0, 100, alpha); // Pure white text for maximum contrast
text(currentScene.text, width / 2, centerY - 50);
// "Tap to continue" hint
textSize(11);
textFont(robotoFont); // Use the regular font for this smaller hint
fill(0, 0, 45, alpha * 0.7);
text("Tap to continue", width / 2, height - 35);
}
