Bouncy extrusions of random gradients. Link to source files and editor.
let space = 80;
let sq = [];
let mx;
let my;
let inertia = .9;
let k = 0.05;
function setup() {
createCanvas(800, 800);
let i = 0;
for(let x = 0; x < width/space; x++){
for(let y = 0; y < height/space; y++){
sq[i] = new Extrude(x*space,y*space);
i++;
}
}
}
function draw() {
background(0);
mx = mouseX;
my = mouseY;
let i = 0;
for(let i = 0; i < sq.length; i++){
sq[i].display();
}
}
class Extrude {
constructor(x,y) {
this.x = x;
this.y = y;
this.R1 = random(255);
this.G1 = random(255);
this.B1 = random(255);
this.R2 = random(255);
this.G2 = random(255);
this.B2 = random(255);
this.rs = (this.R2-this.R1)/100;
this.gs = (this.G2-this.G1)/100;
this.bs = (this.B2-this.B1)/100;
this.c = [];
this.oldh = 199;
this.sd = 0;
for(let i = 0; i < 200; i++){
this.c[i] = color(this.R1 +this.rs*i,this.G1+this.gs*i,this.B1+this.bs*i);
}
}
display(){
noStroke();
let dd = dist(this.x,this.y,mx,my);
if(dd > 199){
dd = 199;
}
fill(this.c[0]);
rect(this.x,this.y,space,space);
let dheight = dd;
let dh = -1 * this.oldh + dheight;
this.sd = this.sd * inertia + dh*k ;
this.oldh += this.sd;
let hlimit = abs(this.oldh)
for(let i = 0; i < 200-hlimit; i++){
fill(this.c[i]);
rect(this.x-i,this.y-i,space,space);
}
}
}