Procedural Generation techniques for a website header

The original idea that sparked the redesign of this website was creating a procedural header. The idea of having website content that was different on every refresh was something that I had not seen before and was willing to try.

The first step was to get the pixel art worked out, and for this I contacted a friend of mine, Wren ( The original plan was to break up the commission into four parts that I could work on the of coding while waiting for the next part. The parts are as follows:

As it stands currently only part 1 is complete, although part 2 is on its way.

These objects are set up in an array, each object has a width, a height, an x centre point and a y centre point. These objects attributes are then combined with general grouping attributes including min, max, margin and edgeoffset

The arrange.js then uses this data to randomly place the objects along the ground, making sure that the rules are followed. For example the script will not place a tree within the margin distance of another tree.

This became more and more complicated as the objects were put together. An example of this was discovering that the trees were being placed what looked like on top of each other, leading to the discovery that the eye tended to automatically look to the trunk of the tree to judge distance and the centre point attributes.

Also, try as I might I have found the odd occasion where an infinite loop can occur trying to find a valid place for the objects, so finite number of loops were built that would break after a certain amount of time. To save processing power on mobiles it also presents a static image for those devices.

While I waited for part 2 of the assets to be completed I also did some work on the time based step, including an automatic positioner for the sun (based on the client time) and a night sky / moon to appear during the client's night visits.

Header example

As it stands there is still work to be done, for example I believe that it would help to have something in the background for when there is no mountains, as the current look looks a bit empty when this happens. But I believe that this is proof that the concept is valid, and will continue to work on this project when time permits.

Add a comment