Recipe 53: FlyOver


General Principles

  • Creating generative fractal landscapes
  • Creating a scrolling “slitscan” effect
  • Working with particle-like motion

Commentary

This recipe creates a fly-over style animation with generative landscapes, complete with basic camera controls. By combining a couple of simple tricks together, we get something soothing and evocative, and a basis for all sorts of generative terrain.

Ingredients

  • jit.concat
  • jit.gl.multiple
  • jit.gl.gridshape

Technique

The big trick in this patch is the scrolling effect where we get a new row of geometry each frame as the field scrolls toward us. To do this, we use jit.concat with feedback. This tacks on a new row of cells every frame, and we use a fixed jit.matrix object to limit the total size of the matrix. You’ll see that setup used all over this patch, as each element of the scene is following the same scrolling logic.

To generate terrain, we use a jit.bfg object with the “fractal.hetero” function because it looks good. You’ll notice that we are only using it to generate a single row of cells each frame. This is a good trick to avoid wasting a lot of CPU on fractal generation. Inside of the jit.gen object, we have a few little things that scales the fractal data and positions it across a flat plane.

To make sure the buildings in the scene sit on the terrain, we use a little jit.gen trick. Instead of just downsampling the terrain matrix, we use the terrain matrix as a lookup table for building positions. The “noise” operator used with “sample” in jit.gen is looking up a random position in the left input for each cell and passing it out. This output is then downsampled so we aren’t bogged down rendering hundreds of cubes. This jit.gen trick is super useful whenever you want to take random samples from a larger mesh to make a smaller set of points. Finally we pass that matrix to jit.gl.multiple to render a bunch of cubes.


May 24, 2012 | 6:03 am

I love this recipe ! How would i go for adding a texture to the terrain ?


May 29, 2012 | 10:37 am

You would need to also generate a texture coordinates (UV) matrix that maps the texture properly. The hard part would be getting it to scroll like the geometry does. You could either use e.g. jit.gl.pix/slab to do some sort of offset or slitscan effect, or you could generate scrolling texcoords. It might be easiest to jump into the forums and post what you’ve got.


Viewing 2 posts - 1 through 2 (of 2 total)