//Translate Function : https://p5js.org/reference/#/p5/translate

​

​

function setup() {

  createCanvas(600, 400);

  noStroke();

  fill(255,91,91)

  rectMode(CENTER);

  translate(width / 2, height / 2);

  rect(width/2,height/2,50,50)

}

​

function draw() {

  background(84,255,251);

  fill(255)

  let x = map(mouseX%width, 0, width, 255, 127);

  let y= map(mouseY%height,0,height,255,127);

  background(x,230,y);

  if((mouseX>100 && mouseX<500) && (mouseY>100 && mouseY<300)){

    fill(255,91,91);

    rectMode(CENTER);

    translate(width / 2, height / 2);

    translate(random(-mouseX/10,15), random(-mouseY/10,15)); //for shaking effect  but how to make the speed depend on the distance

    rect(0, 0, 50, 50);

  }

  else{

  fill(255,255,255)

  rect(width/2,height/2,50,50)

  }

}