:: punched_card :: (ported to p5js)

punched_card.js

/*
 * :: punched_card :: (ported to p5js)
 * 
 * Try it online:
 * https://editor.p5js.org/dector/sketches/mDzY1uL-s
 *
 * https://gist.github.com/dector/e3891c91230963c3cb347b7b6a64c0cd
 */

SCALE = 4

function setup() {
  createCanvas(SCALE * 1000, SCALE * 1000);

  background(color("#EAE2CF"));
  fill(color("#3B3B3B"))
      noStroke()

  const padding = SCALE * 32
  const canvasRect = {
    x: padding,
    y: padding,
    w: width - padding*2,
    h: height - padding*2
  }

  const depth = {
    current: 1,
    max: 8
  }

  drawDivision(canvasRect, depth)
}

function drawDivision(space, depth) {
  var stopDivisionChance = 100
  if (depth.current < 0.3 * depth.max) stopDivisionChance *= 0.01
  else if (depth.current >= 0.9 * depth.max) stopDivisionChance *= 0.2
  else stopDivisionChance *= 0.1

  const isFinalDepth = depth.current == depth.max
  if (isFinalDepth || random(100) <= stopDivisionChance) {
    const visibilityChance = 100 * ((depth.current >= 0.75 * depth.max) ? 0.3 : 0.7)
    if (random(100) <= visibilityChance) {
      rect(space.x, space.y, space.w, space.h)
    }
    return
  }

  var spacing
  if (depth.current == 1) spacing = SCALE * 16
  else if (depth.current == depth.max - 1) spacing = SCALE * 4
  else spacing = SCALE * 2

  const grid = {
    w: 2,
    h: 2
  }
  for (var i = 0; i < grid.w; i++) {
    for (var j = 0; j < grid.h; j++) {
      const cellW = (space.w - spacing * (grid.w - 1)) / grid.w
      const cellH = (space.h - spacing * (grid.h - 1)) / grid.h

      const cell = {
        x: space.x + cellW * i + spacing * i,
        y: space.y + cellH * j + spacing * j,
        w: cellW,
        h: cellH
      }

      const nextDepth = {
        current: depth.current + 1,
        max: depth.max
      }

      drawDivision(cell, nextDepth)
    }
  }
}

function draw() {}