Iterative Pattern & Genrative Landscape

Press space bar in the frame above to switch between the pattern and the landscape.

You can also change the canvas size by hovering in the top right hand corner of the above frame. This option works better when viewing full screen mode.


Iterative Pattern

My iterative pattern was inspired by experimenting with drawing patterns using shapes, rotation and the lerpColor function. At first I was creating a pattern that had a high level of randomization and was also quite interactive.

However I wasn’t completely satisfied so I decided to change my approach a create a more static based pattern. My new direction was inspired by thinking about how the pattern could look on different canvas sizes and still maintain the viewers interest.

The resulting pattern works very well on a large scale. It also works very well when you zoom inner and take a closer look a the finer details.

On a large scale the pattern is created by 3×3 grid of hexagons (each with a different colour scheme). This is repeated both horizontally and vertically. On a smaller scale each hexagon consists of 20 different glyph patterns placed into three groups (each group has a different colour). The glyph patterns themselves are randomly created using different shapes and a varying number of rotations.

Generative Landscape

My goal for the generative landscape was to create a representation of a world that you would be likely to see in a video game. The landscape I have created represents an alien planet in a distant galaxy.

The world I have created is static however there are a few aspects that evolve over time. The sky changes over a 24 second period to represent the cycle of a day. The alien trees start at a random size and grow a little bit bigger each day until they reach their maximum size. If I had more time for this project I would have liked to explore making the world more dynamic.

The landscape itself is generated by a grid of cubes drawn from top to bottom. The noise function is used to create two arrays of noise values (one with two inputs and the other with a single input). The first array of noise values is used to determine whether a tile will be water, land or a pyramid based on the following rules:

If less than 0.2 = water

Otherwise if less than 0.75 = land

Otherwise = pyramid

If the landscape tile is a land based tile then there is a chance it will become either a city or an alien forest. The second array of noise values is used to determine this based on the following rules:

If greater than 0.5 the tile can be city but if at least one its neighboring tiles is a water tile

If greater than 0.7 and not a city the tile can be a forest.