SketchBook

美術

var rectX = [];
var rectY = [];
var rectWidth = [];
var rectHeight = [];

var colors = [];
var time;

function setup() {
 createCanvas(windowWidth,
              windowHeight);
 angleMode(DEGREES);
 rectMode(CENTER);

 for (var i = 90; i > 0; i = i - 5) {
   rectX[i] = windowWidth / 2;
   rectY[i] = windowHeight / 2;
   rectWidth[i] = i * (windowHeight / 90);
   rectHeight[i] = windowHeight * sin(i);
}

 colors.push(color(255, 255, 0));
 colors.push(color(255, 64,0));
 colors.push(color(255, 160, 225));
 colors.push(color(64, 0, 128));
 colors.push(color(64, 64, 64));

 time = 0;
}

function draw() {
 background(0, 0, 0);
 strokeWeight(2);
 stroke(255, 255, 255, 20);
 
 for (var i = 90; i > 0; i = i - 5) {
   var c = getColor(i / 90);
   fill(c);
   rect(rectX[i] + 30 * sin(3.0 * i + time), rectY[i], rectWidth[i], rectHeight[i]);
}

 time = time + 1;
}

function getColor(t) {
 t = constrain(t, 0.000, 0.9999);
 var p = t * (colors.length - 1);
 var from = floor(p);
 return lerpColor(colors[from], colors[from + 1], p - from);
}