Triangle Aperture

let PERIOD = 300;

​

function setup() {

  let minHW = min([windowWidth, windowHeight])

  createCanvas(minHW, minHW, WEBGL);

  ortho();

  colorMode(HSB, 360, 100, 100);

}

​

function draw() {

  let t = (frameCount-1)/(PERIOD);

  background(0);  

  noStroke();

  let r = width/4-20;

  let num = 9;

    for (let n=0; n<num; n++) {   

        push();

        fill(360*n/num,70,100);

        let tm = -t/num*3 + n/num;

        rotateZ(TAU*tm);       

        translate(r, 0, 0);

        rotateX(.15); //tilt to provide the overlapping - may need to adjust based on the shape used

        rotateZ(TAU/3*t*2);

        triangle(r*sin(0), r*cos(0), r*sin(TAU/3), r*cos(TAU/3), r*sin(2*TAU/3), r*cos(2*TAU/3));

        pop(); 

  }

}

​

​

​