Supershapes

While doing some research on procedural content generation, specifically on ways to generate shapes I stumbled upon the so called Superformula.

Introduction

The Superformula is based on the the concept of superellipses. The original form is in polar coordinate. The snippet below shows how you convert those into points to use on a 2D canvas.

    var rpart = (this.m * angle) / 4;
    var apart = Math.abs (Math.cos (rpart) / this.a);
    var bpart = Math.abs (Math.sin (rpart) / this.b);

    var r = Math.pow (
        Math.pow (apart, this.n2) + Math.pow (bpart, this.n3),
        -1 / this.n1
    )

    var x = Math.cos (angle) * r;
    var y = Math.sin (angle) * r;

Examples

supershape1

  • a (m=3, n1=14, n2=6, n3=21)
  • b (m=8, n1=-12, n2=52, n3=4)
  • c (m=10, n1=-6, n2=6, n3=-1)
  • d (m=21, n1=9, n2=5, n3=16)

Each of the numbers corresponds to a parameter fed into the formula, called (in order left to right) m, n1, n2 and n3. The first parameter m is used to give the shape edges. So if you set it to 0 you basically get a circle. The outer parameter n1 inceases the shape a general roundness. Lastly n2 increase the weight of the cosine part of the formula, while n3 increase the the weight of the sine part. There are also two additional parameter a and b. These are used to change the symmetry of the shape. In the example above they are both set to 1.

I also wrote a little web tool to generate supershapes. You can download it here.
If you're interested in how it works, you can stare at some code here.

Moving example

Want to see some supershapes in action? I wrote a little shader over at shadertoy.