Triangle Rotations

let angle = 0;

let rippleFactor = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  noStroke();

}

​

function draw() {

  background(255);

  let cols = 10;

  let rows = 10;

  let trisize = min(width, height) / max(cols, rows);

​

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      push();

      let xpos = map(x, 0, cols - 1, -width / 2, width / 2);

      let ypos = map(y, 0, rows - 1, -height / 2, height / 2);

      // Calculate distance from the mouse cursor

      let mouseDist = dist(mouseX - width / 2, mouseY - height / 2, xpos, ypos);

      let mouseEffect = map(mouseDist, 0, width / 2, 50, 0);

      // Movement up and down for each row

      let rowMovement = sin(rippleFactor + y * 0.5) * 50;

      // Ripple effect and individual rotation

      let d = dist(xpos, ypos, 0, 0);

      let offset = rippleFactor + d * 0.1;

      let ripple = sin(offset) * 20;

      translate(xpos, ypos + rowMovement, ripple + mouseEffect);

      // Individual rotation

      rotateX(rippleFactor + x * 0.1 + y * 0.1);

      rotateY(rippleFactor + x * 0.1 + y * 0.1);

      rotateZ(rippleFactor + x * 0.1 + y * 0.1);

      fill(0);

      triangle(-trisize / 2, trisize / 2, trisize / 2, trisize / 2, 0, -trisize / 2);

      pop();

    }

  }

  angle += 0.01;

  rippleFactor += 0.05;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​