# SuperShape formula working abruptly in processing

**URL:** <https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104>\
**Category:** Coding Questions\
**Created:** [November 1, 2019, 9:20am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104 "2019-11-01T09:20:20Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 9:20am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/1 "2019-11-01T09:20:20Z")

</div>

```auto
float n1, n2, n3;
float m;
float a, b;
float r;

float total;
float increment;

void setup() {
  size(900, 900);

  
  n1 = 60;
  n2 = 55;
  n3 = 30;
  m = 7;
  a=b=2;
  total=700;
  increment=TWO_PI/total;
 
}

float supershape(float theta) {
  float abs1 = abs(1/a * cos(m/4*theta));
  float abs2 = abs(1/b * sin(m/4*theta));
  float pow1 = pow(abs1,n2);
  float pow2 = pow(abs2,n3);
         r = pow(pow1+pow2,-1/n1);
  return r;
}

void draw() {
  background(0);
  translate(width/2, height/2);
  beginShape();
  for (float t=0; t<(TWO_PI); t+=increment) {
    r = supershape(t);
    float x = 150 * r * cos(t);
    float y = 150 * r * sin(t);
    stroke(255);
    noFill();
    vertex(x, y);
  }
  endShape(CLOSE);
}

```

[![](https://img.youtube.com/vi/ksRoh-10lak/hqdefault.jpg "Coding Challenge #23: 2D Supershapes") ](https://www.youtube.com/watch?v=ksRoh-10lak)

referred to this video.

The formula is the same but I have taken the formula from site below so instead of power 1/n1 ,I am using -1/n1. Rest all same.

[http://frink.machighway.com/~dynamicm/super-ellipse.html](http://frink.machighway.com/~dynamicm/super-ellipse.html)

For values & shapes. See below link:

[http://paulbourke.net/geometry/supershape/](http://paulbourke.net/geometry/supershape/)

The issue is the shape turns out very abruptly for m=1/6,2/6,3/6…& n1=n2=n3=0.3, I just get a circle.  
And for the n1=60,n2=55,n3=30 & for odd m I get weird shapes. Somehow the end point & the first point are not matching together.  
It works for some values but for many values of n1,n2,n3,m , it doesn’t produce the desired shape.  
Checked the code & formula countless times! Don’t know whats the issue?  
Thanks.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 1, 2019, 9:54am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/2 "2019-11-01T09:54:07Z")

</div>

yes, you need it to be symmetric

-a- not try to force it by the CLOSE if math not good  
-b- show what you calculate  
-c- check on the ?m?/4  
actually use m/2 and it might work for all m ( untested )

```auto
float n1=60, n2=55, n3=30;
float m=10;//7;// _______________________________________ change
float a=2, b=2;
float r;

float zoom=100;// __________________________________________ add
float total=700;
float increment=TWO_PI/total;

void setup() {
  size(700, 700); // _______________________________________ change
}

float supershape(float theta) {
  float abs1 = abs(1/a * cos(m/4*theta));
  float abs2 = abs(1/b * sin(m/4*theta));
  float pow1 = pow(abs1, n2);
  float pow2 = pow(abs2, n3);
  r = pow(pow1+pow2, -1/n1);
  return r;
}

void draw() {
  background(0);
  xr=-width/2; // ___________________________________________ add
  translate(width/2, height/2);
  beginShape();
  for (float t=0; t <= TWO_PI ; t+=increment) {
    r = supershape(t);
    show_r(r); // ___________________________________________ add
    float x = zoom * r * cos(t);// __________________________ change
    float y = zoom * r * sin(t);// __________________________ change
    stroke(255);
    noFill();
    vertex(x, y);
  }
// endShape(CLOSE);
  endShape(); // ___________________________________________ change
  
}

int xr=0; // _______________________________________________ add
void show_r(float r) {
  push();
  stroke(200,0,0);
  line(xr,height/2,xr,height/2-zoom*r);
  xr++;
  println(xr, r);
  pop();
}

```

 ![supershape](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c0ed637704d06c22571faa9806ba50d669ead1f.png)

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 11:06am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/3 "2019-11-01T11:06:42Z")

</div>

hi thanks. WIth the m/4 part, i am using the formula as it is. It just gives circle when m is changed to fraction. And for n1,n2,n3 with different values, it works for even m but not for odd m.  
Though I looped it twice for m=7 & it gave me different result

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f614ee11ca1bbf4b9bb498dfca09eafd99efad0c.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 1, 2019, 11:31am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/4 "2019-11-01T11:31:30Z")

</div>

good, can you develop a math rule for the 3 settings to give a symmetric result?

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 11:36am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/5 "2019-11-01T11:36:12Z")

</div>

Sorry I cant seem to understand. From what I can understand,the issue doesnt seem to be only assymetric. it shows different result for values of m. Check for fractions. it produces only circles.

can you please elaborate on the math rule you are suggesting based on 3points ?  
thanks

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 1, 2019, 11:40am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/6 "2019-11-01T11:40:46Z")

</div>

i mean ‘a’ ‘b’ ‘m’ must be in a way that for  
theta = 0 and theta = 2\*PI  
give same result for r  
to give a symmetric shape ?correct? or better CLOSED shape?  
( sorry wording )

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 2:50pm UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/7 "2019-11-01T14:50:15Z")

</div>

Your suggestion might work but that would defeat the purpose of getting different shapes with changing these values.  
I executed the p5 & processing coding in github too but it produces the same result. I tried the desmos & it works fine.  
So the issue seems to be with abs & pow function probably.

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 3:24pm UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/8 "2019-11-01T15:24:14Z")

</div>

I calculated the values (m_1/4_theta) when m=1/6 ,2/6,3/6…  
Turns out it only produces 0.That makes r=1. That explains the circle.  
So the issue is not with pow or abs but the way it calculates the fraction.  
Its very strange since I haven’t encountered any such problem ever in processing with calculation.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/74d9e6b9557555c103da0df81cf2ba3438f9e024.jpeg)

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 1, 2019, 5:19pm UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/9 "2019-11-01T17:19:36Z")

</div>

Don’t know if i am missing out on something but something as trivial as m=1/4 is giving me 0.0 value in processing. I have no clue why it’s happening. Any guidance would help. Thanks.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 1, 2019, 5:59pm UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/10 "2019-11-01T17:59:33Z")

</div>

> [@Ruchi](#):
>
> `m = 1 / 4;`

At least 1 of the operands needs to be a floating point: `m = 1 / 4.0;`

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [November 2, 2019, 6:43am UTC](https://discourse.processing.org/t/supershape-formula-working-abruptly-in-processing/15104/11 "2019-11-02T06:43:21Z")

</div>

yes @GoToLoop Thanks.Sometimes a simple problem is hard to figure out.

```auto

```

Calculating m with varying n & d with 2_d_TWO\_PI cycles gives interesting results but the asymmetric issue still persists with d=1 & n=odd numbers for just TWO\_PI cycle.

@kll you were right. The issue lies in asymmetrical nature of shapes with odd numbers.Working on it.  
here are some results:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8459f752ad1b346b066582dc1278fdca7e7bbcaf.jpeg)

The long straight line on the right side of shape which is mostly present in all designs is little annoying.

 ![image2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aa8a453a808d0aaf0de6919b3b82b85591bf4b8f.jpeg)