Python 3D Graphics Tutorial 13: Understanding Orientation in Three Dimensional Parameter Space

hello guys this is paul mcquarter from toptechboy.com and we're here today with lesson number 13. in our incredible new tutorial series where you're learning how to do 3d graphics and 3d animations in python what i'm going to need you to do is pour yourself a nice strong cup of black coffee that is straight up black coffee no sugar no sweeteners none needed that's your goat juice go get you some what i'm also going to need you to do is fire up your most excellent visual studio code and as you are doing that as always i want to give a shout out to you guys that are helping me out over at patreon it is your encouragement and your support that keeps this great content coming you guys that are not helping out yet take a look down in the description there is a link over to my patreon account think about hopping on over there and hooking a brother up but enough of this shameless self-promotion let's jump in and let's talk about what we are going to do today and what we are going to do is we are going to look at the solution to the homework which i assigned in lesson number 12 and that was to create a rotating vector that would rotate through the x y plane all the way around and then would rotate through the x z plane all the way around and then would rotate through the y z plane all the way around how many of you were successful in doing this if you were successful leave a comment down below saying i am legend and you might give the double chest bump or leave a comment down below that you folded up like a cheap walmart lawn chair okay how many of you guys were successful and how many folded up like a launcher actually it's okay to fold up like a cheap lawn chair i would rather have someone try and fail then never try at all because guys when you watch me code it looks really easy but you don't realize how that you don't realize you don't know what you're doing until you try to do it by yourself or you're not just copying me so you learn a lot more if you really try to do it on your own and then when you get absolutely positively stuck come over and watch me okay so let's uh come on over here and stop all this useless introductory nonsense and we are going to come over here and we are going to work in the most excellent v python folder we will create a new uh a new program called 3 3 d rotate like that 3drotate.py.py is kind of important and boom you've got a fresh new python program just waiting for you to write it so we will now come over get this out of your way i will get my gregantion noggin out of your way i know you guys don't hate anything what you hate more than anything else is when i leave uh i leave my head in front of what i'm typing okay so if we're going to do this we are going to need what we are going to need our friend mr v python so we are going to say from the python mm port star which means import everything also who's your friend mr numpai so we are going to import numpy as np and then we're going to fight with it where it keeps trying to make the np numpy all right now we have our two friends mr v python and mr numpy and now what we're going to do is create our coordinate axis so we're going to need an arrow in the x direction an arrow in the y direction and an arrow in the z direction but i'm going to use parametric design i'm going to be good so i'm going to see say that my arrow length is going to be equal to 2 and then i'm going to say my arrow thickness is equal to i think like .02 let's say we'll look at this and see if it looks good and then i'm going to have my uh i'm going to have my pointer thickness will be a little thicker i will make that 0.04 and we can come back and change these later the thing that i'm spinning around the vector i'm spinning around i want to be a little fatter than my coordinate axises now let's create our x arrow that will be the x coordinate axis and that will be a what it will be an arrow and it will be along what axis it will be along the one comma zero comma zero so that's x y z x is one y is zero and z is zero so i've got my axis i will go color equal color dot red i always think x y z i always think red green blue and so if i make x red y green and z blue it always kind of lets me stay oriented when i'm looking at it okay and my head is in your waist you're going to yell at me okay and then uh and then we need to set a length after we set our axis and the length is going to be arrow length arrow length and it already guesses it okay and then my shaft i hope it's shaft width shaft width is equal to what did i call that arrow t and guys i'm not like obsessive compulsive and have no short term memory it's just i always like to make sure before i put it in because it's easier to put it in right the first time than it is to go back and try to find your arrows so let's copy this and then let's paste it and then paste it and then we'll go in and tweak it so this will then be the next one will be the y arrow and that would be at the 0 1 zero and the color will be red green and then those other things should be okay and then the z arrow this will be z arrow is going to be 0 for x 0 for y and z will be 1 and the color will be color dot blue and then all the rest of those things should be the same so let's go ahead and take a look at that so i'm going to run that and we have an error right off the bat what is this nonsense axis not defined uh oh yeah you know that's equal to vector hopefully you saw that you know what it is is this is a newer version of v python and i'm still doing it according to the old way of doing it old habits or hard to break okay so i make the axis equal to a vector and now let's hope those things work all right boom we have a 3d coordinate axis x y and z's coming out of the page okay so much for that now we need to create the pointer that we're going to spin around so i'm going to call that i'm going to call that oh that is annoying give me a new line you aggravating thing okay i'll call this my point my point uh i'll call it my p my p arrow for pointing arrow i just like to make my variables as conf conforming to each other as possible and so i'm just going to go ahead and snag this one which one would be the best one i want it starting out at the x-axis so i'll snag this one because i want it starting on top of the x-axis and that should do that and this will be orange okay and then this one we wanted to be thicker right so it's the pointer thickness here we want that to be the shaft with pointer thickness and so this will be pnt right that is i need to make sure you see where i am that is my pointer arrow is going to have a shaft with a pointer thickness and it should be the same length so we should just see that orange on top of my red axis here if i'm thinking about this right let's take a quick look boom that looks good okay and i need to now create a while loop so while true when is true true true is always true so whatever we do it's going to do it over and over so now i need a for loop so i'm going to say 4 and i'm going to say my angle and it is going to go my angle is going to go from 0 all the way to what 2 pi so my angle is going to for my angle n who's your friend mr numpy dot linspace and that allows us to just simply say where do we want to start i want to start at an angle of 0 and then how far do i want to go i want to go to 2 pi so i'm going to say 2 times np dot pi np dot pi will return 3.141592654 and then i want to go a thousand steps all right so i'm going to start at an angle of an angle of 0 i'm going to go to an angle of 2 pi i'm going to take a thousand steps i need a colon all right now what am i changing i am changing the p arrow and i'm changing the p arrow dot axis and i'm changing that to vector all right so i'm going to need an x a y and a z but as i am spinning around this we learned last time okay what i need to be giving it is a point an x value and a y value and my length is l so what i see is is that the x value is l cosine theta and the y value is l sine theta so i need to do that with my variables over here and my length is arrow length so instead of l i will say arrow length times the x value was cosine so that would be np dot cosine np dot cosine of what my angle all right and then i'm going to have comma arrow make sure you can see what i'm typing so the x value is arrow l arrow l times np dot cosine np dot cosine of my angle and then comma and then what do i need i need arrow length times np dot sine of my angle and if for some crazy reason you're jumping into this and haven't seen lesson number 12 you better go back and watch lesson number 12 so you can understand what i'm doing so that this is the x value of that point this is the y value of that point and then because we're staying in that plane the z is going to be zero all right now remember when we do that it's going to goof up the size it's going to goop up the length of the arrow so i need to fix that by saying p arrow dot length is equal to arrow length and so that'll make sure at this point that everything is right so this if i'm thinking right should start at the x axis and should just spin around and then start again so it should just keep going let's try that that my friend is not good let's see what we did we probably didn't put a rate statement in there anytime you're using v python in a loop you need to give it a rate and let's give it a rate of 50. that's just kind of a guess but let's see how that looks so we'll kill this come back boom okay let's make sure it goes all the way around looking good looking real good to me and then i just want to make sure that it goes on another loop without okay so that is going to work so now i've gone around the x y plane now i can't remember which order i told you to do it in but now let's go through the x z so i want to start here and i want to go from x to z all right well probably what you know is now to do that you're going to need another for loop so i'm going to snag this one and paste it sometimes when you paste it messes up your indentation but it should be indented just like that one again my angle is going to go from zero but this time it's going to go from zero it's gonna be spinning this way from zero to two pi but it's still gonna go from 0 to 2 pi a rate of 50 okay but now what is staying at zero what is staying at zero y is staying at zero and now z is acting like what z is acting like y so now what i had before for y i just move it i just move it okay so x is still x but now y becomes 0 and the action is going to happen in z and so that z is going to be the sign because z is now acting like y does that make sense think about it if it doesn't make sense stop and think about it let's try that so before in the earlier one x was cosine and y was sine well x is still cosine okay x is still cosine but what it is is it is now z is doing what y was and y is doing what z was and so these two these two y and z trade position and then it should just flip around the other axis right could it really be that simple let's see okay we not surprised that this works right the real action will be when it gets to red if it starts heading towards blue when it gets to red it should head towards blue let's see if it works the tension builds the tension builds boom look at that okay it spins towards blue and it's going to go to blue all the way back to red and then it should spin around it should spin around again when it gets to red then it should head towards green okay boom that is working all right so we've gone around the x y plane we've gone around the x z plane now we need to go around the z y plane okay so this time it's going to be like the first one only this time z is acting like x z is going to act like x and y is still going to be y so we're going to go back and we're going to get that we're going to get that first for loop again right so it's just like the first for loop so we'll copy it and paste it okay so it's just like the first for loop but this time what z acts like z acts like x so i got to take all of this z is going to act like x so i'm going to take the x and i'm going to move it to z all right and now x is going to act like z and it's just going to stay at 0 right because i'm going like this this is the x direction i'm going like this i stay at 0x does that make sense let's try that were any of you guys able to do this let me know where any of you guys able to do this okay so let's see i'm going to go around the x y plane [Music] when i get back to the red x when i get back to the red value the red axis it should then head towards blue okay now i'm going to head towards blue and now when it gets to red it's gone all the way around so probably what we're going to see is something ugly it's going to jump over to blue it's going to jump over to blue jumps over to blue but then it does go in the right thing okay i think that's ugly and so what i want to do is when i get back to red i want to drive it i want to drive it to the blue and that means on the last one i'm on the last one i'm going to go all the way around the xc plane but then i want to go and not stop at 2 pi but i want to go pi over 2 further i want to go pi over 2 further does that make sense because what i'm doing is i'm spinning around the x z plane i'm spinning around the xz plane but then when i get back to the start i want to go pi over 2 further and that way it can smoothly go through the z y plane i hope that makes sense watch this is what i don't like watch this it comes back to the red and then it pops to the blue i want to drive it over there and so that is on our second for loop okay on our second for loop this is the for loop the second one that is taking me around the x z plane and so instead of stopping at instead of stopping at 2 pi i want to go an additional pi over 2. so let's see how that would work so instead of going 2 pi i want to go 2 pi plus another pi over 2. well i need a common denominator how much is 2 pi well that is 4 pi over 2 plus pi over 2 is equal to 5 pi over 2. all right so if i fix this on my second for loop instead of going to 2 pi over here and sit on my second for loop instead of going to 2 pi i want to go to what did i say 5 times pi divided by 2. and that should drive it on over to that other axis so that you don't have that ugly business going on okay let's see what happens okay not surprising that's working we are traversing the x y plane when we get to red we should start driving towards the blue we're going to get to red and then we're going to drive towards the blue that's good okay but now when we get back to red we're not going to stop it red we're going to drive on past it to blue and then we can go up and go through uh now we're going to go to blue now we should go up to green okay now we're going to go to green but you know what we're going to have a problem now because when it gets to blue it's going to pop back to red right it's going to pop back to red boom and i don't like that i want to drive it i want to drive it back to red how would i do that i can't drive it to red in that axis so i'm going to have to change the direction and i'm going to have to go in the x z plane just like it did there it's going to be here and i've got to drive it back around so what i want to do in the x z plane in the x z plane i want to start at pi over 2 and go to 2 pi all right and so this is how we're going to have to do that we're going to have to do that with another for loop and it's going to be like the x z1 and the xz1 is the xz1 is the second one right that's where we're working with x and we are working with z so i need to copy that xz that second for loop i'm going to copy that second for loop because that has the type of motion i want the right plane and i'm going to come down here and i'm going to add it but now instead of going from 0 to 5 pi over 2 right where did i start i started here at pi over 2 so i want to go from pi over 2 to 2 pi and stop and draw a picture if you don't understand this because you have to understand this so i'm going to go from np dot pi divided by two and i'm going to go from there to 2 pi so i'm going to go from pi over 2 to pi 2 pi that should move it back to the x-axis and then smoothly draw the circle so let's give that a try see if that works i think now we're going to have it go around without those crazy i don't like to have animations that defy physics and you can't disappear off of an axis and magically appear somewhere else so i'm kind of making this thing move in the real world which you know simulations don't have to unless you make them act like the real world which i think is a good practice okay we're going to head towards blue now boom we're heading towards blue and now we should go all the way past red and then back to blue and then head towards green okay we're going to back to blue and then we should head towards green back to blue head towards green and now when we get to blue we've got to drive back to red right and then we'll start the whole thing over but i don't want to just magically disappear from blue and jump to red i want to drive back over there so when i hit blue i should go on around to red and boom it is going to work when it gets to red then it will head back to green and i love doing things this way but what i want you to see is we've learned this axis command but really the axis command is the x y and z position of the tip of your vector right your vector doesn't change length but you've just got x and y and z and to kind of demonstrate that to kind of demonstrate that let me see if i can do this let me make a a b radius of equal to let's just say point one i'm just kind of guessing i'm gonna make a ball okay and now i'm gonna say uh my ball is equal to the ear and that sphere is going to have a radius of it's going to have a radius of always check b radius b ray d us okay it's going to have a color equal color dot red and i want to start it right at the tip of the vector where the vector starts and where did the vector start the vector started at a position well the tip of the vector was at the one zero zero so i'm going to set position equal to vector one comma zero comma zero so when this ball is created the ball will be at the tip of the vector although [Music] it wasn't 1 it was out there by arrow length right because my vector is too long and so it will be out there at arrow length and that will be better parametric design instead of one if i say this is arrow length out there so that is the position of that little ball okay i'm just going to run it to make sure i end up with a little ball there little ball i'm going to be doing anything interesting but i want to make sure i have a little ball there there it is okay that's a little too big i think i think it's a little too big by about two so uh i'll make this point o five all right now that's not very interesting that is not very interesting is it i need to check something here real quick because i just forgot a command okay sometimes i don't have all these things memorized okay so now what i want to do is as i'm pointing this thing around what i want to do is i want to change my what i want to change my ball and i want to change it's what it's position and where do i want to put its position it's going to be equal to a vector and i want to put it at the tip i want to put it out there at the tip okay i want to put it at the tip of the arrow well where is the tip of the arrow it is all of this nonsense right it is that vector in fact we can just copy that and then put it here and what is that going to do it's going to put the ball at the tip of the vector right our spinning vector all right so now we need to do that for each one of our for loops so let me copy this much i'm just going to copy the whole thing and then in my next for loop the second for loop i'm going to put that but now i need to make the vector right and i make the vector right by getting the vector the p arrow line of this for loop does that make sense i hope it does so that is what needs to go here okay now i need to do the same thing here and what this is going to be this is the third for loop my ball dot position is equal to and then i use its arrow vector so do you see that the direction of this moving arrow its direction is kind of like the same thing as the position of the ball and i hope this makes sense and if this doesn't make sense go back and watch this video again because this stuff you really really need to understand and so here again ball dot position is equal to what this vector for the axis is on the arrow now if i'm thinking right now i should have that little ball just move around and always be at the tip of the vector but let's see how many crazy mistakes i mean the problem with doing a bunch of copying and pasting like that is man if you're making a mistake you just put it in 50 different places boom look at that little ball do you see that huh do you see that look at that all right i shouldn't get too excited i should let it go all the way around because i could have ended up with it in the wrong spot so let's let that go around now it should head towards blue okay now it blew it should go all the way around it should come all the way back to blue and then it should head towards green it's going to come all the way around and now it blew it should head towards green it should go all the way around and when it gets to blue then it should head back towards red and it should head back towards red boom okay so that's going to work that looks good so now this is the kind of cool thing that i am going to show you when i make this ball i'm going to set a magic parameter that you don't know about but i will show you on this my ball when i create it my ball where do i create my ball here it is when i create my ball i will do another magic which is uh make trail okay make underscore trail equal to true and what that means is it should leave a trail everywhere the little ball goes wherever the ball goes it should leave a little trail and uh let's try that this should be kind of exciting look at that bim and if you think about it this is like a what what does this remind you of back from third grade it's like a protractor right if you have a constant radius and you trace out that constant radius you get a watt you get a circle and now what's going to happen here what's going to happen we're going to head towards blue uh-huh look at that you like that i like it a lot okay and then when we get back to red we're going to go back to blue again we're going to go past red now that's okay it's just going to retrace where it was and then it's going to what it's going to head towards green now if i just told you guys to go do this you would have never ever in a million years probably figured it out but don't you think this is kind of a cool uh animation that we're doing here and then once we get here it's going to retrace to go back to red once we get to blue it's going to retrace to go back okay look at that man that is pretty slick okay i just can't help myself you know there's just certain things that i have to keep trying let's try one other thing here because i want you to learn that you can also do a trail color and so let's come up here and let's go uh where did i create that thing there it is make trail true then we can create a trail underscore color a trail underscore color is equal to color dot let's make it cyan all right let's see how that looks uh maybe i will make it magenta yeah what do you think what color would be good i think that i'm gonna make it orange because we haven't used orange all right all right so let's see what happens here with an orange trail kill the old one and run it i kind of like that because it matches the vector itself so that looks pretty neat i think i'm gonna like that okay guys time for the homework for next week i've had a lot of fun with this but it's time for you guys to get a homework so what i want you to do is i want you to make a clock face you don't have to put the numbers on it but you have to put the tick marks on it okay so what you're going to have is you're going to have to create a clock face the face is round and then it has little tick marks and i should say an analog clock for you digital guys that don't know how to read an analog clock you're going to have an analog clock and it's got to have tick marks around the edge all right so you're going to have to put tick marks and there's like you go what do you have you have like 12 o'clock you have 5 10 15 20 25 30 35 40 45 50 55 60 is back up so there should be those major tick marks at every five and then there should be minor tick marks in between that so you're gonna go little one two three four five 7 8 9 10 11 12 13 14 15. so you should have a total of 60 tick marks but every fifth one should be larger it should be a major tick mark okay guys you think you can do that you got to make a clock face so right you got to make a clock face you don't have to put hands on it or anything but i want you to start getting oriented in three dimensions and i want you to start seeing how you can use visual python to actually make something that looks like a clock face okay guys i've had a lot of fun with this i hope you have if you've enjoyed it give me a thumbs up if you haven't already subscribe to the channel make sure when you do ring that bell so you'll get notifications of my future lessons coming out and then also share this on your social media get some more people coding because the world needs more coders and fewer people sitting around watching silly cat videos paul mcquarter from toptechboy.com i will talk to you guys later

Channel: Paul McWhorter

Views: 2,375

Keywords:

Id: N8p2AQq2egQ

Length: 38min 10sec (2290 seconds)

Published: Wed Oct 06 2021