var img1;

var mask;

var ctx;

var maskX, 

    maskY, 

    maskVX, 

    maskVY,

    maskBoundX,

    maskBoundY;

​

​

function preload() {

  img = loadImage('kitten.jpg');

  img1 = loadImage('kitten.jpg');

}

​

function setup() {

  createCanvas(img.width, img.height);

  mask = createGraphics(img.width, img.height);

  maskBoundX = img.width / 4;

  maskBoundY = img.height / 4;

  maskX = random(maskBoundX, width - maskBoundX);

  maskY = random(maskBoundY, height - maskBoundY);

  let spdX = random(2, 4);

  let spdY = random(2, 4);

  maskVX = spdX * Math.sign(random(-1, 1));

  maskVY = spdY * Math.sign(random(-1, 1));

}

​

function draw() {

  background(220);

  maskX += maskVX;

  maskY += maskVY;

  if(maskX < maskBoundX || maskX > width - maskBoundX)

    maskVX = -maskVX;

  if(maskY < maskBoundY || maskY > height - maskBoundY)

    maskVY = -maskVY;

  mask.clear();

  mask.fill(255);

  mask.ellipse(maskX, maskY, 128);

  img1.copy(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);

  img1.mask(mask);

  image(img1, 0, 0, img.width, img.height);

  fill(0, 255, 0);

  text(frameRate(), 10, 10);

}