Skip to content

Chunked rects

An experiment in using chunks to render an infinite plane of differently-sized rectangles.

Click to move around.

An infinite plane of differently-sized rectangles

function setup() {
  createCanvas(400, 400);
}

let px = 0
let py = 0

function draw() {
  background(220);
  
  drawChunked(randomRectangle, 100, 100, 0, 1)
  
  if (mouseIsPressed) {
    px = px + (mouseX - 200) / 10
    py = py + (mouseY - 200) / 10
    line(200, 200, mouseX, mouseY)
  }
}
function randomRectangle(cx, cy) {
  rectMode(CORNERS)
  rect(random(0, 50), random(0, 50), random(50, 100), random(50, 100))
}

function drawChunked(f, chunkW, chunkH, overdraw=0, rs=100) {
  let nextRandomSeed = random(10000)
  randomSeed(rs)
  let rsX = random(1, 10000)
  let rsY = random(1, 10000)
  let rsB = random(10000)
  
  for (let cx = floor(px / chunkW - overdraw); cx < ceil((px + width) / chunkW + overdraw); cx ++) {
    for (let cy = floor(py / chunkH - overdraw); cy < ceil((py + height) / chunkH + overdraw); cy ++) {
      push()
      translate((cx - px / chunkW) * chunkW, (cy - py / chunkH) * chunkH)
      randomSeed(rsB ^ (cx * rsX) ^ (cy * rsY))
      f(cx, cy)
      pop()
    }
  }
  randomSeed(nextRandomSeed)
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/r_b6Js6w-)

Experiments tagged p5 (10/85)

Experiments tagged interactive (4/26)

Experiments on this site (10/85)