Learning Goal #5
Students will be able to draw a variety of lines and two-dimensional shapes with JavaScript and Canvas.
PART 1: THE SET UP
Read More
STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson4”. 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 lesson4.html, style4.css, and moreloops.js. All of these documents will be saved to your new “lesson4” folder. After saving these files, take a moment to look inside your “lesson4” folder and see the icons that make each file look different and unique. If the icons all look the same, then you’ve saved something wrong.
STEP 4:
Copy this HTML code and paste it into your “lesson4.html” file.
STEP 5:
Copy this CSS code and paste it into your “style4.css” file.
STEP 6:
Copy this JavaScript code and paste it into your “moreloops.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.
PART 2: DAILY DESIGN
Read More
CHALLENGE #1 (Intermediate):
Looping Lines
Looping Lines
When you first look at your page with HTML, you should notice two equilateral triangles. Only one triangle was drawn (with points on a line), but there is a “for loop” that makes the other one show up. While you wait for others to get set up, try the challenges below and see how many of them you can complete.
- Challenge 1A is to make 9 equal triangles in a loop.
- Challenge 1B is to create another loop of 9 triangles moving in the opposite direction (from top right to bottom left).
- Challenge 1C is to help your partner (first), followed by someone else on your team who is having trouble.
CHALLENGE #2 (Advanced):
WIREFRAME LOOPS
Using the last code, your challenge is to narrow the gap between each triangle and make it look more like a three dimensional wireframe object you can see through like this.
CHALLENGE #3 (Advanced):
The Canvas Wireframe
Erase the code in your moreloops.js and replace it with this code snippet. The teacher will show you how to add a secondary loop, but it’s up to you to find a way of filling up the screen with multiple criss-crossing rectangle loops like this.
CHALLENGE #4 (Beginner):
Back to the Basics
In your moreloops.js, erase everything from your code except for Lines 1 and 2. In this challenge, you’re going to work directly with the teacher as you learn how to write lines from scratch and then learn how to loop those lines. The way you write it is the same as you did for rectangles, even though the numbers may be a little different. Pay attention, because this is how you will be quizzed in a few weeks.
CHALLENGE #5 (Intermediate):
Introduction to Functions
Erase the code in your moreloops.js and replace it with this code snippet. You’ll notice that there is a function called “drawSquare” and inside of it, the size is the same for width and height. Since you don’t have as many numbers to look at, your first challenge is to finish out the canvas with a complete pattern that looks like this.
CHALLENGE #6 (Beginner):
Filling a Star
Erase the code in your moreloops.js and replace it with this code snippet. You will see half of a filled star. The problem is that one of the lines is going to the wrong point. Your challenge is to find out which line is incorrect and complete the star so that it looks like this.
CHALLENGE #7 (Intermediate): Multiplying Stars
Erase the code in your moreloops.js and replace it with this code snippet. You should now see a star in the middle of your screen. However, if you look at the function, you’ll notice that the lineTo points are filled with variables and decimal numbers. Using what you know up to this point, make an entire canvas of stars. That will mean creating stars of different sizes so that they seem close and far away.
EXTRA CHALLENGE #1 (Intermediate):
Complete the U.S. Flag in Canvas
This is your biggest challenge of the lesson. Remove everything from your lesson4.html, your style4.css, and your moreloops.js, then replace them with these new versions: lesson4.html, style4.css, moreloops.js. Your challenge is to look up a picture of the U.S. Flag and see if you can complete your own flag through your knowledge of Canvas and JavaScript.
EXTRA CHALLENGE #2 (Advanced):
Complete the Betsy Ross Flag in Canvas
For those who finish the flag before class is finished, please try to recreate the Betsy Ross Flag (look it up).