三角形の色の流れ

/**
 * triangle color stream # 2
 * 
 * @author aadebdeb
 * @date 2017/03/03
 */


function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(20);
}

function draw() {
  background(240);
  var r = 150;
  var step = 15;
  var num = 20;
  var col = [
    color(201, 92, 157),
    color(50, 173, 198),
    color(170, 206, 54),
  ];
  translate(width / 2 - num * step / 2, height / 2 + num * step / 2);
  for(var i = num; i >= 0; i--) {
    stroke(255, 30);
    fill(lerpColor(color(106, 175, 179), color(188, 219, 228), map(sin(frameCount * 0.04 + i * 0.1), -1, 1, 0, 1)));
    beginShape();
    vertex(r * cos(-HALF_PI), r * sin(-HALF_PI));
    vertex(step * i + r * cos(-HALF_PI), -step * i + r * sin(-HALF_PI));
    vertex(step * i + r * cos(-HALF_PI + TWO_PI / 3), -step * i + r * sin(-HALF_PI + TWO_PI / 3));
    vertex(r * cos(-HALF_PI + TWO_PI / 3), r * sin(-HALF_PI + TWO_PI / 3));
    vertex(r * cos(-HALF_PI + TWO_PI / 3 * 2), r * sin(-HALF_PI + TWO_PI / 3 * 2));
    endShape(CLOSE);
  }
}