Coding Challenge #23: 2D Supershapes

In this Coding Challenge, I show you how to make 2D supershapes in p5.js.
This is part 2 of a multi-part series on superformulas, superellipses and supershapes

Support this channel on Patreon:

Send me your questions and coding challenges!


Links discussed in this video:
Paul Bourke’s Supershapes (Superformula) website:

Source Code for the Video Lessons:


For More Coding Challenges:

Help us caption & translate this video!






20 responses to “Coding Challenge #23: 2D Supershapes”

  1. Roger Keulen Avatar

    If you want it to look cool. Make every number a power of two. Then you don't have no rounding errors.
    Demo Reel & Tiny JavaScript – Mathieu Henri / Front-Trends 2016 –

  2. Jacob Cowan Avatar

    In trying to complete this challenge in processing, I have come across an issue… some of the more complex examples on the supershapes page result in errors due, I think, to inaccuracy from floats and to an inaccurate method of finding nth roots.

    I converted all my floats to doubles and am using the Java Math library functions to calculate with doubles, and then casting to floats when I am adding vertices to my shape. That improved a lot of the major issues I was having to start.

    If I animate the starfish shapes, for example, where n1 has a very small value, the shape starts cutting corners at around n1=0.30, and it blinks out of existence at about n1=0.22, before returning (at a very small scale because of cut corners) at about n1=0.05. This is after I switched to an iterative root approximation algorithm found at (with the ints changed to doubles)

    Is there another way to improve the accuracy and make my starfish reappear? Or even just a better algorithm for root approximation that would be reasonable to implement?

  3. Felix T-Rex Avatar

    i know what you mean, but i don't know if you see what i'm saying. do you understand?

  4. Juraj Carnogursky Avatar

    Try this:

    var r = 1
    var time = 0;
    function setup() {
    createCanvas(500, 500)

    function draw() {
    time += 0.01
    translate(width / 2, height / 2)
    for(var a = 0; a < 50*PI; a+=0.01) {
    var x = r * cos(a) * atan(a) * a;
    var y = r * sin(a) * atan(a) * a;
    stroke(map(a, 0, 50*PI, 0, 255), 255, 255);
    point(x, y);

  5. Laurent Brown Avatar

    Thanks! I am making a Shmups game and I will use this for the squad formation shapes !!

  6. M vE Avatar

    Found a small bug in your formula, see the formula in code on the paul burke webpage. the shapes you tried in the video would still render correctly but more advanced shapes it wouldnt do with the code you wrote.

    in part1 it should be: var part1 = cos(phi * m / 4) / a;

    In the for loop you could multiply the incremental variable 'angle' with PI. this way you always end up on 0 (or 2PI).

  7. Полиграфович Avatar

    That's an nth root, not n times sqrt..!

  8. nonicknamename Avatar

    is processing or p5.js a IDE only artitst should use or could you do the same things like in eclipse with this?

  9. Shockszzbyyous Avatar

    can you use this formula to describe shapes perfectly ? like for example make pictures that are infinitely zoom-able ? like you can zoom in and in but the shape will never pixelate

  10. mathIsART Avatar

    The amount of stuff I learn from this… unbelievable! AND you're incredibly entertaining, to boot!

  11. Edwardian Maidsama Avatar

    Great video! I want to use this to great flow fields for flocking systems, but when i calculate the normal vector in general the formula fails for theta = 0,PI,2PI and for all values of theta when m=0; would you happen to know what I could be doing wrong ? I wrote out the formula I calculated explicitly here:

    and my code is here:

    your help would be greatly appreciated i've been trying to figure out whats wrong for 3 days now v.v

  12. Snapper 4298 Avatar

    Your video tutorials are awesome. I am html/css only and was looking for some tutorials on java. I found your p5 video about plotting some basic shapes / square / circle etc and tried it on codepen. Now p5 is my new passion in coding and last night, I saw a codepen on the mandlebrot set and when I checked the comments it said thanks to you, and coded in p5 ! I was all over that code haha – you rock, TY so much !

  13. Fun Aholic Avatar

    hello I have a question. not related to this video
    how long do you practice coding?
    and when did you start?

  14. Rithvik Bhogavilli Avatar

    +Daniel Shiffman Wouldn't the letters that you mentioned at 2 : 45 be variables because they can change and not constants because constants remain the same.

  15. Sniperteer Avatar

    Thanks for the video! Please make 3D soon! 🙂

  16. JaYJ4yVM Avatar

    Damn I wish I was as intelligent and smart as you. If I see those formules, I would insta quit xD

Leave a Reply

Your email address will not be published. Required fields are marked *