Coding Challenge #25: Spherical Geometry

hello welcome to another coding challenge this coding challenge will happen in two parts it actually picks up from two previous videos all leading up to eventually making this thing over there that's kind of undulating oscillating called the super shape so I'm going to get to the super shape not in this video but the one that follows this one because the first thing I need to do in this particular video before I can figure out how to make the crazy-looking super shape is simply just how to draw a sphere I'm going to do this in processing which is a Java based creative coding environment now first I should mention if I just want to draw a sphere I can actually do this really easily so here I'm just going to say it set up I'm going to say sighs let's have a nice window that's like 600 by 600 and I'm going to use the 3d rendering engine P 3d in draw I'm gonna say background zero that happen to say I like to just I'm feeling giddy while doing this I'm going to say fill 255 I'm going to say translate with / - height / - and then I'm just going to say sphere I don't know I'm gonna say like 200 and then I'm also going to say lights lights camera action and then I'm gonna run the sketch and I thereafter come on oh and then look I have a sphere so this was actually really really easy to draw a sphere because processing has built into it a function called sphere that would just create a sphere but you'll notice the sphere isn't actually a sphere I mean of course it's not anything at all your this is like pixels in some sort of big YouTube space and maybe I'm just pixels and somebody else's imagination I don't know maybe everything we are is some kind of weird computer simulation and I'm I think I've lost I've lost track here back to what's at hand is it what it is is it's a lot of triangles all placed next to each other and you can see those triangles if i zoom up here and these are actually known as triangle strips because of these there's this horizontal or vertical strips of triangles so what I want to show you in this video is how to draw these triangles yourself because if you can draw them yourself then you can start to move the triangles around so they undulate you could color them with different colors individually you could texture them with an image there's all sorts of types of things you can do and ultimately what the super shape is is it's like having spear but taking certain points of the sphere and pulling them out and pushing them in based on some other math so that's what I want to do in this particular video okay so what's something that we need to become familiar with so one thing that I think that would be worth discussing briefly awkward shuffle this way button press hello hello we're still here would be to talk about how do we look how do we how do we think about talk about and consider the points on a sphere so you've probably heard of something that could always completely confuses me and I get it backwards I was a about 75% of the time that I talk about it and hopefully this is going to be the 25% of the time but you've probably heard of something called latitude and longitude so if you think about the earth as a globe and I could draw the globe here is like here's a circle which pen is not so great and I could kind of draw these strips here trying to use my best artistic talent to make something that looks 3d esque and you can think of this in a way it's like okay there is a grid of columns and rows and if we were to take this flat two-dimensional grid and take it and kind of wrap it around a sphere you know it's this way this is like the map of the earth that we've taken and wrapped around a sphere and each point along the sphere is represented by a longitude meaning which one of these columns so to speak by a latitude which one of these rows so to speak and the latitude in the middle is you know referred to as the equator now these can be you know there's lots of different ways of kind of measuring latitude and longitude minutes and seconds and there's the prime meridian and all this stuff I'm I would love to do another video about mapping I think I will get to that at some point but for us right here the measurements that we're going to use our angles it's kind of an angle of rotation you can think of it and longitude goes between negative 180 degrees to 180 degrees and latitude right so that's a full kind of 360 all the way around that globe but latitude only needs to go between negative 90-degree over a 90 degrees and negative 90 degrees so these ranges will cover every point on the globe there's some nuance to this but I'm kind of doing this in a sort of basic pure loose way so what I need to do is have a loop just like you might have a nested loop for pixel's X knocking over cameras just like you might have a nested loop for pixels pixels 0 1 2 3 4 or 5 what I want to do is have a nested loop for longitude values and latitude values hopefully I got this right well redo this video or put lots of YouTube annotations all over it people on the Internet are really gonna get mad at me if I get this wrong okay so what I'm going to do is I'm going to now get rid of this line of code that's this sphere 200 and what I'm going to do is and I'm going to say and you don't have to do something strange instead of actually doing my loop from negative PI to PI or negative hundred 80 degrees to 180 degrees I'm going to do something a little different I'm just going to say I goes from 0 to like 100 and then I'm going to have a nested loop inside that J goes from 0 to 100 and what the 100 is kind of going to refer to is how many points what's my detail level of this sphere and actually processing as a sphere detail function I can set that for the the automatic spheres that are drawn so like how like fine is the resolution how many points across how many points below so I'm going to do that and then what I want to do is then take every eye so let's have I be the longitude values I think that'll make sense so I need a longitude value which is mapping I from 0 to 100 and let's make that 100 a variable now so I am is between 0 and and each one of those should then map to the range of negative PI to PI and then the latitude should map between negative 1/2 PI to half pie okay I think I'm doing pretty well here and I'm going to change this to total and total now whoops and I'm going to change I'm going to save this as a sphere geometry okay so now I need to do something more so let me just run this to make sure it doesn't crash or give me any errors okay so this seems reasonable it's working now here's the thing what I need to do is take those each one of these latitude and longitude values which we can think of as a pair of values and have some math to convert that to an XY Z value now this is something quite similar to what I've done before and actually by the way this should really be written like this are common latitude longitude because I really have three values are being the radius of that sphere this is very similar to something I've done in previous videos if I have R and theta a radius and an angle I need to convert that to an XY value this is kind of polar coordinates right if I have a radius and a theta I need to convert that to an X and a Y and their formulas for that R equals sorry x equals R times cosine of theta y equals R times sine of theta now if this polar two Cartesian coordinate transformation is unfamiliar to you I would suggest looking at one of my previous videos where I cover that in more detail but what I need to do is essentially apply the same kind of math but it's a bit more complex math because instead of having I have one radius but instead of one angle I essentially have two angles and the results I want instead of having an X and a Y I have an X and Y and a Z so let's go and look at a look at how that works okay so there's a nice place on the internet you may have heard of it where I could behind those formulas it's called Wikipedia and I have them right here and these are the formulas for converting from latitude and longitude and I believe in this case that theta refers to low Mangia tude and the fee or fie symbol fee fie foe fum fum symbol refers to its a Greek letter fee but I think it's often informally pronounced Phi I don't know why is a latitude hopefully I got that right and when we find out that I got it wrong we'll fix it okay so these are the formulas I need x equals R times sine of longitude cosine of latitude so let's put that in to the code x equals R times what what did I say sine of longitude x times cosine of latitude you know I'm not deriving these formulas I don't know that I could just do that off the top of my head right now if people are interested in that I could make a sort of side video and then y equals R times sine of longitude sine of latitude sine of longitude sine of latitude and Z equals R times what cosine of longitude and what is R well by the way when I drew the sphere automatically I gave it a value of 200 I'm pretty sure that would be the radius so what I want to say here is float R equals no know about to stick to remember what I'm doing 200 okay so now we should have a longitude or latitude mapped in a nested loop and calculate an XYZ so let's do something simple and just say stroke 255 and say point X Y Z and let's hope that we get something that looks like a sphere oh no that doesn't look right at all ooh interesting though what did I do wrong okay timeout pause okay back after debugging I had a really silly error here where I'm used using I in both of the loops so I is the value that's going across for all the longitudes and J is the value that's going down for all the latitudes and by the way if I want to calculate my latitude I need to use J so now we should see what do I get these are all the points of the sphere it's sort of hard to see that this is a sphere because it kind of just looks like a lot of points in two dimensions in like these radial circles so one thing that I'm going to do to be able to manipulate this scene very quickly and easily is add a processing library called PZ cam I've shown in other videos how to install it but so I'm just going to go here I already have it installed I'm going to go here and import PZ can and then I don't actually need all this then what I'm going to do is I'm going to say I need to create a PZ cam object which is a camera I'm gonna say camera equals a new PZ cam this so that it controls this sketch and 200 because I want to my view to be about 200 kind of 3d pixels away and once I do that we should have something that looks like whoops oh I now I don't need to translate to the middle PZ cam does that for me automatically and it shows something looks like this and we can rotate around we can see this is indeed something very spiritual I can look at it and rotate around and we can really see also by the way how this total value is going to affect the resolution of this sphere so for example if I were to say I just want to use 20 units for each latitude and longitude whoops run this code you can see that sphere is still there but you can see there's not as many boys this is very hard for you to see just for the sake of the live stream let me say stroke weight for right now so that those kind of dots become oh and I should probably start further right you can see the kind of resolution of this sphere as much smaller so to speak okay yes so um so Oliver's pointing something on the chat that it should be less than or equal to total I'm gonna get to that in a moment I'm gonna get to that in a moment that's going to come up as I start to add the triangle strips so let me leave this at 24 right now and let me just fix this PZ cam thing to start a little further away okay so this is real this is what I'm looking for I now have a sphere now here's the thing the sphere now is just dots and what I want to actually do come back here is to have each one of these dots become two triangular polygons you know there's a variety of ways I could kind of mesh this fear but this is an easy way and so what I want to do is create these triangle strips and I'm going to create them as horizontal strips so I want it for each time I go to a different latitude I want to start a new triangle strip and I need to say each triangle is one longitude value followed by another longitude value followed by a value that follows no no I think what I'm going to do is this yeah so I need to say one longitude value followed by the latitude below it followed by another longitude value there and that gives me that and then when I go down here it'll give me this I want to go there they'll give me this when I go down here they'll give you this so that's going to connect that whole wraparound as a bunch of triangles I don't know if I explain that so well but let me to put the chat okay are the comments or whatever wherever this video is being watched okay so first thing I want to look at is in order to do this what I actually want to do I think will make things simpler is calculate all of those vertices V X points in an array because I want to pre-compute the sphere and then draw it in a separate loop so that because I'm going to like be using different points along the sphere as I go so one way of doing that is to create a two-dimensional array so and the idea here is that I have a two-dimensional array to store the XYZ value for every single latitude and longitude so I'm going to come back over here and I'm going to say P vector two-dimensional array and I know what to comment call this globe and then write somewhere here I know I could be smart about this let me be smart about this and very cool what I do is smart I'm going to put the total as a global variable because what I'm going to do here is say globe is a new two-dimensional array and what I know it which has a total and total so I need 20 columns and 20 rows essentially 20 spots for latitude values in 20 spots for longitude values whatever there's probably a science to this that often escapes me but okay so I'm doing that and then here instead of actually drawing the points I don't want to do that anymore what I want to do is say globe I is longitude so I'm going to say so actually I want to do this differently I want to do for every latitude do all the longitude so I'm actually going to change this and I'm going to have I refer to latitude so I want to swap these I think I'm doing this right we'll find out so I want to say I is like the longitude value J is the latitude value is a new P vector a vector by the way is a data structure that can store the x y&z components all together there's more to it than that I have plenty of other videos about P vector so I want to do this let me just run this make sure I don't have any errors great so now I'm going to copy this loop exactly and I don't need to do any of the calculation anymore the second time around all I need to do is say I have a p vector V which is at that spot and then what I want to do is draw the point so I just want to make sure the same thing works v X V Y and V Z so I should get the same exact thing I had before which it looks like I do so I haven't done anything new the only thing I've changed is that I first have a loop to calculate everything because all the sine and cosine stuff is expensive calculations so I don't want to do that multiple time so they don't have to so I'm going to calculate everything put it in this two-dimensional array and then use the two-dimensional array to set a bunch of points and now is the moment where instead of points I can say for every J I want to start a new triangle strip and at the end of every row or every kind of um every latitude I want to end shake and I want the verse to seize I want to set the vertices to be this vector now however I'm going to make this v1 because remember what I needed to do was I needed to say I want to set this point then this point then this point and that gives me a triangle then this point then this point so I need to skip down one so what I'm going to do now is say I want another vector v2 equals globe I plus 1j and then I want that to be the next vertex just by the way let me just comment this out and show you what happens I don't know if we're going to get anything at all we get just these like lines across it didn't actually make the triangles and I don't think I think we can do away with the stroke weight I'll leave it at two just so it's quite visible so you can see what we've got here we've got this sort of almost like I don't know what to call that like foldy pattern ii thingy so I need that bottom vertex I need to do top bottom across bottom across bottom across and now once I do that you're going to see ah okay I have an error I have an array index out of bounds there why well I'm only going from J to total and then I'm saying I plus 1 so I could say just for right now I'm going to say total minus 1 I mean for I total minus 1 ok because I didn't need I in the next one I in the next one I want to stop one early and now you can see I have the triangle I have that triangle stripped now now let's look at what's going on here there's like this whole there's like a scene here and also you know I didn't finish the top I think is missing maybe I kind of got it there's like there's like a bunch of holes so why is that well there's kind of a problem which is that while I'm going around in a whoops while I'm going around if it's kind of nice looking and look it's interesting to see how you could manipulate and cut holes and do all sorts of things but while I'm going around it I actually need to end up where I started instead of stopping at the last one before and so we need to adjust the code to really do that and there it one will happen to do that trick weights just say like well I have this value called total which is 20 but I'm actually going to make my array always one bigger and then I'm going to do less than or equal in the loop or I could just do less than you know it just for consistency this is really the same thing I'm going to say total plus one total plus one and then now with I I doesn't go to total minus one here I goes all the way to total and J goes to total plus one so if I run this again we should see here that I have the whole sphere now so you can see I have now created geometry for an entire sphere and there's all sorts of exciting things we could do all of a sudden now that we've done this okay hold on timeout let's keep going yes Rukhsar programming the death star in a way now let's do a few things I didn't notice oh I had a fill here I didn't realize that so let's do something let's just say for a second that I want to look at I want to just sort of see these as separate strips so what I'm going to do is I'm going to say I'm going to have a different fill here I'm going to say if I modulus 2 equals 0 what does that mean I modulus 2 equals 0 modulus is an operation that gives you the remainder of division so 2 modulus 2 is 0 3 modulus 2 is 1 for modulus 2 is 0 5 modules 2 is 1 so I'm saying every other kind of row so to speak let's say fill 0 otherwise fill 255 and now we can see really that we've have these strips here so I have each only I didn't wait let's start over did I really do this I think I did something backwards because I was imagining my strips going across this way so I will look at this it doesn't really matter yeah so somebody the chat points out that I shouldn't be recomputing us the sphere over and over again and draw and that's absolutely true the only reason I'm doing that is because ultimately I'm going to do I'm going to animate and I'm going to morph the sphere and so at that point I'm going to need to recalculate the points every time so I'm setting up the examples that way ok so you can see how I can kind of alternate colors I could also do something like let's make a rainbow so I'm going to make a HSV color as the color mode and I'm going to fill from I'm going to say give me a hue value which is maps I I guess I can do this with J now if I want whips which maps J let's just try that from zero to total to 0 to 255 and I can say fill that hue with full brightness and saturation and now we have got a kind of rainbow II looking thing but you can see like I first of all let's take out the stroke let's check out the stroke just so we've got the colors I'm going to say no stroke and I'm also going to do something like well let's actually map the hue to 255 times 6 and say hue modulus 255 so we cycle around the rainbow multiple times and there we go and I didn't get this so I messed up having this line up the seams line up correctly I'm going to fix that in between this video and the next one I'm not going to you could fix that on your own as an exercise I think that's a couple things backwards here and there has I built this but you can see what the possibilities are I could also start doing things like I could take these each time I calculate the globe I could say also say I could make a random vector a random 3d vector random random 3d I could scale it by some amount 10 and then I could say globe I get J J dot add that random vector and if I do that you're going to see I now have this sort of like jiggling all the points are kind of moving randomly I could do something with Perlin noise you can see the possibilities emerging and how you individually color each tile and how you might individually move and adjust those points so this I think finishes my tutorial on sphere geometry and what I'm going to do in the next video is fix a few things here that I might have gotten wrong as well as move words how I can turn that sphere into generating these super shapes so right now I moved these points around with random numbers what kind of other math might apply to start moving the points around and see how that's done so thanks for watching this spear geometry video stay tuned also for I'm going to look at how to maybe do this with WebGL in JavaScript in a separate video so I've also got that coming as well okay see you soon hello quick epilogue addendum to that video there was actually a big fatal flaw and not so fatal actually my code was fine it made something interesting but there was a flaw where I wasn't getting the effect that I expected the effect that I expected we run this now is this which is actually getting nice perfect horizontal bands of color for the rainbow effect and that the reason why is I had in these formulas by accident reversed my latitude and longitude and we could see on the Wikipedia page that right here this theta actually refers to latitude having a range between zero and pi and fee fie foe fum the Greek letter fee as a range is refers to longitude or the range between 0 and 2pi and I also I don't know why I had between negative PI and PI and negative hat pi divided by 2 I now also adjusted those ranges and you can see the ranges are now between 0 and pi 0 and 2pi and have latitude and longitude in the right place and we can really see and this by the way i have also changed the sphere detail to 200 the total value to 200 so you can see those bands are much more kind of nuanced and detailed if I change this back to something crazy like 5 you would see that like now this sphere has very sort of like strong hard geometry to it and would be interesting to kind of make that a dynamic value so you can kind of have this you know almost like cube morph into spheres so I'll let you play around the correct code will be posted hopefully you weren't like typing all these comments in the chat to fix it I think you got to the end of the video and realized I fix it at the end but if you did then that just means you're kind of participating in the community that is this world and that makes me happy so thanks for watching this addendum and who knows might actually be another addendum starting a moment later but I don't think so I think this is the last one goodbye

Channel: The Coding Train

Views: 134,014

Keywords: coding challenge, 3d supershape, spherical geometry, education, mathematics (field of study), spherical, tutorial, code, p5.js, processing, daniel shiffman, creative coding, processing tutorial, sphere, challenge, superformula, p3d, spherical coordinates, spherical system, coding, polar coordinates, reza ali, paul bourke, TRIANGLE_STRIP, triangle strips, processing beginShape, sphere geometry, 3d, 3D sphere tutorial, trigonometry

Id: RkuBWEkBrZA

Length: 26min 35sec (1595 seconds)

Published: Wed Jun 29 2016