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. :)
CODE:
let turbineCount = 5; // Number of wind turbines
let turbineSize = 100; // Size of each wind turbine
let bladeLength = 80; // Length of turbine blades
let rotationSpeed = 0.02; // Speed of rotation
function setup() {
createCanvas(800, 600);
angleMode(DEGREES);
}
function draw() {
background(220);
// Draw wind turbines
for (let i = 0; i < turbineCount; i++) {
let x = (i + 1) * width / (turbineCount + 1);
let y = height / 2;
drawTurbine(x, y);
}
}
function drawTurbine(x, y) {
push();
translate(x, y);
// Draw tower
stroke(0);
fill(150);
rect(-10, -turbineSize / 2, 20, turbineSize);
// Draw blades
noStroke();
fill(50);
rotate(frameCount * rotationSpeed);
for (let i = 0; i < 3; i++) {
let angle = 120 * i;
drawBlade(angle);
}
pop();
}
function drawBlade(angle) {
push();
rotate(angle);
triangle(0, 0, bladeLength / 2, 10, bladeLength, 0);
pop();
}