In this sketch, I used translate() and rotate() to turn a triangle to 8 triangles in one round. I used another rotate() to let the set of triangles spinning like windmills. And I used two for() loop to “copy and paste” the windmills and spread them in the whole screen. The gradual change in color of the background is created by line() and map(). Also I used map() to make every windmill move together while my mouse is moving.
Here are the code:
let angle = []
let r = [],
g = [],
b = [];
let m = 0, c=0;
function setup() {
createCanvas(400, 400);
for (i = 0; i < 30; i = i + 1) {
r[i] = random(255);
g[i] = random(255);
b[i] = random(255);
}
for (i=1;i<26;i=i+1){
angle[i]=0;
}
}
function draw() {
// fill(255);
// textFont(‘Georgia’);
background(255);
for (i=0;i<height;i++){
push();
stroke(map(i,0,height,0,255));
line(0,i,width,i);
pop();
}
for (x = 0; x < width + 10; x = x + 100) {
for (y = 0; y < height + 10; y = y + 100) {
m = m + 1
triRotate(x, y, m);
}
}
m=0
fill(c);
textSize(48);
text(“Rotating windmill”,5,350);
c=c+1
if (c>255){
c=0;
}
}
function triRotate(x, y, k) {
push();
posX = map(mouseX, 0, width, -10, 10)
posY = map(mouseY, 0, width, -10, 10);
translate(x + posX, y + posY);
rotate(radians(angle[k]));
angle[k] = angle[k] + 1
//console.log(angle[k])
Tri();
pop();
}
function Tri() {
for (i = 0; i < 9; i = i + 1) {
fill(r[i]);
triangle(0, 0, -30, 0, -30, -30);
rotate(radians(45 * i));
}
}
link to p5.js editor: https://editor.p5js.org/yk2308/sketches/johYHYMPU
