1
Set up your sketch
8 min
Computer science
animate-a-thing
Lesson Steps
Set up your sketch In this section, you will get your sketch ready to use. You will create the canvas where your game will appear, then add a background colour. ### Step 1 Start by setting up the canvas in
2
Put the rat on the screen
8 min
Put the rat on the screen In this section, you will load the rat pictures and draw the rat on the canvas. You will start by loading the animation frames, then draw one frame, and finally choose where the rat should stand. ### Step 1 Add this code to preload() to load all six rat images before the sketch starts. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 12 line_highlights: 13-15 --- function preload() { for (let frameNumber = 0; frameNumber < 6; frameNumber += 1) { ratFrames.push(loadImage(rat_${frameNumber}.png)); } } --- /code --- ### Step 2 Now add this line to drawRat(x, y) to draw the first rat image. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 29 line_highlights: 30 --- function drawRat(x, y) { image(ratFrames[0], x, y, ratWidth, ratHeight); } --- /code --- ### Step 3 Finally, go back to draw() and choose a y position for the rat. Then call drawRat() to show it on the screen. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 25 line_highlights: 28-29 --- function draw() { background(180, 220, 255); let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Now run your code Your sketch should show the rat standing near the bottom of the blue canvas. ### Tip {: .c-project-callout .c-project-callout--tip} - Change -20 to a different number to move the rat up or down - Try changing ratWidth and ratHeight at the top of your code to make the rat bigger or smaller ### Debugging {: .c-project-callout .c-project-callout--debug} - Check that your image files are called rat_0.png to rat_5.png - Make sure you used backticks in ` rat_${frameNumber}.png - Check that drawRat(ratX, ratY); is inside draw()`
3
Make the rat move
8 min
Make the rat move In this section, you will use the keyboard to move the rat left and right. You will add the code inside draw() so the sketch can check the arrow keys again and again. Add two if statements inside draw(). One checks whether the left arrow key is pressed, and the other checks for the right arrow key. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 25 line_highlights: 28-33 --- function draw() { background(180, 220, 255); if (keyIsDown(LEFT_ARROW)) { ratX -= moveSpeed; } if (keyIsDown(RIGHT_ARROW)) { ratX += moveSpeed; } let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Now run your code Press the left and right arrow keys. The rat should move across the screen. ### Tip {: .c-project-callout .c-project-callout--tip} - Change moveSpeed at the top of your code to make the rat move faster or slower - Try a very small number like 1, then a bigger number like 10, and compare what happens ### Debugging {: .c-project-callout .c-project-callout--debug} - Make sure the movement code is inside draw(), not inside setup() - Check that you typed LEFT_ARROW and RIGHT_ARROW exactly, with capital letters - If the rat is not moving, make sure you changed ratX and not ratY
4
Make the rat face the right way
8 min
Make the rat face the right way In this section, you will use the facingLeft variable to register which way the rat is moving. You will then make the rat image flip so it looks left when it walks left, and right when it walks right. ### Step 1 First, update the movement code in draw() so the sketch registers the rat's direction. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 23 line_highlights: 27,31 --- function draw() { background(180, 220, 255); if (keyIsDown(LEFT_ARROW)) { ratX -= moveSpeed; facingLeft = true; } if (keyIsDown(RIGHT_ARROW)) { ratX += moveSpeed; facingLeft = false; } let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Step 2 Now replace drawRat() with this new version. It uses translate(x, y) to move the drawing point, so the image must be drawn at 0, 0. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 41 line_highlights: 42-48 --- function drawRat(x, y) { push(); // Only the rat translate(x, y); if (facingLeft) { scale(-1, 1); // flip on the horizontal } image(ratFrames[0], 0, 0, ratWidth, ratHeight); pop(); } --- /code --- ### Now run your code Press the left and right arrow keys. The rat should turn to face the direction it is moving. ### Tip {: .c-project-callout .c-project-callout--tip} - translate(x, y) moves the drawing point before the image is drawn - After using translate(x, y), draw the image at 0, 0 ### Debugging {: .c-project-callout .c-project-callout--debug} - Make sure you changed the image(...) line to use 0, 0, not x, y - Check that push() and pop() are both included - If the rat disappears, check that scale(-1, 1) is inside the if (facingLeft) block
5
Animate the rat
8 min
Animate the rat In this section, you will use the rat animation frames you loaded earlier. You will draw the current frame, update the frame number, and then slow the animation down so the rat does not move too fast. ### Step 1 First, change drawRat() so it draws the current frame number instead of always drawing the first picture. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 41 line_highlights: 47 --- function drawRat(x, y) { push(); // Only the rat translate(x, y); if (facingLeft) { scale(-1, 1); // flip on the horizontal } image(ratFrames[frameIndex], 0, 0, ratWidth, ratHeight); pop(); } --- /code --- ### Step 2 Now add code to advanceWalkCycle() to move to the next frame. If the frame number gets too big, set it back to 0. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 51 line_highlights: 52-55 --- function advanceWalkCycle() { frameIndex += 1; if (frameIndex >= ratFrames.length) { frameIndex = 0; } } --- /code --- ### Step 3 Finally, call advanceWalkCycle() inside draw(). Use animationDelay to slow the animation down. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 25 line_highlights: 37-39 --- function draw() { background(180, 220, 255); if (keyIsDown(LEFT_ARROW)) { ratX -= moveSpeed; facingLeft = true; } if (keyIsDown(RIGHT_ARROW)) { ratX += moveSpeed; facingLeft = false; } if (frameCount % animationDelay === 0) { advanceWalkCycle(); } let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Now run your code Your rat should now cycle through its animation frames. ### Tip {: .c-project-callout .c-project-callout--tip} - Try changing animationDelay at the top of your code. Smaller numbers make the animation faster. - frameCount is a p5.js variable that counts how many times draw() has run. ### Debugging {: .c-project-callout .c-project-callout--debug} - Make sure you changed ratFrames[0] to ratFrames[frameIndex]. - Check that frameIndex = 0; is inside the if block in advanceWalkCycle(). - If the rat disappears, check that you typed ratFrames.length correctly.
6
Only animate the rat when it moves
8 min
Only animate the rat when it moves At the moment, the rat keeps walking all the time. In this section, you will make the rat animate only when the player presses an arrow key. ### Step 1 Start by adding a new variable called isMoving inside draw(). Set it to true when the left or right arrow key is pressed. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 25 line_highlights: 28, 33, 38 --- function draw() { background(180, 220, 255); let isMoving = false; if (keyIsDown(LEFT_ARROW)) { ratX -= moveSpeed; facingLeft = true; isMoving = true; } if (keyIsDown(RIGHT_ARROW)) { ratX += moveSpeed; facingLeft = false; isMoving = true; } if (frameCount % animationDelay === 0) { advanceWalkCycle(); } let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Step 2 Now update the animation code so advanceWalkCycle() only runs when isMoving is true. --- code --- --- language: javascript filename: sketch.js line_numbers: true line_number_start: 25 line_highlights: 41 --- function draw() { background(180, 220, 255); let isMoving = false; if (keyIsDown(LEFT_ARROW)) { ratX -= moveSpeed; facingLeft = true; isMoving = true; } if (keyIsDown(RIGHT_ARROW)) { ratX += moveSpeed; facingLeft = false; isMoving = true; } if (isMoving && frameCount % animationDelay === 0) { advanceWalkCycle(); } let ratY = height - ratHeight / 2 - 20; drawRat(ratX, ratY); } --- /code --- ### Now run your code Press the left and right arrow keys to move the rat. When you stop pressing the keys, the rat should stop walking. ### Tip {: .c-project-callout .c-project-callout--tip} - isMoving starts as false every time draw() runs - It only changes to true when one of the arrow keys is pressed ### Debugging {: .c-project-callout .c-project-callout--debug} - Make sure let isMoving = false; is inside draw() - Check that both movement if statements include isMoving = true; - Make sure you changed the animation if statement to use isMoving &&
Ready to bring this lesson to your classroom?
Sign up to save this lesson, order supplies, and track student progress.