Ellipse deformation with noise; or creating 2d planets in five minutes

By | December 17, 2013

What makes earth cool? A lot of things, but it would be boring if it was a perfect circle. Today, in five minutes you will see how to use procedural generation to create a near infinite amount of worlds just by tweaking a few parameters. I’ll be using processing.js to create these. Lets start with a building a simple, circular, boring world and run through the basics of what the code does so we are all on the same page:

The code is fairly self explanatory; here is what we have:

Ok. Boring circle. So what we want to do is apply a modification to the points, make it seem more like a real planet. Real planets have hills and valleys; they don’t squiggle or just have randomly placed edges- they have structure.

This is where the fun happens. We are going to use Ken Perlin’s noise function (which is built into processing) in order to deform the ellipse into a more organic looking shape.

So lets write it:

Ok, so what we did was add two new parameters to our generateEllipse method. These control the amount of bumpiness and the strength of bumpiness.

Now drag your mouse over the planet to alter these parameters:

There, about 40 lines of code to create a basic procedurally generated planet. If this doesn’t get you excited, procedural generation is not just limited to game development. Below we will use procedural generation to create a dynamic art piece- with a little work this could easily be integrated into an animation or used in a design.

Mouse over this:

As you can see, very straightforward. Noise is very useful to keep in your toolkit, whether you are a game developer or work in print; there are a lot of potential applications.

Further reading: