Student Instructions

Introducing Canvas

Today we are going to be building a drawing app around a new UI element called the canvas.

A canvas is simply a transparent rectangle on which you can draw basic shapes like lines, circles, and rectangles. In fact, at first you might feel like we're going to end this unit in the way we started it, making turtle drawings. Don't worry, we'll quickly move into new and exciting things we can do with this new UI element.

Do This:

Starter code is provided which places buttons on the bottom of your screen. Ignore these for now; we'll be using them later. In Design Mode, drag a canvas element into the empty space at the top of your app, resize it, and give it a descriptive ID. Call setActiveCanvas with the ID you assigned to your canvas, which makes it responsive to canvas commands. Add a giant circle to the canvas. Use the circle command. Make its radius large enough that it goes off the edge of your canvas.

Your code will look something like this:

Student Instructions

Loops on the Canvas

To make things interesting, we're going to quickly add 200 dots to our canvas by using a for loop. Locations on the canvas are relative to the top-left corner of the canvas, not the screen. Therefore you will need to know the dimensions of your canvas in order to randomly place dots throughout it. You can find this information in Design Mode:

Do This:

Add a for loop that runs 200 times. Place the circle command inside the loop and decrease the radius (try 20). Use randomNumber to randomize the x and y values used to place your dots. The ranges you select should be the width and height of your canvas.
COMMON MISTAKE ALERT: If you test your code before setting the x and y values of the circle to random numbers, it will look like there's only one dot. But really you will have just drawn 200 dots all at the same (x, y) position.

Student Instructions

Changing Colors in Canvas

We would like to make our dots transparent so that we can see when they are drawn on top of each other. To set the color and transparency of shapes you draw on your canvas, you need to change both the stroke or outline color and the fill color. The functions setStrokeColor and setFillColor can be used to set those colors.

These functions accept strings of the form "rgba(100, 200, 100, 0.5)" as input. The first three values in the string are RGB values and the last value is the transparency, as represented by a decimal number between 0 and 1.0. All together it looks like this:

Do This:

Before the loop: Add a setStrokeColor command to set the stroke to fully transparent. Add a setFillColor command to set your dots to full black and mostly transparent (try a value of 0.2).

Student Instructions

Click to Add Dots

Loops are one way of quickly adding dots to our canvas, but now we're going to change our app so that the user can decide when and how many dots to add. The canvas is a UI element, so you can attach event handlers to it just like you would any other element. We're going to move the circle command inside of a click event handler so that the user can click to add individual dots.

Do This:

• Add an onEvent handler; set its ID to your canvas ID.
• Move the circle command out of your for loop and into your new event handler.
• Remove the for loop from your program.
• Run your program and confirm that a single dot is added everytime a user clicks your canvas.

Student Instructions

The Event Parameter for Mouse Events

We'd like to change the app so that when the user clicks on the canvas we draw a circle right where they clicked. To do that, we need to learn more about the parameter passed by our event handler function, which by default is called event.

Recall that when we wanted to know what key the user pressed on a keyPress event, we checked the value stored in event.key. The event parameter actually stores a great deal more information about each event.

When using the mouse, the event parameter carries information like the location of the mouse, how fast it's moving, and some other things as well.

Let's get acquainted with the event parameter and what we can find out about the mouse.

Do This:

• Add a console.log command inside the function of your event handler. Use it to display the event parameter.
• Run your program and click your canvas. The full contents of the event parameter should be displayed in the console.
• Which values do you think hold the x and y coordinates? What else is there?
• We won't use all of these, but it's interesting to see just how much is available.
• Once you have experimented a little, move to the next level.

Student Instructions

Drawing Dots at Click

Currently the user can click to add dots, but they're drawn at random locations around the canvas. We're going to use information stored in the event parameter of the event handler function to place dots wherever the user clicks the mouse on the canvas.

The event parameter has two critical pieces of information we'll want, which are event.offsetX and event.offsetY. These hold the location (relative to the top left corner of the canvas) that was clicked.

Do This:

• Remove (or comment out) the console.log statement.
• Replace the x and y parameters of the circle command with event.offsetX and event.offsetY.
• Run your program to confirm that dots are being drawn anywhere the user clicks the mouse.

Student Instructions

Drawing on mousemove

Currently the user can click to add dots, but we want to place dots wherever the user moves the mouse on the canvas.

To place dots whenever the mouse is moved, we'll be changing the event type from click to mousemove.

Do This:

Change the event type in your event handler from click to mousemove. Run your program to confirm that dots are being drawn anywhere the user moves the mouse.

Your user is now able to draw anywhere they want on the screen!

Student Instructions

Draw When a Key is Pressed

This app now lets the user draw, but they have no control of whether the pen is up or down. Let's give the user the ability to choose when to put down the pen. We won't even need to add a new event handler to our app!

You may have noticed that the event parameter includes information about whether certain keys were pressed when the event fired. They are stored in variables with names like shiftKey or altKey and are stored as boolean values (true / false). We are going to use the shiftKey variable to decide when we should draw circles.

Do This:

• Add an if statement inside your event handler function where the condition is based on the value stored in event.shiftKey: If shiftKey is true, then draw the circle.

• You might want to decrease the radius of your circle (for example to 5).

• Run the program and confirm that dots are only drawn when the shift key is pressed.

  • The effect should be that the user can pick up and put down the pen to draw.
  • Hold the shift key down and move the mouse to draw.
  • Release the shift key to stop drawing.

(NOTE: If you wish, use console.log to display the values in event again. You'll see event.shiftKey is one of the values stored.)

Student Instructions

Store Your Dots

Now we're going to get into the core of the activity. We will be creating a record of every dot your user draws.

To do this, we will append every event parameter to an array as events are generated. When we store every mouse location in an array, we can make many interesting effects and redraw the image in different ways, by looping over the array. First let's just make sure we can capture them all.

Do This:

• Create a new array outside the event handler function: var eventList = [].

• In your event handler, before you call the circle command, use appendItem to add the event parameter to eventList.

• Run the program and draw some dots.

• In the Debug Console type console.log(eventList) and inspect the contents. You should have a record of every event parameter used to draw a dot! (It might be a lot.)

Student Instructions

Delete Button

We are finally going to use those buttons! Each one will trigger an event handler that processes the array eventList to create a visual effect with the mouse data you have stored. The first effect we are going to create is delete.

You may want to provide your user with a way to start over with their drawing. In order to do this, you will need to both clear the canvas and delete all items from eventList. The easiest way to delete everything from the list is to simply set the value of eventList to be a new empty list.

Do This:

• In Design Mode, set the styling and text of one button to indicate it's the "delete" or "start over" button. Give your button a descriptive ID.

• Add a click event handler to your button.

• Within the event handler call clearCanvas.

• Set eventList to the empty array (i.e., eventList = []).

Test your program to make sure that starting over works the way it should.

Student Instructions

Redraw Random - Part 1

The next effect we are going to create is "random." We will be redrawing the image but with randomly sized dots.

We'll be doing this in two steps. For now, all you need to do is change the first button in the row to have the proper styling and attach a click event handler to it. In addition, clear the canvas from inside the event handler so we are ready to redraw our new image. We don't want to delete all the items from the array though, as we will use them to redraw. Once you've done that, move on to the next exercise where we'll write the actual code in our event handler.

Do This:

• In Design Mode, pick a button to use for Random. Set the styling and text of the button. The image below shows one possible option, but you can style it however you like.

• Give your button a descriptive ID.

• Add a click event handler to your button.

• Call clearCanvas from inside the event handler so the canvas is ready for the redraw.

Student Instructions

Redraw Random - Part 2

Now we're ready to write the code for our "Random" effect. To do this, we will be clearing the canvas and then processing the array eventList to redraw all the dots with a random radius.

You already set up the clear canvas, so next we'll need to process our array in order to find out the event information for each dot. You'll need to create a for loop that iterates through every index in eventList (recall the length command). Within your loop, you will be drawing dots referencing items stored in the array.

As you write this code, remember that you can treat an individual element of an array exactly like the kind of data it stores. Inside a for loop, the event at index i can be accessed with the notation eventList[i] and the offsetX of that event can be accessed with eventList[i].offsetX. Again, you are essentially treating the array element as if it were the data it contains.

Do This:

(NOTE: Everything listed below is shown in code animation above.)

Inside the "Random" button event handler... Add a for loop that runs i from 0 up to eventList.length to process over the array. Add a circle command inside your loop. Set the x and y parameters of the circle to eventList[i].offsetX and eventList[i].offsetY, respectively. Set the radius parameter to some randomNumber. Pick any range you like. You can always change it later. * Test your program by drawing a figure and then hitting your "Randomize" button. It should be the same drawing, but now with randomly sized dots!

Student Instructions

Redraw Original

If you were able to get that working and understand what you did, congratulations! That was some serious programming! If not, take a moment to go back and talk through the different components with a classmate. Most of the work we'll be doing for the rest of this lesson uses similar patterns, and you'll want to be comfortable with them as we add more complexity to our app.

The first thing we are going to do is create an "Original" button that will redraw the image with the same circle radius you used before. The process will be nearly identical to how you added the "Random" button.

In fact, the code to redraw the original is exactly the same, except instead of making the radius of the circle be random, it will just be the fixed value you used originally (probably radius 5 or so).

Do This:

(NOTE: The instructions below are shown in the code animation above.)

• Style a button, give it label like "Original," give it a meaningful ID, and add a "click" event handler.
• Inside the event handler for your "Original" button...
  • Copy the code from the "Random" button event handler.
  • Paste it inside the event handler for the "Original" button.
  • Set the radius parameter to whatever value you used when you originally drew dots.
• Test your program by drawing a figure and then hitting your "Randomize" button. Then hit the "Original" button. Your original drawing should appear.

Student Instructions

Adjusting Circle Size

Among the other pieces of information contained in each event parameter are the values movementX and movementY. These numbers tell us how far (in pixels) the mouse moved since the last mouse event was triggered, and can be used to measure the speed of the mouse. If the movement is large, the mouse is moving fast; if the movement is small, the mouse is moving slowly.

Let's use the mouse movement speed to make a cool effect. When we draw with a real pen or brush, the line usually gets thin when making quick strokes and is wider and darker when making slower ones. We can generate this effect by using movementX and movementY to calculate the radius for the circle. Since this calculation might be a little tricky, a smart thing to do would be to write a function that takes movementX and movementY as parameters and returns a value that should be used as the radius.

There are several ways to do this. One possible way to write the function is provided on the right, which uses some arithmetic tricks. The function to the right is actually only three lines of code but is heavily commented to explain what it's doing. It makes use of a function called Math.abs which returns the absolute value of a number. Feel free to use this or another method of converting movementX and movementY into a radius.

Do This:

• Write a function like the one above that accepts two parameters (one each for movementX and movementY) and returns a radius. A higher speed should lead to a smaller radius.
• Inside your mousemove event handler, set the radius of the circle to the value returned by your function, where the function takes event.movementX and event.movementY as input. For example, if using the function above, your code would be:
  
• Run your program and confirm that when you draw, the speed of the mouse affects the radius of the dots. The effect should look something like what's below

Student Instructions

Fix the "Original" Button

Our "Original" button is now slightly broken because the effect it renders doesn't match our new free-form drawing which takes the movement of the mouse into account - it just draws fixed-size cricles.

Let's fix the "Original" button.

Do This:

In the event handler function for the "Original" button:

• Change the value used for the radius from a fixed value to the same thing calculated for the free-form drawing. Since you wrote a function to do this calculation, it should be easy to call it from this code as well!
• The slight difference will be that you will be looping over the array of events. So the line of code that draws the circle might look like the one below. This line of code is certainly a mouthful, but it's basically the same as the line of code in your mousemove event handler; it just references the event in the list instead.
  
• Test your program to confirm that clicking the "Original" button creates the same effect that occurs when doing free-form drawing.

Student Instructions

Making Spray Paint

The next effect we would like to create is a "spray paint" effect. Instead of drawing a single dot for every location stored in eventList, we'll draw many small dots randomly placed around each location.

We are going to start off just practicing drawing a circle whose x and y locations use offsetX and offsetY with a small random value added. This makes the line of code to draw the circle kind of long, but hopefully it's easy to understand if you read it carefully.

Do This:

• Set the style of another button in Design Mode, give a label like "Spray Paint," give it a descriptive ID, and attach a click event handler to it.
• Copy the code from the "Original" button into the event handler for spray paint.
• Change the code for circle so that it will draw a dot whose x and y locations use offsetX and offsetY with a small random value added.

• Run your app to make sure it is drawing small dots close to the original position. Look at the example below.

Student Instructions

Making Spray Paint with Nested Loops

In order to make "Spray Paint" look more real you will need to draw multiple dots randomly placed around the original x and y locations. In order to do this, you will place one for loop inside of another, also known as a nested loop. You already have the main loop which visits every index in eventList. The inner loop should draw 5 circles whose x and y locations use offsetX and offsetY with a small random value added.

Nested Loops

When nesting loops, it is important that you use different variables to count your iterations. Look at the example at right. These nested loops effectively say: "for every possible value in eventList.length, run a loop 5 times".

Since i is used as the counter variable in the outer loop, we need to use a different counter variable for the inner for loop, or things will go haywire. Why? If both loops used i as a counter variable, the inner loop would keep changing i and the outer loop wouldn't count properly. The example uses j as the inner loop variable, but you could use anything that's not i.

Do This:

(Note: Steps shown in animation above.)

• Add a for loop inside the existing for loop in the spray paint event handler.
• Change the counter variable to something other than i for the inner for loop.
• Change the boolean condition so the inner loop will run 5 times.
• Move the circle code inside both for loops.
• Run your app and confirm that your new button creates a spray paint effect, as shown below.

Student Instructions

Relative Indexes

When looping over an array, we use a counter variable (typically i) to keep track of which index we're at. We can then access the contents at each index with the syntax list[i].

If we want, however, we could access the contents of the next element as well, since its index is just one greater. For example, if we are currently focused on the element at index i, then list[i+1] gives us access to the next element in the array. In other words, you can reference indexes relative to your counter variable.

We are going to use relative indexing to create our final effect, which will look sort of like an etching of the image. The idea is simple: for every (x, y) location in the event list, draw a straight line between that location and the location stored 10 spots further down the array. You will use the line command to draw a line connecting these points.

Do This:

• Read the documentation for line.
• Set the style of the final button in Design Mode, give a label like "Etch," give it a descriptive ID, and attach a click event handler to it.
• Call clearCanvas to clear the screen.
• Create a for loop that counts from 0 to eventList.length - 10.
  • Why do you think we're not counting over the entire array?
• Use line to draw a line between the (x, y) locations of eventList[i] and eventList[i+10]. The full line of code will be another big one:
• Use setStrokeColor and/or setStrokeWidth inside the event handler to make the lines visible; otherwise, they will be transparent, since we set the stroke color to transparent at the beginning of the program.
• Run your app and confirm that your new button creates a sketch effect, as shown below.