nick34992
4/19/2016 - 3:08 PM

Lerp Color 2. Using p5.js library.

Lerp Color 2. Using p5.js library.

function setup() {
  createCanvas(720, 400);
  background(255);
  stroke(255);
  strokeWeight(2);
}

function draw() {
  background(255);
  from = color(255, 255, 0, 0.2 * 255);
  to   = color(0, 255, 255, 0.2 * 255);
  c1 = lerpColor(from, to, 0.20);
  c2 = lerpColor(from, to, 0.40);
  c3 = lerpColor(from, to, 0.60);
  c4 = lerpColor(from, to, 0.80);
  for (var i = 0; i < 10; i++) {
    fill(from); // 0-120   120-240   240-360   360-480   480-600   600-720
    quad(random(-40, 160), random(height), random(-40, 160), random(height),
         random(-40, 160), random(height), random(-40, 160), random(height));
    fill(c1);
    quad(random(80, 280), random(height), random(80, 280), random(height),
         random(80, 280), random(height), random(80, 280), random(height));
    fill(c2);
    quad(random(200, 400), random(height), random(200, 400), random(height),
         random(200, 400), random(height), random(200, 400), random(height));
    fill(c3); 
    quad(random(320, 520), random(height), random(320, 520), random(height),
         random(320, 520), random(height), random(320, 520), random(height));
    fill(c4);
    quad(random(440, 640), random(height), random(440, 640), random(height),
         random(440, 640), random(height), random(440, 640), random(height));
    fill(to);
    quad(random(560, 720), random(height), random(560, 720), random(height),
         random(560, 720), random(height), random(560, 720), random(height));
  }
  frameRate(5);
}