let foto, foto2;

let personX = 300; 

let personY = 300; 

​

function preload() {

  foto = loadImage("bg.jpg");

  foto2 = loadImage("person.PNG");

}

​

function setup() {

  createCanvas(500, 600);

  pixelDensity(1);

  foto.resize(width, height);

  foto2.resize(360, 650);

  imageMode(CENTER);

}

​

function draw() {

  image(foto, width / 2, height / 2);

​

  foto.loadPixels();

  for (let j = 0; j < height; j = j + 10) {

    for (let i = 0; i < width; i = i + 10) {

      let p = (i + j * width) * 4;

      let r = foto.pixels[p];

      let g = foto.pixels[p + 1];

      let b = foto.pixels[p + 2];

      push();

​

      if (r > 90 && g > 100 && b < 50) {

        if (mouseX > personX - foto2.width / 2 && mouseX < personX + foto2.width / 2 &&

            mouseY > personY - foto2.height / 2 && mouseY < personY + foto2.height / 2) {

          // Add shaking effect when the mouse is over the image

          let shakeX = random(-7, 7);

          let shakeY = random(-7, 7);

          image(foto2, personX + shakeX, personY + shakeY);

        } else {

          image(foto2, personX, personY);

        }

      }

      pop();

    }

  }

}

​