Chunked rects
An experiment in using chunks to render an infinite plane of differently-sized rectangles.
Click to move around.
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-)
Browse more articles?
← Bubbles Experiments tagged p5 (10/85) Random planets →
← Bubbles Experiments tagged interactive (4/26) Drifting car →
← Bubbles Experiments on this site (10/85) Random planets →