 Okay, this is the second video in a series on the very basics of Babylon JS creating 3d environments and games inside your web browser using JavaScript in HTML 5 Here is the basic scene that we created last week in the first tutorial Hopefully you've watched it because it went over a lot of the basics We got a basic camera the arcs around the center point of our scene. We got a few basic meshes here a plane That's only one side. That's why it's invisible from this side and one light element off here to light Which is a basic point light So let's go ahead and start where we left off last week And I'm going to I renamed the file to two Excuse me and So let's start off by working with the scaling and rotation last week we looked at positioning of the objects Let's look this week at Scaling them and rotating them So our first object was our spear our ball object so let's go ahead and come in here right after we created it and I'm going to do here is I'm going to take it and I'm going to scale it I'm going to stretch out its y-axis which in Babylon JS y is up and down So I'm going to say ball because that's the object we're working with I'm going to say scaling dot why I'm going to say it equals to so that will double the length of it up and down Let's go ahead and save that and we will refresh here watch the sphere here You can see it looks stretched out now because we stretched it on its y-axis and Let's keep moving. I will take our box object and we can rotate it if we want and And so I'll say box dot rotation and I will say let's rotate it on the x-axis and Now we can give it a number we can say, you know 10 20 Whatever, but let's move it from where it's at a certain amounts rather than said to a set position So I'll say plus equals so it's whatever it already equals at the x its x rotation and we'll add One to it Let's see how that looks so watch the sphere over here to the right and you can see now It's been rotated one unit. Let's go back here and let's move it Zero point one Save that and you'll see that it's rotated It's almost non-visible. It is just rotated a little bit, but let's take that and Instead of putting it up here where we're creating stuff Let's put it down here in our render loop again. This is where the function that has it Continuously every time it renders it will run this function and let's go ahead and paste that in there So what it's going to do now is every time the scene renders It's going to take the box look at its position and move it point zero units more on the x-axes So save that come back here get f5 and you can see it rotating Do you want to take into account? This may not always be the best way to do it in all situations because depending on the speed of your computer Depends on how fast and how often it renders and will affect how fast the box rotates So you might want to use some other timing mechanism, but for a very basic rotation. There you have it And if we want we can get going on other axes as well So let's go back into our code here I'm just going to copy and paste that line and change the next line to the y-axes So now it will rotate point zero one more units on the y-axes So we'll save that I'll hit f5 and there you go You can see you saw it running a little slow while the scene was still loading But we have it rotating in two directions now Let's do the same for our cylinder over here to the left we'll come in here and We will put it down again in our render loop here So if you want to just move to a certain position you can put someplace else But since we're gonna be looping this we'll put it down here We'll say cylinder which is our object that we created up here. We'll say dot rotation dot x and We'll say its current position Plus or we can go minus if we want to go the other direction 0.1 We'll hit f5 and there you go. It's rotating now From this angle it's rotating clock wise if we did a positive number It would be rotating counterclockwise then again. That's all based on what side you're looking at it from So that's basic rotation and scaling and We looked at a little bit of rotation lash last with this plane because we did rotate the plane by pie Which was to rotate it 180 degrees and we rotated on its y-axis and I could stop the trail there, but I felt like that wasn't enough for a full tutorial. It was really short So let's play around with our lighting a little bit. We have one light element up here We called it light zero. It is a point light and we gave it a position of 10 which moved it Forward in our scene. Let's go ahead and work and play around with its coloring So what we're gonna do here is let's go ahead and look at our scene here Now you notice we have it. It's by default a white light. Our planes don't really have any colors kind of a default grayish whitish color If you've worked with coloring in 3d or really coloring with any type of 3d like object you might be familiar with the fusion and Specularity basically your diffusion is basically the diffused light out here and the specularity is this shininess right here that's a little point you can see it on the Sphere there you can see it on the plane here the Cuban and there you can see some specularity on the Cylinder there as it rotates and we can set different colors for each of those So let's go ahead and do that So we're gonna go up. We'll do it right below where we created light just to keep things close So we're gonna say take the light zero object, which we create there. We called it light zero and Let's go ahead and affect its diffuse We're gonna set to a value. We're gonna say a new value and we're gonna use our Babylon Javascript to create this and we're gonna create a new Avalon color three, which is going to be an RGB, which is red green and blue so I can say zero comma one comma zero and The values go from zero to one one being the strongest Might be a little confusing because in many cases it goes from zero to one fifty five So anything in between completely Removing the color and having the color full will be a decimal point So we have zero red a hundred percent green and zero percent blue so basically right now we're gonna have a poor pure green light hit f5 and there you go You can see that we have green and we haven't changed the color of the objects We changed the color of the light shining on them. Our specularity is still white So let's go ahead and give our specularity a different color to save time I'm just gonna copy and paste this line. We just created for that and I'm going to change this To stay instead of diffuse. We're gonna say specular and It's still set to a value of green. Let's go ahead save that refresh this and you can still see the specularity And it's green, but let's go back here and change it instead of having it be green Let's have it be Red so we'll give it a hundred percent red here by giving it the value of one and Red and green you may not realize this because you've been told different things In elementary school, but red and green do make yellow that might seem weird because you think well yellow and blue make green and Basically, well, I'm not gonna get into the whole bunch of color things It's also people think that a hundred percent of color is black. You think you add more color in that's not true That's pigments. You have to think about Additive colors and subtractive colors and it can get a little confusing But I do want to point out here if we set all our values Oops, that should have been a zero not a oh We do that and we refresh We got black because we removed all color from our light meaning there is no light There is no color, which is black if I set All three values here. I'll refresh that and we get white a pure white light if we were to go 101 that would be zero amount of green and we would get Red and blue which will give us a purplish color purplish pink. There you go so Don't get confused that because red and green make yellow And our specularity here is set to zero, so let's go ahead and and play with this a little bit more I'm gonna set this back to zero here And I'm just gonna play around with this just a little bit. I'm gonna put a variable in here I'll call it LD. Let's create that variable. We'll create it right up here. I'll say var LD equals and I'll say zero and then I create another variable. I'll call it Var LX just to give it a name. I did LD for light diffused LX is just L light in a variable will say 0.01. I think should be a good number and and So right now we're saying set the diffuse to zero zero zero so everything is gonna be Black in our scene because the light is basically turned off. It has no color to it But let's go ahead and play around with this. Let's go down to our Rendering loop here and What we're gonna do here is we're gonna create a little bit of a an effect we're gonna have the light Power go from off to bright red and then back off and just kind of a pulsating light So we're gonna take the variable LD that we created. They're gonna say plus equal So whatever it already equals we're going to add to its LX which we created and we set to zero point zero one and We're gonna say okay Every time the loop the render renders again in loops. We're gonna say well change the diffuse And we're gonna say again a new Babylon dot color again case sensitive here capital C3 and we're gonna keep the Green and the blue at zero, but we'll set our Red to change as that change so right now. We'll start at black and as it loops it'll turn red and The number keeps going up, but it's not gonna go back down at this point So let's go ahead and change this and and if then statement. So what we're going to do here is we're going to say if LD is greater than one Let's change the value of LX to equal negative point zero point point one and We'll say Else if LD is less than zero Then we're going to change the LX to equal zero point Zero one or Yeah, this should be a zero one. Okay? So let's look over what we just wrote here We already set of values for these two variables at the beginning LD is zero LX is zero point zero one So here's gonna look is it less than one? Well, right away. It's not it's set to zero is it less than zero It's not it is zero. So it's going to start looping and it's going to add Zero point zero one every time it loops at any point if it gets over one We're going to flip that around to be a negative. So now it's actually going to be subtracting that value and In this case once it gets below zero, it's gonna go back to adding the numbers. So we should get a pulsating light here Pulsating red light There you go. And just for fun. Let's let's see. Well look at the other side of our objects here You know, so everything is black you can see the red on the angles because the lights over there But on this side everything is dark. Let's add a second point light and just make it a basic green one so What I'm going to do here is I'm going to copy two lines And I'm going to paste them right here And what I'm going to do is I'm going to say Let's create a new light call it light one label that omni one and Instead of moving it forward. We'll move it back. So it's on the other side of our objects And here we're going to say light one dot diffused and we're just going to set it Let's just make it a simple green light at five There we go. We got our red light starts off pulsates on and off And if we look at the other side of our objects besides our plane Which is only visible from one side. You can see we got green on this side And you do see that the colors do blend on our objects So Hopefully that wasn't too long. I didn't want it to be too short. We looked at scaling and rotating Positioning objects throwing that stuff into loops and then we worked a little bit with adding extra lights Colorizing them and changing those colors on a periodic basis. I hope you found story useful And again, and I mean you got all your basic shapes here. You got your basic lights Be sure to come back next week And there'll be another tutorial if the tour tutorials out there should be They'll eventually be a playlist with all these so I thank you for watching films by Chris comm is my website That's Chris the K check out. There should be a link in the description You can get all the code for all these examples there through there on my github page. Just click on codes go to github I explained all that in the first tutorial. I thank you for watching and I hope that you have a great day. I Would like to take a moment to thank the following patreon supporters for helping make this video possible