Spaces:
Running
Running
File size: 3,851 Bytes
21d7fc3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
export const riseReasoning = "For 'rise', I'll create a staged animation where particles gradually appear, pause briefly, then float upward. This creates a sense of emergence and ascension. Each particle follows this sequence independently with slight timing variations, creating a continuous cycle of rising elements. The fade-in adds a gentle, ethereal quality that matches the upward motion.";
export const riseSketch = `let font;
let fontSize = 200;
let word = "rise";
let points;
let particles = [];
let floatSpeed = 4;
let fadeInSpeed = 10;
let minWaitTime = 50;
let maxWaitTime = 200;
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);
}
// Get points for the text centered in canvas
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);
}
let xRange = maxX - minX;
for (let pt of points) {
particles.push(new Particle(pt.x, pt.y, pt.x, minX, xRange));
}
}
function draw() {
blendMode(BLEND);
background(0);
blendMode(SCREEN);
for (let particle of particles) {
particle.update();
particle.display();
}
}
class Particle {
constructor(x, y, particleX, minX, xRange) {
this.pos = createVector(x, y);
this.originalPos = createVector(x, y);
this.originalX = x;
this.originalY = y;
this.size = random(particleMinSize, particleMaxSize);
this.alpha = 255;
this.floatSpeedVariation = random(0.5, 2.0);
this.isFadingIn = true;
this.isWaiting = false;
this.waitTime = 0;
this.particleX = particleX;
this.minX = minX;
this.xRange = xRange;
this.color = this.getColorForPosition();
}
getColorForPosition() {
let normalizedX = 0;
if (this.xRange > 0) {
normalizedX = constrain((this.particleX - this.minX) / this.xRange, 0, 1);
}
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.isFadingIn) {
this.alpha += fadeInSpeed;
if (this.alpha >= 255) {
this.alpha = 255;
this.isFadingIn = false;
this.isWaiting = true;
this.waitTime = floor(random(minWaitTime, maxWaitTime));
}
} else if (this.isWaiting) {
this.waitTime--;
if (this.waitTime <= 0) {
this.isWaiting = false;
}
} else {
this.pos.y -= floatSpeed * this.floatSpeedVariation;
if (this.pos.y < -this.size) {
this.respawn();
}
}
}
respawn() {
this.pos.y = this.originalPos.y;
this.pos.x = this.originalPos.x;
this.alpha = 0;
this.isFadingIn = true;
this.isWaiting = false;
this.waitTime = 0;
this.size = random(particleMinSize, particleMaxSize);
this.floatSpeedVariation = random(0.5, 2.0);
this.color = this.getColorForPosition();
}
display() {
noStroke();
fill(red(this.color), green(this.color), blue(this.color), this.alpha);
ellipse(this.pos.x, this.pos.y, this.size, this.size);
}
}`; |