Spaces:
Running
Running
File size: 3,268 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 |
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);
}
}`; |