Flower Fractals
Click the link or highlight the code and copy it.
Then, go to p5js.org and paste the code in the editor.
Hit the "run" button, watch what happens.
Make adjustments to the code, the hit the "run" button again.
Repeat. :)
// Flower variables
var numFlowers = 100;
var flowers = [];
// Setup function
function setup() {
createCanvas(1000, 400);
// Create flower objects
for (var i = 0; i < numFlowers; i++) {
var x = random(width);
var y = random(height);
var size = random(20, 40);
var petalColor = random(["#03fccf", "#5a03fc"]); // Turquoise and Purple colors
flowers.push(new Flower(x, y, size, petalColor));
}
}
// Draw function
function draw() {
background(0); // Black background
// Update and display flowers
for (var i = 0; i < numFlowers; i++) {
flowers[i].update();
flowers[i].display();
}
}
// Flower class
function Flower(x, y, size, petalColor) {
this.x = x;
this.y = y;
this.size = size;
this.angle = random(TWO_PI);
this.speed = random(0.01, 0.03);
this.petalColor = petalColor;
// Update flower position and rotation
this.update = function() {
this.angle += this.speed;
this.x += sin(this.angle) * 2;
this.y += 1;
// Reset flower position if it goes off the canvas
if (this.y > height + this.size) {
this.x = random(width);
this.y = -this.size;
}
}
// Display flower
this.display = function() {
push();
translate(this.x, this.y);
rotate(this.angle);
// Draw petals
fill(this.petalColor);
for (var i = 0; i < 6; i++) {
ellipse(0, -10, this.size / 2, this.size);
rotate(PI / 3);
}
// Draw center
fill(0, 255, 0); // Green center
ellipse(0, 0, this.size / 2, this.size / 2);
pop();
}
}