Blockville Lives

Well, all my hard work has finally paid off: I own a building. Sixteen of them, in fact. The only catch is they're made of CSS, so I probably won't be moving into them any time soon.

Since my brain is in recovery mode after a year of absolute creative writing blitzing, I have been focusing more on technical adventures lately. I've built and rebuilt a few sites in ReactJS and Vue, converted a few of my personal projects into pure Typescript, and thrown together a generative art engine or two.

But I had this thought in my head: I want to try drawing cute little structures in CSS. I know, I know, everyone has that dream — but I had to make it a reality.

So here it is: Blockville. A 4x4 grid of generative buildings, floating in nothingness, waiting for input. See, when you type into the box at the top of the image, the Blockville engine takes you input and turns it into an sha512 hash, and then for each character of that hash, it gets a base-16 number, which it feeds into an algorithm to create a unique stricture for each square in the grid.

So for instance: the frontmost building's height, colour, window size, shape, divisions and on/offness (at night) are all derived from your input. The roof, the door, everything. If you change even one character of your input, the buildings all re-draw into something new.

Why does this matter? It doesn't. But it was fun, and I learned a lot about how to use and abuse CSS variables in the process. Give it a spin, and if you enjoy it, please don't tell me all the bugs you found.

Thank you and goodnight.