Squircle by kjd

HTML

<script type="application/processing">

    /**
 * squircle generator | 
 * http://en.wikipedia.org/wiki/Superellipse |
 * drag mouse to explore | 
 * a true squircle is when n=4 | 
 * kdoerksen on a rainy afternoon
 */
 
PFont theFont;
 
void setup() {
  size(400,400);

  frameRate(60);
  theFont = loadFont("MarkeEigenbauNormal-8.vlw");
  textFont(theFont, 8);
}

void draw() {
  background(102);
  float m=4; 
  float n=4;
  float a=100;
  float b=100;
  float x,y;
  
  beginShape();
  stroke(200,200,200);
  fill(40);
  
   m=map(mouseX,0,width,2,9.9);
   n=m;
 //  n=map(mouseY,0,height,2,10);   
  
  for(float theta=0;theta<360;theta+=0.1)
  {
    x = pow(abs(cos(radians(theta))),(2/m)) * a;
    if(cos(radians(theta))<0) x*=-1;

    y = pow(abs(sin(radians(theta))),(2/n)) * b;
    if(sin(radians(theta))<0) y*=-1;
    
     vertex(x+(width/2),y+(height/2));
  }
  endShape();
  fill(255);
  text("n "+ nf(n,1,1),0,height);
  if(n>=4 && n<4.09)
      text("squircle",100,height);
}
</script>
<canvas width=400 height=400></canvas>

JavaScript

var scripts=document.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) {
    if(scripts[i].type=="application/processing"){
        var src=scripts[i].src,canvas=scripts[i].nextSibling;
        if(src&&src.indexOf("#")){
           canvas=document.getElementById(src.substr(src.indexOf("#")+1));
        }else{
            while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")
                canvas=canvas.nextSibling;
        }
        if(canvas){
            new Processing(canvas,scripts[i].text);
        }
    }
}