Coding Challenge #19: Superellipse

In this Coding Challenge, I’m going to use superformulas to create a superellipse in p5.js.
This is part 1 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:
Nature of Code class on Kadenze:
Superellipse on Wikipedia:
Paul Bourke’s Supershapes (Superformula) website:

Source Code for the Video Lessons:


For More Coding Challenges:

Help us caption & translate this video!






36 responses to “Coding Challenge #19: Superellipse”

  1. scpDgJ Avatar

    function sgn(x) {
    return x > 0 ? 1 : x < 0 ? -1 : 0;

  2. Sophia Kornienko Avatar

    sgn() function is just constrain(round(val), -1, 1). Simon

  3. amo Avatar

    you could have done the bresenham method with (1-|n|^n)^(1/n), because that is the formula for the height at x on an n unit superelipse

  4. Venky Avatar

    You are simply best. The best teacher I know so far.

  5. Lane 朱 Avatar


  6. Sahil Joshi Avatar

    sgn is also called the signum function, right?

  7. MintyPlays Avatar

    This video taught me more Math than school ever will…

  8. Anders W. Olsen Avatar

    Why don't you use switch cases rather than all these if-statements? Switch cases are much cleaner to read.

  9. A. Valentine Avatar

    Is it possible to get a slider in Processing Java Mode?

  10. Shockszzbyyous Avatar

    that bit at 13:08 your pointing at, I understand that r1() takes a angle as argument , but R2() and cos() what is their argument? what is that symbol ?

  11. johnny Gamer Avatar

    I never heard of the sgn function before… Why not use:
    f(x) = x / |x|
    instead? That would give the same result. examples:
    f(x) = 20/|20| = 1

    x = -15
    f(x) = -15/|-15| = -15/15 = -1

  12. Julian M Avatar

    1 second missing

  13. Pascal H Avatar

    Daniel, I'm really sorry for this bad news :(:(
    But the current project isnt in the project folder (challenges) for photo :):) (#19)

  14. P. Muis Avatar

    Man I would love to have you as a teacher irl

  15. TechiGeek Channel Avatar

    you can implement sgn(n) = n/abs(n)…
    Please subscribe to my channel and like it ..

  16. trien pham Avatar

    Can you please do tutorials for vanillaJS ?

  17. yovli porat Avatar

    For the sgn() function you could have just wrote:
    return val / abs(val);

  18. Rocket Bunny Avatar

    What libraries r u using? – your videos are so cool

  19. James.Cubes Avatar

    i get it but it it doesn't work on processng

  20. Adrian DipTM Avatar

    how do you code "to the power"

  21. Adrian DipTM Avatar

    can you be our school teacher? cause you are way better than ours

  22. BaconKwagga Avatar

    is there any graphics software that is perfectly precise? i mean, whenever you make a shape in adobe flash, illustrator or corel draw it only makes an approximation of it. it's usually good enough but not exactly as you intended.

  23. Eternal Agony Avatar

    Thanks to this video, I was inspired to make a processing sketch that can draw super shapes. It is working, but is there any way to give the user the power to control and change the values of m,n1,n2,n3,a, and b?

  24. Artur Karlov Avatar

    awesome video, you have talent for taking complex concepts and translating them into simpler terms. I want to encourage you to go over the undelying math/maths because I think understanding that stuff can be useful. and you will do a good job with it. can't wait for the next superformula vids!

  25. Mrfaytom Avatar

    nice hair cut dan

  26. Kotori Itsuka Avatar

    seems to have new sub 😉 your videos are amazing as well as your attitude and behavior 😀 keep it up and you'll have tons of subs 😀

  27. Peter Kwan Avatar

    I first saw this at SIGGRAPH in 1986. It was called superquadric in those days. Some years later I taught it to a colleague who was struggling to model a cone blended onto a rounded rectangular prism. She went on to do special effects CGI in the Harry Potter movies.

  28. Daniel Boa Avatar

    1:14 That's almost a perfect circle..

  29. Tien Phan Avatar

    Thank you Daniel, I enjoyed your video very very much. side question which mac configuration do you have? just curious 🙂

  30. Yuval Gat Avatar

    Great video! 🙂
    The sgn(a) function can be shortened to (a / abs(a)), but doesn't work when a = 0 🙂

  31. Kyle Amoroso Avatar

    I was getting excited to see you work out the math, but I forgot it's just a coding channel haha! Thank goodness for Wikipedia though.

  32. Frank Johnson Avatar

    Fantastic tutorials! It appears to me that you get more comfortable with that really complex (and powerful) presentation setup with every video.

Leave a Reply

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