SOURCE

let Mtype = 0;
let SpeX = 70;
let SpeY = 10;
let SpeW = 420;
let SpeH = 40;
let ColNow = 0;
let Row = [];
function setup() {
  createCanvas(560, 620);
  background(220);
  colorMode(RGB);
  let max = SpeW / 6;
  let ColDot = [color(255,0,0),color(255,255,0),color(0,255,0),color(0,255,255),color(0,0,255),color(255,0,255),color(255, 0, 0)];
  let from;
  let to;
  let x = SpeX;
  for (let d = 0;d < ColDot.length - 1;d++){
    from = ColDot[d];
    to = ColDot[d+1];

    for (let i = 0;i < max;i++){
        let c = lerpColor(from, to, i / max);
        fill(c);
        x++;
        //rect(x, SpeY, 1, SpeH);
        for (let l = 0;l < SpeH;l++){
            let cs = lerpColor(c, color(0,0,0), l / SpeH);
            stroke(cs);
            point(x,SpeY + l);
        }
    }
  }
  noStroke();
  from = color(255,255,255);
  to = color(0, 0, 0);
  x = SpeX;
  for (let i = 0;i < max * 6;i++){
    let c = lerpColor(from, to, i / max / 6);
    fill(c);
    x++;
    rect(x, SpeY + SpeH, 1, 10);
  }
  ColNow = color(random(255),random(255),random(255));
  fill(ColNow);
  rect(10, 10, 50, 50);
  fill(255);
  rect(SpeX + SpeW + 10, SpeY, 50, 50);
  rect(10, 70, 540, 540);
  stroke(0);
  line(SpeX + SpeW + 10,SpeY,SpeX + SpeW + 59,SpeY + 49);
  line(SpeX + SpeW + 10,SpeY + 49,SpeX + SpeW + 59,SpeY);
  fill(ColNow);
  noStroke();
}

function draw() {

}
function mousePressed() {
  if (mouseX > SpeX && mouseX < SpeX + SpeW && mouseY > SpeY && mouseY < SpeY + SpeH + 10){
    Mtype = 1;
    pickColor();
  }else if (mouseX > 10 && mouseX < 550 && mouseY > 70 && mouseY < 610){
    Mtype = 2;
    dropSand();
  }else if (mouseX > SpeX + SpeW + 10 && mouseX < SpeX + SpeW + 60 && mouseY > SpeY && mouseY < SpeY + SpeH + 10){
    push();
    noStroke();
    fill(255);
    rect(10, 70, 540, 540);
    pop();
    Row = [];
  }
}
function mouseReleased() {
  Mtype = 0;
}
function mouseDragged() {
  if (Mtype == 1) {
    pickColor();
  }
  if (Mtype == 2){
    dropSand();
  }
}
function pickColor(){
    ColNow = get(mouseX, mouseY);
    fill(ColNow);
    noStroke();
    rect(10, 10, 50, 50);
    //stroke(ColNow);
}
function dropSand(){
    if (mouseX < 10 || mouseX >= 550){
        return;
    }
    let x = Math.floor((mouseX - 10) / 2);
    if (isNaN(Row[x])){
        Row[x] = 2;
    }else{
        Row[x] = Row[x] + 2;
    }
    if (Row[x] < 540){
        //point(10 + x * 2,610 - Row[mouseX - 10]);
        rect(10 + x * 2, 610 - Row[x], 2, 2);
    }else{
        Row[x] = 540;
    }
    //console.log(mouseX - 10 + ':' + Row[mouseX - 10]);
}