Learning Goal #7
3JS Variable Manipulation
Students will be able to apply their basic knowledge of JavaScript to manipulate three-dimensional objects.
VARIABLE MANIPULATION RULES
Read MoreOver the next few lessons, you’ll be getting two or three zip folders per lesson. Your job is to dig into the correct files and manipulate some of the variables to make your designs unique. But you’ll also need to consider the following rules.
RULE 1: TEAMS ONLY
Every time you change a variable and see something really cool, you’ll be tempted to twist your screen and show someone else in the room. Don’t. Save your work for the tour at the end of each Variable Manipulation. You may share what you’ve done with your shoulder partner or even help them to have a little success, but do not get up from your seat or roll around to another area. The farthest you can go to show someone is your own team.
RULE 2: JS NOTES
You are not allowed to just change variables inside of these codes without leaving notes about what you changed. Take time to insert those // slashes on the lines above your changes and explain, as best as you can, what that variable manipulation actually did.
RULE 3: VOLUME RESPECT
Since this is just about you and your partner, please avoid loud gasps or shouts when you see something cool on the screen. It distracts other teams and makes it hard for everyone in the room to focus.
Variable Manipulation #1
Read MoreSTEP 1: DOWNLOAD THE ZIP – Click here to download the Zip File for Variable Manipulation #1
STEP 2: FIND THE DOWNLOAD – If you clicked on the download above and it automatically downloaded, that means your Zip folder is sitting in your Downloads folder. Simply go get it and move it to your LG7_threejs folder. But if you clicked on the download above and it asked you where to save the file, please make sure you put it in your LG7_threejs folder.
STEP 3: EXTRACT ALL – You cannot work with, change, or even open files very well if you’re looking inside the zipped version. To get the regular folder opened, you need to RIGHT-CLICK on the zip file and choose EXTRACT ALL. And that will be the folder you can go into and change things.
STEP 4: OPEN HTML – Your zip folder has many files, but the only one you can open with a browser is the HTML file. So go ahead and open var1a.html with Chrome or Firefox to see what it looks like.
STEP 5: MANIPULATION – There are 5 JS files and 1 HTML file. But only two of those files are worth manipulating. In the HTML file, you can change any of the SCRIPT variables. But the other one you can work with is Bird.js. All of the others are part of the 3JS library you learned about in Level 3.1. Remember that variable manipulation can be more than just numbers. It can also be positive/negative, true/false, multiply/divide, add/subtract, etc.
STEP 6: WRITING COMMENTS – Be careful not to change a bunch of things at once or you’ll never know what happened. Try changing one thing at a time, refreshing your browser to see if anything changed, then writing a note about it in the SCRIPT with the // slashes. You’ll need to get in this habit because your learning goal project will require it.
STEP 7: ONLINE TIMER – At this point, your teacher will have already started the 20 minute clock. Be sure to use your time wisely and manipulate as many variables as you can in the time you have.
STEP 8: MANIPULATION TOUR – When the timer goes off at 20 minutes, you will be given 2 minutes to tour the classroom and see what others did with their codes.
Variable Manipulation #2
Read MoreSTEP 1: DOWNLOAD THE ZIP – Click here to download the Zip File for Variable Manipulation #2
STEP 2: FIND THE DOWNLOAD – If you clicked on the download above and it automatically downloaded, that means your Zip folder is sitting in your Downloads folder. Simply go get it and move it to your LG7_threejs folder. But if you clicked on the download above and it asked you where to save the file, please make sure you put it in your LG7_threejs folder.
STEP 3: EXTRACT ALL – You cannot work with, change, or even open files very well if you’re looking inside the zipped version. To get the regular folder opened, you need to RIGHT-CLICK on the zip file and choose EXTRACT ALL. And that will be the folder you can go into and change things.
STEP 4: OPEN HTML – Your zip folder has many files, but the only one you can open with a browser is the HTML file. So go ahead and open var1b.html with Chrome or Firefox to see what it looks like.
STEP 5: MANIPULATION – There are 4 JS files and 1 HTML file. But only two of those files are worth manipulating. In the HTML file, you can change any of the SCRIPT variables. But the other one you can work with is OrbitControls.js. All of the others are part of the 3JS library you learned about in Level 3.1. Remember that variable manipulation can be more than just numbers. It can also be about changing things like positive to negative, true to false, multiply to divide, and much more.
STEP 6: WRITING COMMENTS – Be careful not to change a bunch of things at once or you’ll never know what happened. Try changing one thing at a time, refreshing your browser to see if anything changed, then writing a note about it in the SCRIPT with the // slashes. You’ll need to get in this habit because your learning goal project will require it.
STEP 7: ONLINE TIMER – At this point, your teacher will have already started the 20 minute clock. Be sure to use your time wisely and manipulate as many variables as you can in the time you have.
STEP 8: MANIPULATION TOUR – When the timer goes off at 20 minutes, you will be given 2 minutes to tour the classroom and see what others did with their codes.
Variable Manipulation #3
Read MoreThis is a graded Variable Manipulation
A = 25+ Clearly Written JavaScript Comments Per Team
B = 21-24 Clearly Written JavaScript Comments Per Team
C = 16-20 Clearly Written JavaScript Comments Per Team
D = 11-15 Clearly Written JavaScript Comments Per Team
F = Less Than 10 JavaScript Comments Per Team
STEP 1: DOWNLOAD THE ZIP – Click here to download the Zip File for Variable Manipulation #3
STEP 2: FIND THE DOWNLOAD – If you clicked on the download above and it automatically downloaded, that means your Zip folder is sitting in your Downloads folder. Simply go get it and move it to your LG7_threejs folder. But if you clicked on the download above and it asked you where to save the file, please make sure you put it in your LG7_threejs folder.
STEP 3: EXTRACT ALL – You cannot work with, change, or even open files very well if you’re looking inside the zipped version. To get the regular folder opened, you need to RIGHT-CLICK on the zip file and choose EXTRACT ALL. And that will be the folder you can go into and change things.
STEP 4: OPEN HTML – Your zip folder has many files, but the only one you can open with a browser is the HTML file. So go ahead and open var1c.html with FIREFOX ONLY to see what it looks like.
STEP 5: MANIPULATION – There are 8 JS files and 1 HTML file. But this one is a little bit tricky. You can always change the SCRIPT variables inside your HTML file, but if you go to the horse.js file, you’ll see that it has a lot of numbers packed together that make the lines and angles of the horse. The same is true of flamingo.js, parrot.js, and stork.js. All of the other JS files are part of the 3JS library you learned about in Level 3.1. If you choose to manipulate some of the numbers inside of the JS animal scripts, you’ll need to be careful about how many you change, so that you can try to keep up with your own changes.
STEP 6: WRITING COMMENTS – Be careful not to change a bunch of things at once or you’ll never know what happened. Try changing one thing at a time, refreshing your browser to see if anything changed, then writing a note about it in the SCRIPT with the // slashes. You’ll need to get in this habit because your learning goal project will require it.
STEP 7: ONLINE TIMER – At this point, your teacher will have already started the 25 minute clock. Be sure to use your time wisely and manipulate as many variables as you can in the time you have.
STEP 8: MANIPULATION TOUR – When the timer goes off at 25 minutes, you will be given 2 minutes to tour the classroom and see what others did with their codes.