Gradation_088

const w = 800;

const h = 800;

const d = 100;

function setup() {

  createCanvas(w, h, WEBGL);

  noFill();

  strokeCap(SQUARE);

  strokeWeight(3);

  frameRate(30);

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

}

function draw() {

  background(0);

  randomSeed(0);

  orbitControl();

  const c = [

    createVector(4, 85, 191),

    createVector(3, 90, 166),

    createVector(4, 157, 217),

    createVector(242, 203, 57),

    createVector(242, 159, 5),

  ];

  translate(0, -h / 2, 0);

  for (let i = 0; i < w / d; i++) {

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

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

    rotateY(frameCount / 400);

    push();

    translate(sx, 0, sy);

    gradate(d, 100, 0.5, 0.02, 250, c[2], c[(i + 1) % c.length]);

    pop();

  }

  // noLoop();

}

​

function gradate(wid, num, ave, disp, alpha, color1, color2) {

  const max = 1 / sqrt(TWO_PI * disp);

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

    let rate = map(i, 0, num, 0, 1);

    let density = exp(-pow(rate - ave, 2) / (2 * disp)) / sqrt(TWO_PI * disp);

    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 * TWO_PI) / num + frameCount / 10);

    stroke(color.x, color.y, color.z, (alpha * density) / max);

    line(0, i * 10, wid, i * sin(i / num) * 10);

    pop();

  }

}

​