Generative Art
01 Sprout
p5.js on WordPress
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js
let flowers = [];
let lastPos = { x: 0, y: 0 };
function setup() {
let canvas = createCanvas(500, 500);
canvas.parent(document.body); // 让 canvas 适配 WordPress
noStroke();
}
function draw() {
;
for (let i = flowers.length – 1; i >= 0; i–) {
flowers[i].update();
flowers[i].display();
if (flowers[i].isExpired()) {
flowers.splice(i, 1);
}
}
}
function mouseMoved() {
if (dist(mouseX, mouseY, lastPos.x, lastPos.y) > 5) {
let flower = new Flower(mouseX, mouseY);
flowers.push(flower);
lastPos = { x: mouseX, y: mouseY };
}
}
class Flower {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = random(10, 20);
this.color = color(random(255), random(255), random(255));
this.lifeSpan = 100;
this.age = 0;
this.angle = random(PI);
this.offsetX = random(-15, 15);
this.offsetY = random(-15, 15);
}
update() {
this.age++;
}
display() {
push();
let progress = map(this.age, 0, this.lifeSpan, 0, 1);
let c1 = color(‘#533a71’);
let c2 = color(‘#6184d8’);
let c3 = color(‘#50c5b7’);
let c4 = color(‘#f0f465’);
let backgroundColor;
if (progress < 0.33) {
backgroundColor = lerpColor(c1, c2, progress * 3);
} else if (progress = this.lifeSpan;
}
}
Eureka [Xinyi] Wang Design 