Triangles1

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *