let qheight = qwidth/2;

let reps = 9;

​

function setup() {

  createCanvas(400, 380);

}

​

​

function draw() {

  // let speed=1+ 10*(mouseX/width);

  let speed=1;

  let grid=round(random(1));

    drawCube(round(mouseX/(qwidth*2))*qwidth*2 + grid*qwidth, 

             qheight + round(mouseY/(qheight*2))*qheight*2 + grid*qheight,

            [215,0,215]);

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

    let grid=round(random(1));

    drawCube(round(random(reps))*qwidth*2 + grid*qwidth, 

             qheight + round(random(reps*2))*qheight*2 + grid*qheight,

            [180,180,180]);

//   fill(random(255));

//   quad(offsetx-qwidth,offsety-qheight, offsetx,offsety-qheight*2, offsetx+qwidth,offsety-qheight, offsetx,offsety);

//   fill(random(255));

//   quad(offsetx-qwidth,offsety-qheight, offsetx,offsety, offsetx,offsety+qheight*2, offsetx-qwidth,offsety+qheight);

//   fill(random(255));

//   quad(offsetx+qwidth,offsety-qheight, offsetx,offsety, offsetx,offsety+qheight*2, offsetx+qwidth,offsety+qheight);

  }

​

}

​

function drawCube(offsetx,offsety, colour){

  fill("rgb(" + (colour[0] + 40) + "," + ( colour[1] + 40) + "," +  (colour[2] + 40) + ")");

  quad(offsetx-qwidth,offsety-qheight, offsetx,offsety-qheight*2, offsetx+qwidth,offsety-qheight, offsetx,offsety);

  fill("rgb(" + colour[0] + "," +  colour[1] + "," +  colour[2] + ")");

  quad(offsetx-qwidth,offsety-qheight, offsetx,offsety, offsetx,offsety+qheight*2, offsetx-qwidth,offsety+qheight);

  fill("rgb(" + (max(colour[0] - 80,0)) + "," + ( max(colour[1] - 80,0)) + "," +  (max(colour[2] - 80,0)) + ")");

  quad(offsetx+qwidth,offsety-qheight, offsetx,offsety, offsetx,offsety+qheight*2, offsetx+qwidth,offsety+qheight);

}

​