Morphing Op Art

p5.js Sketch Code

p.setup = () => {
  p.createCanvas(p.windowWidth > 400 ? 400 : p.windowWidth, 400);
  p.rectMode(p.CENTER);
  p.noStroke();
};
p.draw = () => {
  p.background(10, 14, 23);
  let gridSize = p.params?.gridSize || 30;
  let t = p.millis() * 0.001;
  
  for(let x = gridSize/2; x < p.width; x += gridSize) {
    for(let y = gridSize/2; y < p.height; y += gridSize) {
      let d = p.dist(x, y, p.width/2, p.height/2);
      let offset = d * 0.05;
      let wave = p.sin(t * 2.0 - offset);
      
      p.push();
      p.translate(x, y);
      p.rotate(wave * p.PI);
      
      p.fill(255, p.map(wave, -1, 1, 100, 255));
      
      let size = p.map(wave, -1, 1, gridSize*0.2, gridSize*0.8);
      if (wave > 0.5) {
        p.rect(0, 0, size, size, 4);
      } else if (wave > -0.5) {
        p.ellipse(0, 0, size, size);
      } else {
        p.rect(0, 0, size, size*0.1);
      }
      p.pop();
    }
  }
};