Visualizing and animating Superellipses with Processing

Inori · 08-06-2016, 06:14 AM

Superellipses are a cool mathematical concept that can be visually adapted with some pretty cool results. I was messing around with the formula and some loops in p5js / Processing 3, and came up with a cool end result that I can't record because my laptop sucks. If you have the time, I recommend getting p5 running in your browser and checking this out (if you do, the canvas is 400 x 400).

Source:

Code:
translate(200,200);
stroke(255);

var r=150,
 n=0.4,
 s=1,
 c=1;

function drawSE(){
    rotate(c*(HALF_PI));
    for(var theta = 0;theta < PI;theta += 0.05){
        var x = pow(abs(cos(theta)), 2 / n) * r * Math.sign(cos(theta)),
        y = pow(abs(sin(theta)), 2 / n) * r * Math.sign(sin(theta));
        
        point(x,-y);
        point(-x,y);
    }
}

var draw=function(){
    fill(51, 51, 51, 70);
    rect(-201, -201, 401, 401);
    drawSE();

    n += 0.025 * s;
    if(n<0.15){
        s = -s;
        n=0.15;
    }else if(n > 2){
        if(c>180){c=1;}
        s = -s;
        n=2;
    }
    
    c++;
};