Grid background

GRID.HTML

Small project where I tried (and succeeded I think?) to create a dynamically generated grid. Each cell can be a max of 3x3. A few other small things that I added was the probability of big cells being less frequent as to get a nice ratio of small and big cells.

My first attempt was pretty funny as I didn't start off with a grid but with random sizes. This was both less aesthetic and a nightmare to program. (Don't get me started on the color palette...)

First attempt imagery

As you can see I had some spacing issues where it wouldn't flow properly and some elements where REALLY tiny. I used some weird system where I decided the height/width of a tile with whatever was left over of the main container. I quickly stopped this approach.

I also learned to take more screenshots and document some more in order to write more meaningfull text in these posts! Here are some more progress pictures and the final result.

Second attempt imagery Third attempt imagery
Final result

Oh yeah and I added a party mode 😎 Go and check it out!

Go to live project