let x=0;

let modulo=25;

let r;

let g;

let b;

let transparencia;

let radio;

let x_elegida;

let y_elegida;

​

function setup() {

  createCanvas(650, 500);

  lienzo=createGraphics(650, 500);

  lienzo.clear();

  y=height;

  radio=3;

}

​

function draw() {

  dibujo_fondo();

  image(lienzo,0,0);

  r=random(255);

  g=random(255);

  b=random(255);

  x_elegida= floor(mouseX/modulo)*modulo;

  y_elegida= floor(mouseY/modulo)*modulo;

  transparencia = random(modulo);

  text("X: "+mouseX, 0, height/4);

  text("Y: "+mouseY, 0, height/2);

  text("indice X: "+x_elegida/modulo, 0, height/3);

  text("indice Y: "+y_elegida/modulo, 0, height/6);

  if ((keyIsPressed == true) && (key=='c')){

    lienzo.fill(r,g,b);

    lienzo.rect(x_elegida,y_elegida,modulo,modulo)

  }

  if ((keyIsPressed == true) && (key=='1')){

    lienzo.fill(0);

  }

  if ((keyIsPressed == true) && (key=='2')){

    lienzo.fill(50);

  }

  if ((keyIsPressed == true) && (key=='3')){

    lienzo.fill(100);

  }

  if ((keyIsPressed == true) && (key=='4')){

    lienzo.fill(150);

  }

  if ((keyIsPressed == true) && (key=='5')){

    lienzo.fill(200);

  }

  if ((keyIsPressed == true) && (key=='6')){

    lienzo.fill(250);

  }

  if ((keyIsPressed == true)){

    lienzo.rect(x_elegida,y_elegida,modulo,modulo)

  }

  if (mouseIsPressed == true){

    if (mouseButton == LEFT) {

      lienzo.fill(255)

      lienzo.ellipse(mouseX,mouseY,radio,radio);

    }

    else if (mouseButton == RIGHT) {

      lienzo.fill(255)

      lienzo.rect(0,0,width,height)

    }

  }

  }

function dibujo_fondo(){

    if (y>0){

    y = y-modulo;

    lienzo.fill(r,g,b, transparencia);

    lienzo.rect(0,0,width,y);

  }

    if (x<width){

    x=x+modulo;

    lienzo.fill(r,g,b, transparencia);

    lienzo.rect(0,0,x,height); 

} 

}