Python 3D Graphics Tutorial 11: Improved Color Orb With Constant Brightness

hello guys this is paul mcquarter from toptechboy.com and we're here today with lesson number 11. in our incredible new tutorial series where you're learning how to do 3d graphics and animations in python i'm going to need you to pour yourself a nice strong cup of black coffee that is straight up black coffee no sugar no sweeteners none needed that is your go juice you need to go get you some i will also need you to call up and fire up your most excellent visual studio code and as you're doing that as always i want to give a shout out to you guys who 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 in the description down below 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 talk about what we are going to do today and what we are going to do is look at my solution to the homework assignment that i gave you in lesson number 10 and that homework assignment was to create a new and improved color orb that had a constant brightness so what i need to do is i need to ask you how many of you were successful if you were able to do this homework on your own put in a comment down below i am legend if not let me know that you folded up like a cheap uh cheap walmart lawn chair okay did you guys follow fold up like a lawn chair or were you able to do it i am going to hazard a guess even though this seems pretty simple and even though i practically solved it for you with the hint that i gave you last week by kind of drawing out on a piece of paper how to do it i am going to bet that most of you were not able to do it or those of you who were able to do it probably did it way way way way too complicated and that was one of the reasons that i gave you this homework assignment is i want you to start seeing how to think like a programmer and think like an engineer and not just go in and try to brute force it because you could try to create a brute force solution to this problem when there is really a very very simple elegant solution and so i'm going to show you that simple elegant solution and let me know did anybody kind of do it the way that i'm going to show you how to do it but let's hop back over to the picture hint that i gave you last week and i will need to get my graganuchian noggin out of your way so that you can see this okay there you go let me uh that was kind of strange all right let me uh get this where you can see it and so what what we said was what we said was that we wanted the r channel the green channel and the blue channel to all add up to two and then i showed you this picture here and let me go ahead and label these this was r here at one and then this was b here at 1 and then this was g here at 1. so you can see what r does is r starts at 0 goes to 1 stays at 1 goes to 0 and then blue starts at 0 goes to one stays at one and then comes back to zero and so there is this periodic waveform that will create what the goal is and that is constantly cycling colors that will have a con that will have a constant brightness of two does that make sense okay now the trick was how to get these waveforms working together where they're all where they should be and and and probably what you did was you probably tried to create three segments a segment where it's going up a segment where it's constant and then a segment where it's going down and that just turns into a mind-boggling difficult problem so what the solution is the solution is is to see that this is really periodic it is a periodic function and what is the easiest way to implement encode this periodic function well that is to create the simple triangular wave that is periodic and then don't worry about this part that's going to go above 1 because we'll fix that later i just want something that is either going up or coming down and what would that be that would be just imagine this comes up it would come up to the natural point of 1.5 and so my waveform i'm not going to stop at 1 i'm going to go up to 1.5 and then i'm gonna come back now i've got a very simple triangular wave it starts at zero it increments up until it gets to 1.5 it changes direction and increments down until it gets to zero boom that one's done now what am i going to do with the blue the same thing i'm going to go up to 1.5 and then i'm going to come down and then what am i going to do with g i am going to go up to 1.5 and i'm going to come down i mislabeled that this is g over here okay rbg does that make sense so now i have three simple waveforms and they're going to go from zero to one and a half to zero now the only trick is i never apply that i always apply this rgb except for if any of those are above one i just apply one so that's just a simple if statement that will clip it and never apply a value that is less than one do you understand the magic that we are fixing to do here okay let's come back to visual studio code and then what we will need to do is we are working in our most excellent v python folder we're going to create a new python file which says improved color orb dot py and that dot py is kind of important and boom a fresh new python program just waiting to be written i'll get this out of your way and then let's start writing what's the first thing that we're going to need we're going to need our friend who our friend mr v python so from the python import star okay now i think we're ready to create our orb and so my orb is going to be equal to a safa ear and then i'm going to give it a radius equal one and i'm going to go ahead and set it up in a color and i'm going to be mindful of the color so it's going to be a vector because what i want to do is i want to set it at a color where when it starts changing it changes from the right starting point so i don't want to just like create a white one and then have it just snap over to red right so i want to create it at a natural starting point and so where is our natural starting point let's start right here okay let's start right here at this point in time and what is true right there well red is equal to 1 right because red is up here at 1. and then also what you can see is g is 1 so g is equal to 1 and then what is b b is down here at zero so b is equal to zero and we'll come back to these later but we wanna start at this point in time and look at that r plus g is two so already we see that we are starting with something that makes sense so what did we say i need to take you back to the code view so we will say vector and we said we want r one g one r1 g1 and b is 0. so always remember it's rgb rgb red green blue red is 1 green is 1 and blue is 0. so that's going to create it now we need to create some variables so remember we're going to have our our chan our red channel our green channel and we're going to have our blue channel right and those are going to be where we keep track of that waveform right these are going to be the three numbers where we keep track of the whole waveform right the one that goes up to one and a half and then comes back down up to one and a half and comes back down now remember we're not going to apply our chan we're going to clip our chain before we apply it but we're just going to keep these things we're going to create these things to keep the whole periodic waveforms working and we're going to come back over here now and so let's look at this though all right let's look at this so r again we're starting right here so r is going to start at 1 g is going to start at one and b is going to start at zero so let's go ahead and put those things in okay so our chance starts at one and then green channel starts at one and blue channel starts at zero all right now we're going to need the increments and what you can see very simply you have really just one increment it's either going up by that amount a positive slope or down by that amount a negative slope now it doesn't matter what we choose but they just all need need to be the same either plus that value or minus that value and so i want to have like a thousand steps on the way up and a thousand steps on the way down and so i'm going to come over here and i'm going to create a red i need to make sure you can see me all right a red increment and a g increment increment in a b increment and those are going to be how much do we change the color by each time through the loop and so i want a thousand steps so i'm going to say like .000 and now i gotta stop though and look back over here because i want to start them at the right spot so remember we are starting at this point okay we are starting at this point well at this point what is the slope of red this the red is increasing so the red is positive there so that will be a positive .001 let's go look at green okay what is green doing green is coming down so what is the green slope going to be the green slope is going to be equal to negative .001 because it's on its way down okay and now blue let's come and look at blue okay here is the blue and what is blue doing blue is on its way up blue is on its way up so blue will be positive point zero zero one do you guys realize just simply putting those starting conditions in those last six lines of code are really what allows this to happen it's really pretty much that simple now we will just the one thing we'll have to do is in our loop we are going to have to clip those things off so that we don't apply a signal of more than one to a color channel but we are ready now to create our while loop while true when it's true true true is always true and so we've got ourselves a fresh new loop that will just continue to loop through so what is the first thing that we want to do i think we want to increment our colors okay so i'm going to say our r chan is going to be equal to r chan plus our increment right and then what blue our g chain always go in order rgb g chan is equal to g chan plus g increment that looks good now what b chand is equal to b chan plus b increment could it really be that simple almost all right almost that simple now before we actually apply these signals we've got to make sure that we only apply them you know that that we that we don't apply them if they're greater than 1. so if they're greater than 1 we'll apply a 1. so i'm going to create three new variables and the first one the three new variables that i'm going to create is the r apply that's what we actually apply to the orb the g apply that's what we actually apply to the orb and the b apply that's what we're going to apply to it we're still going to keep track of archan g chan and b chan that's what runs the whole program but we're actually going to apply three different ones that are based on these so let's look at how simple that is if r chan is less than or equal to 1. so if r is in the right range what do we do well our apply is equal to our chant so what is this thing this is saying this is saying if my r chan if my archan is here or here i just apply archan but if it's here i don't want to apply r chan i want to apply one does that make sense stop and think about it if it doesn't make sense so if r chan is well behaved it's less than or equal to 1 then our applied value is going to be our chant okay but if our chan is greater than 1 then what do i want to do well there are apply our apply is just going to equal 1. now always get 100 coverage of your domain without overlapping so you see this is less than or equal to and this is greater than so you'll either be in this if statement or you'll be in this if statement but you will never be in both if statements and you'll never have a place where it's ambiguous you always get 100 coverage by you could say less than one then this would be greater than or equal to or if you say less than or equal to then this needs to be greater than but that gives you 100 coverage so we now have the r channel done let's let's snag these okay let's snag these and come down here and let's apply them again and then i will paste them one more time so now i did our chan now i want to do g chan so it's the same thing i'll put a g for g chan g apply g chan g chan g apply now i need to do b for blue so this is going to be blue chan blue apply blue chan blue apply so now at this point the r apply g apply and b apply should always all be right so what should i do i should apply them what is my object my object is my orb so i need to type in my orb and then what parameter am i changing i'm changing color so my orb dot color is going to be equal to vector vector and it's going to be rgb but it's going to be r apply because that's the corrected signal g apply and b apply r g b all right now we have to take care of changing the directions well if and we're not going to look at r apply right our main loop our main gear is going to be that archan g chan and b chant if our chan is greater than or equal to now you got to really go back and think right it's r chan and our chan is going to go all the way to where to 1.5 okay it's going to go all the way to 1.5 before we turn around so if r chan is greater than or equal to 1.5 or we also want to change direction if r chan is less than or equal to 0 we want to change directions well how would we do that well our increment is going to be equal to our increment times -1 [Music] so that is the simple code that will change direction of the r channel when it hits the top of that triangle it'll turn around and come back now we want to do the same thing for our other two channels so we will snag that paste okay and this is going to be g channel g channel g channel and g channel okay we'll come down and we will paste that one more time and i got one too many blank lines so this will be b channel b channel b channel b channel i mean yeah b channel b channel b increment b increment g increment g increment our increment r increments so r r g g b b and then i got r r g g b bbb i got ink chan ink chan ink chan chan ink chan ink chan it just kind of want to check it there real quick all right that and that looks pretty good now i want to do one thing because it's really easy to make just a typo or a problem in here so i want to see if this is really doing what it's supposed to do if i coded it upright if i print r chan plus g chan plus b chan this should stay right this should stay at 2 if i've done it right because just looking at that or you know you might not be able to tell for sure whether it's doing the right thing or not but if you print this out you could make sure that your algorithm is doing what you want it to because on paper when we look on paper these things at any given point now i guess i want to look at r applied because our chan keeps going up so it's the r applied that i want to look at so let me fix that real quick it is r apply g apply and b apply those are the ones that should add to two because those are the ones that we're actually applying here and those are the clip values okay guys i wonder how many grievous mistakes i've made in here oop and the other thing is always we need a rate and so i'm going to put a rate of let's say a hundred and guys you know you can have a smaller increment for these three and then run it faster or you can have a smaller increment and run it slower or you can a smaller increment run it faster or a bigger increment and run it slower all right so you can kind of choose what you want to do there but this will just be something to get it started and then we will keep our eyes on that print thing to see if it works and also see if we get any errors here we go one two three go let's hope for the best it is calling up and this is crazy not right i don't think this is crazy not right why did it start it white did you see how it started it white i didn't created it white so i think something is wrong here but let's look here i'm staying at 2 though man i am staying at 2. you see down here this is staying at 2 so it's it's acting kind of good but when the thing popped up it kind of popped up as a white and now it has gone off the reservation and it's going crazy so yeah there is an error in here somewhere so we got to find our error the first thing is it didn't seem like it just did not seem like it started at the right color so r g b color that looks good and then r chan is one g chan is one and b chan is one okay and then r chan is our chan plus our increment g chan is g chan plus g increment b chan is b chan plus b increment if archan is less than or equal to one our apply is our chan that looks good oh look at this uh no that's right if r chan is greater than one r apply is equal to one if g chan is less than one g apply is equal to g chan if g chan is greater than one g applies equal to one those look good b chan b apply b chan c chan oh this is this is where it is right this should be b apply if if b chan is greater than one so i somehow didn't get that one in there then i've got r apply b apply r apply g apply and b apply that looks better so this i might not have found all the mistakes but at least i found one that could cause that problem so let's see what happens this time let's try it again here we go okay popped up yellow that makes me happy and look at that it looks like it's turning orange in pink it looks like it is going good there it is a beautiful magenta and then the magenta is turning into blue which should turn into aqua i really want to see it go from a blue cyan to a beautiful turquoise aqua boom and then as it goes from an aqua we should begin to see the red come back in that should start taking us back towards yellow towards orange boom guys this thing is working and you see i want you to notice a couple of things i want you to see how smoothly these transitions are coming in do you see how smoothly the transitions are coming in and do you see how we're staying at that constant brightness that is really cool and i love that aqua that aqua turquoise color okay now things become a little bit of a matter of taste but i'm going to let this run a little while we need to check and make sure it's doing what we want and yeah it is staying right there at 2 the reason it's not exactly 2 and kind of goes a little bit around it is just that round off error you have when you're using floating point numbers but you can see that it's not jailbreaking and taking off to crazy numbers it's just wandering a little bit around uh 2 which is 100 acceptable so that looks like that is really working the one thing is i feel like i'd like it to go a little faster and so instead of 100 i think i'm gonna have it go about 250. you want to have it go something that is very smooth and pleasing but doesn't get boring and that one was switching a little bit slow for my taste so let's come back over here starts there okay so now that red is coming up and so we're going clearly into purple and then into blue we should see it moving to that aqua turquoise boom look at that i'll tell you guys i love just sitting and watching these color changes just uh all the beautiful and brilliant colors that are in there i just absolutely love watching this and then this one what you can see is it's periodic it will repeat itself and when it comes back remember we started with r on and g on and are on and g on makes yellow and so yellow is the starting point but then with when we started that yellow then the green starts coming down and as the green starts coming down we sort of start going from the red over to the purple and so what you can see is is that there is just a cycle that this thing will go through and if you look at our little chart over here just sort of what you would see is is that it's going to start red and green make yellow and then as green goes down and blue goes up you're going to go from yellow to orange to then purple and purple is when you have the red and the blue on and then as the red goes down you're going to start going into more blue and then over into aqua and so kind of look at that chart and see if it makes sense than what you are observing all right guys i hope that you you know again give me feedback did anybody come up with a simple as a solution this simple or did anybody even get it working let me give me some feedback whether you guys are starting to think and and able to see sort of simple solutions to what sound like pretty complicated uh pretty complicated problems but what we've done now is we've kind of taken you through the color thing and this last one was to just help you start thinking about how to reduce a complicated problem down to a simple problem good way to learn how to think like an engineer and then up next i think what we'll do is we're going to start working on learning how to do directions in the python and so what you can do right now in vpython let's say that this is your let's see you make a box right you make a box in v python and what you know how to do right now is change the size of the box in x y and z and then you also know how to move the box like in x you can move it you can move it in y and you can move it in z right so you can position it and you can size it and you can control the color and you can control the opacity but now the next thing is to control its orientation what if you want to change the angle what if you don't want it aligned with your coordinate axis but you want it pointing like this or pointing like this or pointing like this how do you orient it in space in three dimensions arbitrarily and that my friend is the axis statement and that's what we'll start doing next week is we'll start looking at that access statement and we'll probably do a couple of videos on that orientation so you get comfortable with that and then you know what we're going to do then you know what we're going to do we're probably at that point going to start connecting our arduino to visual python and get the two of those things working together and i think that is going to be really really fun and really really cool so guys i hope you're having as much fun taking these lessons as i'm having making them i love it when you guys watch these things give me comments down below make sure that you like the video if you like it if you've not subscribed to the channel already make sure that you subscribe when you do ring that bell so you'll get notifications of my future lessons and share this with your friends on social media because the world needs more people who can code and fewer people sitting around watching silly cat videos this is paul mcquarter from toptechboy.com i will talk to you guys later

Channel: Paul McWhorter

Views: 1,714

Keywords:

Id: dfhTeqxfj1o

Length: 29min 47sec (1787 seconds)

Published: Wed Sep 22 2021