​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  // set up canvas

  background(0);

  //rectMode(CENTER);

​

  // set mask

  addClipMask();

​

  // draw things that will be masked

  let t = frameCount * 0.005;

  background(220);

​

  noStroke();

​

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

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

      var n = noise(i * 0.005 + t, j * 0.005, t);

      fill(n * 255);

      rect(i, j, 3);

    }

  }

​

  // remove mask

  removeClipMask();

​

  // show where mask was drawn with an outline on top

  stroke(255);

  noFill();

}

​

function addClipMask() {

  drawingContext.save();

  fill(color(0, 0));

  stroke(0, 0);

  strokeWeight(0);

  push();

  translate(width / 2, height / 2);

  ellipse(0, 0, 200, 200);

  pop();

  drawingContext.clip();

}

​

function removeClipMask() {

  drawingContext.restore();

}

​