CISC 1600, Lab 3.3: Animation and Arrays in p5.js

1.  Getting set up

Go to https://editor.p5js.org/ and log in. Create a new collection named “Lab 3.3.”

2.  Vector animation

Vector graphics are created using a set of drawing instructions. This allows them to look crisp and smooth after transformations like growing, rotating, and stretching. They are mainly only practical for drawings, however, as photos are not readily transformed into vector representations. In this example, we will animate a helicopter.

1.  Create a new sketch. Change the name to “Lab 3.3, Step 2.1”. Replace the default code with the following:

// Lab 3.3, Step 2.1: Create a new sketch function setup() {

createCanvas(500, 500);

//set the number of frames per second; default is 60 frameRate(20);

fill(128, 128, 255);

}

function draw() { background(255); drawHelicopter(mouseX, mouseY);

}

function drawHelicopter(x, y) {

// Draw body of helicopter as quadrangle strokeWeight(2); // The thickness of the lines quad(x – 40, y – 40,

x + 100, y,

x + 100, y – 20,

x – 100, y + 20);

// Draw the main rotor as 2 lines strokeWeight(4);

line(x – 120, y – 20, x – 40, y – 40);

line(x – 40, y – 40, x + 40, y – 60);

// Draw the tail rotor as 2 lines strokeWeight(2.5);

line(x + 120, y – 20, x + 100, y – 20);

line(x + 100, y – 20, x + 80, y – 20);

}

○   Run the sketch. Move the mouse around the canvas.

○   Save the sketch and add it to the collection.

2.  Animate the rotors

○   Duplicate the previous sketch, name the new sketch “Lab 3.3, Step

2.2,” and update the comment at the top of the sketch.

○   Notice that each rotor is drawn using two separate lines.

Temporarily comment out one of the calls to line() to see which part each one corresponds to.

○    Create a global variable named right that keeps track of whether we should draw on the right or not. Assign the value true to this variable.

○    Add an if statement before drawing each rotor, so that the right line() is drawn only if the variable right is true and the left line() is drawn only if right is false.

○   After drawing the lines (for the main rotor and the tail rotor) on the

right, we want p5.js to “remember” that the next line should be drawn on the left. And after drawing a line on the left, we want p5.js to “remember” that the next line should be drawn on the right. So add some code to flip right from from true to false or from false to true.

○   Fly the helicopter around.

○   Save the sketch and add it to the collection.

3.  Control the helicopter with the arrow keys

○    Duplicate the previous sketch, name the new sketch appropriately, and update the comment at the top of the sketch.

○    Give the helicopter a position in the x direction and a separate position in the y direction. To do this, create a global variable for each one. In the setup() function, assign to these variables the coordinates of the middle of the canvas.

○    Draw the helicopter at the position specified by your new position variables instead of the mouse position.

○   Make a keyPressed() listener function (see lab 3.2 and lecture

3.3 for details) that translates arrow key presses into changes in the

appropriate position of the helicopter.

○   Fly the helicopter around.

○   Save the sketch and add it to the collection.

4.  Change the scale of the helicopter:

○    Duplicate the previous sketch, name the new sketch appropriately, and update the comment at the top of the sketch.

○   Create a global variable named scale that is initially set to 1.

○   In the calls to quad(), line(), and strokeWeight(), wherever

there is a hard-coded number, multiply that number by scale

○    Run the sketch and make sure that the helicopter still looks the same.

○   Change the value of scale to 2 and see what happens.

○   Change it to 0.5 and see what happens.

○    Modify the keyPressed() function so that when the key ‘-‘ is pressed, scale is decreased and when ‘+’ OR ‘=’ is pressed, scale is increased. Implement OR using the || operator.

○    Notice that the sharpness of the drawing isn’t affected by zooming in or out. This is due to the fact that we’re using vector graphics in this part of the lab.

○   Save the sketch and add it to the collection.

3.  Bitmap animation

Bitmap graphics can be more realistic than vector graphics, but are less flexible. We will use them here to make a non-realistic animation of a walking stick figure.

1.  Create a new sketch. Change the name to “Lab 3.3, step 3.1”. Replace the default code with the following:

// Lab 3.3, Step 3.1: Create a new sketch let frame = 0;

let frames = [];

function preload() {

}

function setup() { createCanvas(300, 300); frameRate(10);

}

function draw() {

background(255);

}

2.  Add animation frames to the sketch:

●   Download the four files from here.

●   Open the left panel in the text editor, and create a folder named

“assets.” Upload the four files to this folder.

●   Load the images into the frames array inside the preload()

function by inserting the following code:

frames[0] = loadImage(“assets/fr0.jpg”); frames[1] = loadImage(“assets/fr1.jpg”); frames[2] = loadImage(“assets/fr2.jpg”); frames[3] = loadImage(“assets/fr3.jpg”);

3.  Draw the current frame and update the frame counter variable:

●    Draw the current frame at position (50, 50) using the image() function, which takes three arguments (inputs): image, x, y. The image that you pass in should be the frame-th element of the frames array, which you can access with the syntax frames[frame]

●    Add 1 to the frame variable; if it becomes equal to frames.length, set it to 0. You can use an if statement for this. (If you’re familiar with the mod operator (%), you can use that instead.)

4.  Make the stick figure walk across the canvas

○    Create global variables to store the x and y coordinates of the stick figure. Don’t forget to initialize them to reasonable values

○   Increment one or both of them every frame

○   Draw the stick figure at those coordinates using the image()

function.

○   Save the sketch and add it to the collection.

5.  Duplicate the previous sketch. Modify the copy to make the stick figure wrap around to the other side of the screen when it walks off one side. Save the sketch and add it to the collection.

6.  Duplicate the previous sketch. Modify the copy to make the stick figure stationary without any user input, but take a step to the right each time you press the right arrow key. Save the sketch and add it to the collection.

7.  Optional: Duplicate the previous sketch. Modify the copy to make the stick figure turn around and walk back when it gets to the edge of the screen. Download the left-facing frames from here. Save the sketch and add it to the collection.

8.  Optional: Duplicate the previous sketch. Modify the copy to make the stick figure turn right and take a step to the right when you press the right

arrow. Make it turn to the left and take a step to the left when you press the left arrow. Save the sketch and add it to the collection.

4.   Optional : Arrays: previous mouse locations

In this part of the lab, we will use an array to keep track of the last 300 values of the mouse’s y coordinate. We will gradually build up to this by first writing the drawing code, and then adding the array manipulation.

1.  Create a new sketch. Change the name to “Lab 3.3, step 4.1”. Replace the default code with the following:

// Lab 3.3, Step 4.1: Create a new sketch let y = [];

function setup() {

createCanvas(300, 300);

for (let i = 0; i < 300; i += 1) {

y[i] = 15*sqrt(i);

}

}

function draw() {

background(204);

// Plot all of the values

for (let i = 1; i < y.length; i++) {

//INSERT: draw a line between adjacent values in y

}

}

2.  Draw a line between adjacent values in y:

●    Replace the line labeled “INSERT” with your own code to draw a line between adjacent values in y

●   There is one value in y for each pixel in the width of the screen

●    So the line between y[i] and y[i-1] should be plotted at x-coordinates i and i-1, respectively

●    If your code is running properly, you should see a smooth curve that is steeper at the left of the canvas than the right

3.  Shift past values in y down one spot per frame

●    Add the following code in draw() directly after the call to background():

// Shift past values down one spot each.

// Read the array from the end to the

// beginning to avoid overwriting the data for (let i = y.length – 1; i > 0; i -= 1) {

// INSERT1: shift y[i] down one spot

}

// INSERT2: Add current position to the beginning

●   Replace the line labeled “INSERT1” with your own code to shift the

elements of y down one spot in the array

●    After this loop has run, the value in y[i] should be the previous value in y[i-1]

●   Which direction does this move the values in the array?

●   Which direction does the curve move?

4.  Add the current mouse y-position to the beginning of y:

●    Replace the line labeled “INSERT2” with your own code to write the current mouse y-position to the first element of y

●    Remember that in JavaScript (which p5.js is a library of) array indices start at 0

●    Move your mouse around the canvas and make sure that the line follows the history of your mouse’s y coordinate

5.  Optional: Use a ring buffer for efficiency:

●    The current code copies all of the array elements every frame. This is inefficient, especially for a wide screen

●    To speed it up, you can keep all of the data in the same array location and just change its “virtual” location, i.e., which entry you interpret as being the beginning of the array.

●    First, keep track of how many times draw() has been called in a new variable named frame

●    Then, when writing into the array, overwrite the last entry (which would have been over-written anyway), but don’t move any of the existing values around. Use the frame variable to keep track of which entry to overwrite. Don’t forget to handle the case when frame gets as big as the length of the array

●    Finally, when reading from the array, start at the new entry and read back through the past entries. Again, use the frame variable to

keep track of where the start is.

6.  Add the sketch to the collection.

5.  Submit the collection URL on Blackboard.

error: Content is protected !!
whatsApp Us
Let's Chat, We are Here
Welcome to Hive Writers. How can we be of assistance?