Rectangles 📦

Grid of rectangles

twitter.com/mknol

Log in to post a comment.

const w = 200; // min=1, max=400, step=1
const h = 200; // min=1, max=400, step=1

const gridx = 6; // min=1, max=40, step=1
const gridy = 6; // min=1, max=40, step=1

const t = 3; // min=1, max=40, step=1

const itemw = w / gridx;
const itemh = h / gridy;


const w2 = w * 0.5;
const h2 = h * 0.5;
const itemw2 = itemw * .5;
const itemh2 = itemh * .5;

const turtle = new Turtle();
function walk(i) {
    const x = i % gridx;
    const y = (i / gridx) | 0;
    if ((x + y) % 2 == 0) {
        const x2 = -w2 + x * itemw;
        const y2 = -w2 + y * itemh;
        infiniteRect(x2, y2, itemw, itemh);
    } else {
        for (let i = 0; i < 4; i++) {
            const x2 = -w2 + x * itemw + (i % 2) * itemw2;
            const y2 = -w2 + y * itemh + ((i / 2) | 0) * itemh2;
            infiniteRect(x2, y2, itemw2, itemh2);
        }
    }
    return i + 1 < gridx * gridy;
}

function infiniteRect(x, y, w, h) {
	if (w <= 2 || h <= 2) return;
	//let t = 3;
	for (let i = 0; i < t; i++) {
		rect(x + i , y + i , w - i * 2, h - i * 2);
	}
	let i = t + 1;
    infiniteRect(x + i, y+i , w - i * 2, h - i * 2);
}

function rect(x, y, w, h) {
	turtle.penup();
    turtle.goto(x, y);
	turtle.pendown();
	turtle.goto(x + w, y);
	turtle.goto(x + w, y + h);
	turtle.goto(x, y + h);
	turtle.goto(x, y);
}