STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson5”. This is where you will keep all of your files for this lesson.

STEP 2:
Open Notepad++ and close any file that you might still have saved.

STEP 3:
Create three new documents with Notepad++ called lesson5.html, style5.css, and rotations.js. All of these documents will be saved to your new “lesson5” folder.

STEP 4:
Copy this HTML code and paste it into your “lesson5.html” file.

STEP 5:
Copy this CSS code and paste it into your “style5.css” file.

STEP 6:
Copy this JavaScript code and paste it into your “rotations.js” file.

STEP 7:
After pasting all three codes into all three files, click the SAVE ALL button at the top of Notepad++.

STEP 8:
Open your HTML file with Chrome and make sure you see the canvas.

STEP 9:
Create a split screen between your Notepad++ and your browser display.

CHALLENGE #1 (Intermediate):
Erasing Objects
This is a very complicated challenge to start the day, so read carefully. What you see in front of you is a caramel colored canvas with three vertical rectangles. However, it only looks like there are two green vertical rectangles. What you may not see is that there is a caramel-colored vertical rectangle in the middle. Your challenge is to bring the two green rectangles together and then shrink the caramel-colored vertical rectangle so that it is just a caramel-colored horizontal rectangle in the middle of the canvas like this.

CHALLENGE #2 (Intermediate):
Finding/Connecting Lines
Now that you have a caramel-colored square in the middle of your two green rectangles, you should notice that there is a hidden line in your JavaScript. It’s hidden on the left side of the canvas and needs to be connected to the top left corner of the middle square. Once you connect that line, your challenge is to create three more lines that connect to the other three corners like this.

CHALLENGE #3 (Intermediate):
Translations & Angle Rotations
Erase the code in your rotations.js and replace it with this code snippet. You will see a tilted rectangle. Take a few moments to experiment with rotating the rectangle a little bit more. But in the end, your bigger challenge is to complete this baseball diamond.

CHALLENGE #4 (Intermediate):
Functions & Recursions
Erase the code in your rotations.js and replace it with this code snippet. You will see two thin rectangles crossing. What you are looking at is a repeating rotation. The teacher will show you what to change so that you can design your own complex-looking rotation, but your real challenge will be to work with your partner to figure out what is causing the shape to repeat.

CHALLENGE #5 (Intermediate):
Building a Tree, Part I
Erase the code in your rotations.js and replace it with this code snippet. You will see the early makings of a tree. What you are looking at is a JavaScript recursion, where a function is repeating itself through another function. The teacher will show you what to change so that you can design your own complex-looking recursion, but your real challenge will be to work with your partner to figure out what is causing the recursion to happen.

CHALLENGE #6 (Intermediate):
Building a Tree, Part II
Erase the code in your rotations.js and replace it with this code snippet. You will see a more complex recursion with a more complex looking tree. But in this code, there is only one function. Your challenge here is not all that challenging. Simply take a look at the code and go line by line, piece by piece seeing what you can change. After a few minutes, we will all stand back together and look at the crazy forest that our classroom has made.

CHALLENGE #7 (Advanced):
Building a Tree, Part III
Erase the code in your rotations.js and replace it with this code snippet. The only difference between this tree and the last one is that the JavaScript has been told to randomize the angle instead of keeping it the same each time. Once again, your challenge here is not all that challenging. Simply take a look at the code and go line by line, piece by piece seeing what you can change. After a few minutes, we will all stand back together and look at another crazy forest that our classroom has made.

CHALLENGE #8 (Advanced):
Building a Tree, Part IV
Erase the code in your rotations.js and replace it with this code snippet. Once again, your challenge here is not all that challenging. Simply take a look at the code and go line by line, piece by piece seeing what you can change. After a few minutes, we will all stand back together and look at another crazy forest that our classroom has made.