/** 

 * Moire patterns by big holes (p5.js)

 * 

 * @author @deconbatch

 * @version 0.2

 * @license CC0 https://creativecommons.org/publicdomain/zero/1.0/

 * p5.js 1.1.3

 * created 2022.07.24

 */

​

// Modified by Alwin Thomas for Creative Coding Class as part of exercise experimentation

​

​

const w = 600;

const h = w;

const offset = 0;

const pNum = 60;          // hole number

const pDiv = w / pNum;    // gap between holes

const pSiz = pDiv * 0.375; // size of hole

​

function setup() {

  createCanvas(w, h);

  noLoop();

​

  p = createGraphics(w - offset * 2, h - offset * 2);

  p.fill(map(mouseX,0,600,250,0),80,height-mouseY);

  p.noStroke();

  p.background(250,0,250); //true background color

  p.erase();

  p.fill(0);

  for (let x = 0; x < pNum; x++) {

    let yDiv = (x % 2 == 0) ? 0 : pDiv * 0.5;

    for (let y = 0; y < pNum; y++) {

      p.circle(x * pDiv, y * pDiv + yDiv, pSiz);

    }

  }

  p.noErase();

}

​

function draw() {

  background(mouseX,mouseY,64,64); //color of the circles

  imageMode(CENTER);

​

  push();

  translate(w * 0.5, h * 0.5);

  image(p, 0, 0);

}