Coding Challenge #26: 3D Supershapes

Coding Challenge #26: 3D Supershapes



Views:57340|Rating:4.98|View Time:21:35Minutes|Likes:805|Dislikes:4
In this Coding Challenge, I use the “superformula” to make a 3D “supershape” in Processing. This is part 4 of a multi-part series on superformulas, superellipses and supershapes

Support this channel on Patreon:

Send me your questions and coding challenges!

Contact:

To view the unedited p5.js version of the challenge:

Links discussed in this video:
Paul Bourke’s Supershapes (Superformula) website:
Reza Ali’s 3D Supershapes:
Wikipedia’s Spherical Coordinates System:
peasycam website:

Source Code for the Video Lessons:

p5.js:
Processing:

For More Supershape videos:

For More Coding Challenges:

Help us caption & translate this video!

📄 Code of Conduct:

hello and welcome to the super shape coding challenge grand finale in the previous video if you watch it you don't have to have watched it to follow this one but if you watched it I figured out how to make a sphere by iterating over latitude and longitudes and calculating spherical coordinates and creating a lot of Tyler triangle strips and coloring them like so and you see that on your right that pure nice sphere with little with horizontal bands and what I want to do in this video is show you how to take that sphere and turn it into this crazy-looking super shape now this is just one example of a super shape we're just what our super shapes and where do they come from so first of all I want a reference to you reference you the work of Risa Ally a link to his work will be in the description of this video he has a wonderful art project all about super shapes that you can look at and enjoy and some videos you can watch a beautiful ways of coloring and messing with them this is really where I took my visual inspiration from this particular work where I have where I've got the math formula from is from Paul Bork's website so what's going to happen what we're going to do is instead of simply saying something like right in this sphere that I've calculated the point for every the sort of XYZ points for every single latitude and longitude there is a radius a sort of fixed radius of 200 so what if we had a kind of crazy way to calculate the radii so for example if we just use Perlin noise or a sine wave we might see some rippling like looking sphere well it turns out this strange formula for whatever reason when you take either the latitude or longitude angle and calculate a radius based on the this crazy formula you get all sorts of values and you get these super shapes and if I scroll down we can see there's a whole bunch of kind of constants here there's n two there's actually and there's a constant M there's actually four there's N and 1 and 2 and n 3 and if we scroll down here you can see based on how you might set those values you values those constants you'll get different shapes and this is actually the one that you're seeing in the particular example that I showed you and you can see all sorts of various possibilities here so the goal here is I'm going to make you I don't know I don't make ngey I don't know what that means I am going to write now code take that sphere and add those math formulas so we can see these super shapes on the screen I'm just going to scratch the surface on this and it's my hope and my goal that you take this and do something creative and interesting with it and I'll talk about what the possibilities might be at the end of this video okay so let's just get started and think about some things we need to add and change to this there so I'm going to close let me sorry move around here for a second I'm going to close this and so this is the code that I right now have to work with it uses just plain old spherical coordinates so R is a fixed value of 200 and I get the XYZ value and then I draw and set the sphere now what I'm going to do just briefly is kind of take color out of this for a second because I think that'll help us kind of debug this a little bit and I'm going to say a stroke 255 no fill and so there we can see again this is actually what's being drawn this is just the kind of wire mesh of that sphere and I'm also going to change this variable total up here to a 25 just to make it a little less detailed so we can kind of might help us sort of see what's going on so okay so now that we're there what do I need to change and let me just give myself more space here move them things around what I need to do is simply change the math that's going on here instead of the pure spherical coordinates where I just go from the latitude and longitude to a sit and a single radius I want to have different radii values based on the latitude and longitude so let's look at how that works once again here is this formula now I think what would be really useful would for me to have a kind of like visual reference of this formula always on the page while we're programming this and I also I'm going to need this so I'm taking some screenshots here I should have done this in advance but I'm just doing this in my you know and open these up with Mac preview and get put these up here in the corner so as I'm writing the processing code I can kind of have a reference to this okay so and actually you know what might be useful let's make a function let's just say there's a function called super shape and that function returns a radius value and it returns a radius value I'm gonna say based on what the based on some amount of constants so I need a I need em I need n1 I need n2 and I need n3 so the idea here is that what I could do here is say R 1 equals super shape based on some constants like oh did I call it super that would be a tear of super shape super shape based on some constants like the one that I'm going to do I have to have some constants memorized I don't have them memorized I'm going to go back to Paul Bork and I want to look at the let's start with this one so I want these particular constants point to one point seven seven point to one point seven and one point seven so I'm going to do a point two oh sorry seven point two one point seven one point seven and then actually what I need to do one thing you'll notice about this super shape is that the spherical coordinates have been adjusted slightly the way that this math works so I'm going to make those changes as well so I'm going to change this to I'm going to change this to cosine cosine I'm going to change this to sine cosine and I'm going to change this to sign and then I also need to have these new values R 1 and R 2 so I'm going to say times R 1 times are 2 times r1 times r2 and I'll talk about what these are in a second I'm just adding them into my code and then also taught r2 times r2 so why are there two values well pause back after an audio glitch so what I was talking about was why are there is why is there r1 and r2 well what this 3d super shape actually is is you can think about if you remember there is actually a previous video where I look at just a 2d super shape and what the 3d super super shape is it's kind of like having a 2d super shape flat like this and 2d super shape flat like this and then rotate it around each other so in that sense there's a radius that's determining there's kind of a radius calculation for the one of those super shapes and a radius calculation for the other super shape and one of those and those super shapes are calculated based on latitude and longitude so what I need to do is calculate both and r1 that's based on right now they're going to be the same so I don't know if it actually matters I need a r1 and I need an r2 so this is the idea that I want an r1 which is super cheap and by the way I forgot the most important parameter to this function which is that I need to pass in that angle latitude and I need to pass in that angle longitude so I'm going to go back here and I'm going to add the first argument as theta so first thing I'm going to do is just let's just see whoops and I lost my latitude longitude oh it's here this has to go above so there's a lot going on here on this screen here but let me just take them over to take a deep breath and look at it so what I'm doing is I'm looking the same thing I did with the sphere I'm saying for every latitude and for every longitude let's calculate a super shape radius value based on the latitude a super shape radius value based on the longitude and then apply those formulas I actually have a mistake in those formulas that I can see now which is that cosine longitude longitude and this is latitude latitude and then there's something else here which is that for the calculations to work correctly I want to have my latitude range instead of going from 0 to PI to go from negative PI over 2 to PI over 2 and longitude range as well so I'm going to change those ranges to go from negative 1/2 PI to 1/2 PI and then negative PI to PI now one thing you'll notice is that this this value R is not present here in this particular formula what I'm going to do is calculate kind of a unit super shape that's based on the value of a range between 0 and 1 and I'm going to use that value R to expand its size so I'm going to keep that as 200 and so let's just see if I run this right now the super shape function is just returning 1 no matter what so I'm not actually doing the calculation and if I run it you should see I've basically still got that sphere so I'm still getting the sphere if the super shape calculation just returns 1 for R 1 and R 2 for every single value I'm still going to have that sphere so now it's up to us to put the math here correctly and not have things go too terribly awry so let's give that a try I've got R 1 and R 2 the wrong way around so so let me correct that meaning that R 1 should be based on a longitude like this and our 2 should be based on latitude like that let's see so maybe that's the way I guess I could look at the formula edit this out and see that right R 1 oh yeah RR 1 of theta so R 1 of longitude so R 1 is based on longitude yet so I should just looked at this by the way you can see that this formula is saying calculate R 1 value based on the launch to our vote to value based on the the sorry our one value yes based on the longitude our to value based on the latitude okay so that should work okay got it I fixed it hopefully that's right let's still look at the result and we should still have that sphere I just had them backwards now okay let's come back here and now we're going to start to put in that math oh boy oh dear so I'm going to give myself some nice room on the screen I'm going to move this down and then move this over here so we can see that formula so what are some things I need to calculate oh I forgot there's a and B are constants – I'm just going to fur now you know a and B are going to change sort of the quality of the shape in the sense that it's going to like stretch it or or smush it on a horizontal or vertical axis I'm going to leave those as one right now just for simplicity and let's first calculate this particular value so I'm going to say t1 equals one divided by a times cosine of n times theta divided by four and what do I want I want the absolute value of that and then I want to take t1 and set it equal to itself to the N twos power so that's giving me just this component right here I'm doing this particular math and setting that to the n to power then let's do t2 which is the absolute value of 1 divided by B times sine times n times theta divided by four and I'm going to say t2 is itself to the n3 power then what I want to do is say t3 and I'm just using T as some arbitrary like variable naming structure I want to just calculate the parts of these I need to add t1 and t2 together t1 plus t2 and then I need to take that and say t3 take to the power of negative 1 / n 1 so then that's really what R is so that's the end right oh no no no yes the whole thing should be then float R equals the result of that and I should be able to return R so let's now I don't know if I I'm sure I made a mistake Oh somebody in the chat a divided by B should be 1 divided by B oh yes this should be 1 divided by B thank you I don't know if I have any other mistakes here in the math but let's run this Oh given getting an air I have some parentheses out of place so absolute value of uh there should be another parenthesis here and let's see what I get here miracle of miracles that looks like that particular supervisor I can you know give myself a little bit of a higher resolution by having 75 points for every latitude and longitude I can also what I can do is I can put the let's run this again now you can see that resolution is finer this looks pretty good I am going to now give it just like a fill of white oh and it says no fill right after that so we can sort of see what that looks like okay that looks still pretty good I think we've got it okay missing a bracket I don't know somewhere I'm missing a bracket but I looks right I may be that maybe that comet is in the past okay so let's see if we can get a cup one of the other super shapes to look right and then we'll start messing with the color and maybe do some animation okay so what I'm going to do now so let's go back to Paul Bork and let's pick another one I don't know what looks like a nice-looking one let's try this one and so what you're going to notice is that there are now different values for super shape 1 & 2 that means different values for R 1 and R 2 right this soup two-dimensional super shape that's kind of all along the longitude the two-dimensional super shape that's along the latitude and the they're rotated against each other so what I'm going to do now is say can we remember this 860 138 6130 so I'm going to go here and say 8 well that's our – I don't know if that I don't know that it really matter so let's do 860 130 now we're gonna go back and say – 10 10 10 – 10 10 10 super shapes on – 10 10 10 – 10 10 10 so now I'm gonna go up here and say – 10 10 10 okay does this look that looks kind of like what was in there right I can zoom out a little bit to see I think that looks like that shape so let's go back and see yeah that looks right so I think all of our formulas are looking correct we can see I can put this at this angle you can see those match up pretty well we can actually go back and add that color stuff that I had before from the sphere right I can get rid of the stroke and I can add hue and then I can have the hue kind of cycle and we can see now I've made this rainbow super shape and I can zoom out so we're really moving along here so you now can take this code and you can plug in the different values see what shapes you can get you can try different colors you can try to make vertical stripes or horizontal stripes or have it animate this would be nice to do actually really really quickly I could just add a variable like offset equals zero and I'm going to in the hue I'm going to like I'm going to say hue plus offset mod 255 and I'll just say offset plus equals five I don't know what this is going to do but you can see now I have my like cycling colors and I would have like zoom in here and then we can have this beautiful why is it so it doesn't looks kind of dark all of a sudden but I have to stand in the middle of this oh wait I've actually recorded a tutorial video I forgot not just like messing around okay so you can see there's like lots of kind of crazy so cuz the lights are over here there we go this is brighter now well okay I'm gonna make myself seasick okay so on you can see that there's all sorts of possibilities things you could do I want to do one last thing in this video before I stop and give you some thoughts about other things you can do let's at least make it animate a little bit so I want to go back I'm going to comment and I think first of all I think it could be a lot more thoughtful in terms of how you store these things as variables I'm just kind of doing it haphazardly right now but I'm going to go back to that the first super shape which has sort of equal values here and it was seven point two one point seven one point seven did I get that right is that what it was let's see yeah so you can see now here's this particular super shape that I started with so what I want to do with this is now just show you how to animate it a little bit so one thing I could actually do is just say let me make this M a global variable so I'm going to call this M m and I'm going to have a global variable called M and have that equal to zero now let me just run this right now and see what we get with an M of zero you can see this is actually just back to that sphere again interestingly enough because it kind of like cancels out multiplying by zero cancels out everything so what I can now do is I can say I could say something like n equals map mouse X which goes from zero to with between zero and seven so now as I start the sketch you know I you can sort of see as I move the mouse around it kind of morphs from that sphere all the way to that particular shape and I could say well let me have some kind of global variable like angle I already have an angle variable like let's just call this like a M change I don't know I could probably think of something better but I'm going to have a variable called M change and have that equal to zero and what I'm going to do is I'm going to actually map sine of M change which is like a nice smooth oscillation which goes between negative and 1/2 between 0 and 7 and I'll have M change you know change over time by some by some value and then what I've got is this thing kind of like oscillating back and forth almost like this weird super shape breathing thing I know it's brighter on one side the way that I have the light set up so it's you know breathe the camera's going to go off cuz I've hit 30 minutes so um so you can see kind of what's going on here there are a lot of possibilities now the other thing that I would say is sort of interesting to think about is not just morphing from kind of zero but what if you took two different super shapes and had those values interpolate between one to the other so you're actually morph one super shape into the other that would be a great exercise for you to try I think I've pretty much reached the end the stream went offline okay I'm sorry hopefully this is recording anyway so I think I've reached the end of this particular tutorial I hope that you try making some of the other super shapes try playing with the variables and colors see what kind of interface you could build for this I am going to try to make a JavaScript WebGL version of this in which case it might be easier to have a interface that controls these shapes and so stay tuned Oliver just post that code in the description of this video hall you'll see another video kind of converting this code to JavaScript thanks for watching the super shape tutorial and I'm sure you're gonna have questions and comments and thoughts so please let me know in the variety of channels that exist to you to communicate with me perhaps okay you for real I mean not perhaps whatever okay no five

30 Replies to “Coding Challenge #26: 3D Supershapes”

  1. Lauren Linger

    Quick question: is there a way I can manipulate a supershape like this one with minim? Like can I have it morph along to a song?

  2. The Intellectuals

    now I don't know about the rest of you but I'm pretty sure I have been made already.(sorry for smashing your dreams. ☹)

  3. BernardBernouli

    I don't think the range and formula changes from x = r * sin(lat) * cos(lon) , 0 <= lat <= pi to x = r * cos(lon) * cos(lat) , -pi/2 <= lat <= pi/2 are related to supershapes, but they are simply different conventions for sherical coordinates. They are equivalent since sin(x) = cos(x + pi/2).

  4. Robert Evans

    It is amazing what you can program without much prep or a lesson plan. Is this how so called 'spaghetti code' is written?

  5. woahdaggies

    I would like to make a version that uses text boxes or sliders to change the values for the different variables. I'm new to p3 and I'm wondering if it is even possible to create user input!

  6. imfromzbs

    Hi Dan, thank you very much for the videos, they are very helpful! I have a remark for this lecture series, I noticed that most of the other forms (the ones you did not make) from the Patreon website do not work on the sketch you uploaded, do you know what the problem may be? The result of the form is different than from the website.

  7. Edwardian Maidsama

    the code does not seem to work for the shapes in the section that says non intergers of m in pualbourk page.

  8. BaconKwagga

    float supershape() ? i've never seen you do that before. what's the difference between float supershape() and void supershape() in this case?

Leave a Reply

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