The goal of this lab is to experiment with 2D drawing.
Fork the starter code
Create your own fork of the starter code and open it for editing. This file contains some boiler-plate HTML code plus some Javascript with two methods that you'll modify. If you run the file in its current form, you should see a single pixel colored (very small!) and below it a short blue line. Study the code and make sure it makes sense why those pixels were colored.
Loop over all the pixels
In the function draw, modify the for loop that goes over all the x values from 0 to canvas.width. Then add a similar loop nested inside that goes over all the y values from 0 to canvas.height. The result will have a structure like this (I'm leaving out some details where you see the ...):
for (x...) {
for (y...) {
graphics.colorPixel(...
}
}
Change the values in the call to colorPixel to the variable names you used in the for loops. At the end of this step, if everything has gone well you should see a completely blue rectangle. (If the page is blank, look in the error console pane to see if there is any error message. The most common problem is a mismatched curly bracket or parenthesis.)
Modify pixColor
Lastly, modify pixColor so that it takes the x and y values of the pixel into account. To start, color the pixel one color if x is even, and another if x is odd (what should this create?) Here is an example of an if statement in JavaScript:
if (x == 10) {
// do something here
}
Helpful syntax:
% // mod operator (i.e. 10 % 2, which equals 0) && // and (which in Python is actually written "and") || // or (also just "or" in Python)
Checkerboard
If you finished the previous three steps, that's great! If you have extra time, modify your if statement to create a checkerboard pattern. How can you change the size of the squares seen without modifying the fillRect arguments? Experiment with different colors and patterns. Here is an example below:
For a greater challenge, can you create a plaid or argyle checkerboard? (Keep the square arrangement rather than diamonds, but try for a color pattern like an argyle. The dotted lines are even more of a challenge, if you want to attempt them!)
You do not have to turn this lab in, but you are welcome to email me your image (take a screenshot and save as a .png file). I will demo some interesting checkerboards on Monday. Also make sure your partner and others around you are making progress. For labs, feel free to compare code and share ideas.
Javascript/Python Comparison
If you have time, and want to explore the differences between Javascript and Python, you can check out a simple comparison page I put together. If you want more depth you can read a Javascript tutorial but this really goes into much more detail that we will need for this course.