Gradation_092

const w = 800;

const h = 800;

const d = 180;

function setup() {

  createCanvas(w, h, WEBGL);

  noFill();

  strokeWeight(3);

  // strokeCap(SQUARE);

  frameRate(30);

  colorMode(HSB, 360, 100, 100, 100);

  ortho(-w / 2, w / 2, -h / 2, h / 2, -8000, 8000);

}

function draw() {

  background(0);

  randomSeed(0);

  orbitControl();

  const c = [

    createVector(101, 25, 65),

    createVector(28, 55, 75),

    createVector(208, 36, 65),

    createVector(207, 14, 85),

    createVector(101, 25, 65),

  ];

  // rotateX(-PI / 4);

  for (let i = 0; i < 4; i++) {

    let sx = sin((TWO_PI / 4) * i) * (w / 3);

    let sy = cos((TWO_PI / 4) * i) * (w / 3);

    push();

    rotateY(frameCount / 100);

    translate(sx, 0, sy);

    gradate(d, 600, c[i], c[i + 1]);

    pop();

  }

  // noLoop();

}

​

function gradate(wid, num, color1, color2) {

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

    let color = createVector(

      map(i, 0, num, color1.x, color2.x),

      map(i, 0, num, color1.y, color2.y),

      map(i, 0, num, color1.z, color2.z)

    );

    push();

    rotateY(i / 150 + frameCount / 20);

    stroke(color.x, color.y, color.z);

    let a1 = sin((TWO_PI / 2) * i) * wid;

    let a2 = cos((TWO_PI / 2) * i) * wid;

    let a3 = map(i, 0, num, -wid, wid);

    triangle(-a1, -a1, -a2, a3, a2, a3);

    pop();

  }

}

​