Made with p5.js using its web editor. Here’s the code:
// Canvas related variables
let canvasWidth = 500;
let canvasHeight = 300;
// Triangle related variables
let n = 20;
let l;
let h;
let x0;
// Periodic move related variables
let pWidth = l;
let pSpeed = 1/40;
let pPhaseFactor = 0;
let aux = 0;
// Color change related variables
let cSpeed = 1/1000;
// Timers
let t1 = 0;
let rT = 0;
function setup() {
createCanvas(canvasWidth, canvasHeight + 2);
l = (canvasHeight*1.0/n*1.0)/sin(PI/3.0);
h = canvasHeight/n;
x0 = canvasWidth/2;
colorMode(HSB);
}
function draw() {
background(0);
if(t1 < 300) {
t1 ++;
rT = 0;
fill(abs(cos(frameCount*cSpeed)*255),100,255);
} else {
rT += PI/400;
pPhaseFactor += sin(rT) * 1/1000;
fill(abs(cos(frameCount*cSpeed)*255),100,abs(cos(rT)*255));
if(rT > PI) t1 = 0;
}
for(let i = - 2*h; i < canvasHeight + 2*h; i += h){
for(let j = -l; j < canvasWidth + l; j += l*2){
currCos = cos(frameCount*pSpeed + i * pPhaseFactor);
currSin = sin(frameCount*pSpeed + i * pPhaseFactor);
p1X = j + currCos * l;
p1Y = i + currSin*l;
p2X = j - l/2 + currCos * l;
p2Y = i + h + currSin * l;
p3X = j + l/2 + currCos * l;
p3Y = i + h + currSin * l;
triangle(p1X,p1Y,p2X,p2Y,p3X,p3Y);
}
}
}
Deja una respuesta