​

let showOriginalMask = false;

​

// set the above to true to show the original mask which is made up of 4 ellipses

​

let starMask;

let dotsLayer;

let gradientImage;

let surpriseImage;

​

let showDots = true;

​

function preload() {

  gradientImage = loadImage("gradient.jpg");

  surpriseImage = loadImage("surprise.jpg");

}

​

function setup() {

  createCanvas(400, 400);

  dotsLayer = createGraphics(width, height);

  setupDotsLayer();

  surpriseImage.resize(width, height);

  // create the mask and invert it if needed

  starMask = createStarMask();

  starMask = invertMask(starMask);

}

​

function draw() {

  let x = mouseX-starMask.width/2;

  let y = mouseY-starMask.height/2;

  let source;

  if (showDots) source = dotsLayer;

  else source = surpriseImage;

  // below you need to do source.get(x, y, w, h) to get the section of the source you want before masking it

  // however, if the source were the same exact dimensions as the mask then you could just write source.get() without parameters

  let thingToMask = source.get(x, y, starMask.width, starMask.height);

  thingToMask.mask(starMask);

  image(gradientImage, 0, 0, width, height);

  image(thingToMask, x, y, starMask.width, starMask.height);

  if (showOriginalMask) image(createStarMask(), 0, 0);

}

​

function createStarMask() {

  let starSize = 160;

  let maskLayer = createGraphics(starSize, starSize);

  maskLayer.ellipse(0, 0, starSize);

  maskLayer.ellipse(starSize, starSize, starSize);

  maskLayer.ellipse(0, starSize, starSize);

  maskLayer.ellipse(starSize, 0, starSize);

  return maskLayer;

}

​

function invertMask(graphics) {

  graphics.loadPixels();

  for (var i = 3; i < graphics.pixels.length; i+=4) {

    graphics.pixels[i] = 255-graphics.pixels[i];

  }

  graphics.updatePixels();

  return graphics;

}

​

function setupDotsLayer() {

  dotsLayer.noStroke();

  for (let i = 0; i < 800; i++) {

    dotsLayer.fill(random(100, 255), random(100, 255), random(100, 255));

    dotsLayer.ellipse(random(width), random(height), 30);

  }

}

​

function mousePressed() {

  showDots = !showDots;

}