Genuary 29: Grid - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
let capture
let cells
​
function setup() {
  createCanvas(windowWidth, windowHeight)
  capture = createCapture(VIDEO, { flipped: true })
  capture.hide()
}
​
function makeCells() {
  cells = [new Cell(0, 0, width, height)]
  
  const subdivs = floor(random(50))
  for (let i = 0; i < subdivs; i++) {
    const [cell] = cells.splice(floor(random(cells.length)), 1)
    cells.push(...cell.subdiv())
  }
}
​
let scene = -1
function draw() {
  const nextScene = floor(millis() / 5000) + floor(millis() / 7000)
  if (nextScene !== scene) {
    scene = nextScene
    makeCells()
  }
  background(255)
  for (const cell of cells) cell.draw()
}
  
class Cell {
  constructor(x, y, w, h) {
    this.x = x
    this.y = y
    this.w = w
    this.h = h
    
    this.s = random()
    this.sx = random()
    this.sy = random()
  }
  
  subdiv() {
    return [
      new Cell(this.x, this.y, this.w/2, this.h/2),
      new Cell(this.x + this.w/2, this.y, this.w/2, this.h/2),
      new Cell(this.x + this.w/2, this.y + this.h/2, this.w/2, this.h/2),
      new Cell(this.x, this.y + this.h/2, this.w/2, this.h/2)
    ]
  }
  
  draw() {
    image(
      capture,
      this.x,
      this.y,
      this.w,
      this.h,
      this.sx * (capture.width * (1 - this.s)),
      this.sy * (capture.height * (1 - this.s)),
      capture.width * this.s,
      capture.height * this.s,
      COVER
    )
  }
}