codepen

Tiny Explorer (random landscape gen)

By December 8, 2018 3 Comments

This is a tiny explorer of randomly generated landscapes, using html/CSS/JS.

Landscapes are generated by applying random classes to divs for new colours/shapes. You can then click ‘Snapshot’ to render it into an image for saving. Each landscape also has a random name generated for it, just for fun. Actually that was probably my favourite bit of creating this explorer.

Here are some snapshots to give you an idea:

Super happy that I got started learning to use html2canvas – creating images of html (and the limitations/imperfections that come with it), as well as file saving. Was fun.

Even more surprising, I tested this out in firefox/edge and the generator AND html2canvas both work great! (Though when the horizon goes up and down, there are some notable weird things happening that do not happen in chrome…)

I’m really happy with how this turned out.

The first ‘generator’ I made was actually this abstract logo generator.

Every click applies random classes to each div in the grid, creating a somewhat aesthetically pleasing and mondrianesque abstract result.

You can then further click on the right hand ‘tools’ to adjust properties such as colour, border-radius and rotation, which mixes up the ‘logo’ even further. I made this so primarily because I liked turning all border-radius to 0% for less circle and more squares.

Also got to practice some more JS.

3 Comments