Deliverable 03 - Fall 2025

Due Saturday, Sept. 13, 2025 by 11:59PM

PREPARING YOUR HANDIN FOLDER...

FIRST: Create a folder or subdirectory in your 15-104 working area on your computer or in your Andrew private folder for handin-03. You will put all of your work inside this folder and then compress or zip it to create handin-03.zip to submit to Autolab.

Conceptual Questions (2 points)

In this part of the deliverable, you will download this Word file that contains 4 questions about concepts taught in class. You may download it anywhere on your computer. You should fill in your answers in the spaces provided, and include your name, andrewID and section letter at the top of page 1.

Once you are finished with this part of the deliverable, print/save it as a PDF and store this PDF in your handin-03 folder with the name andrewID-03-concepts.pdf. For example, if your andrewID is acarnegie, then you would save the PDF under the name acarnegie-03-concepts.pdf.

REMINDER: Although you can use a computer to try to help you solve these problems, you should try to solve these using your mind alone, using the computer to check your solution if you wish. These problems will mimic the style of questions you might see on the written exams, and you won't have a computer to help you for these exams!

Technical Assignment 03: Bounce Game (3 points)

In this assignment, you will create a very simple game. A 40 X 40 box (square) will start in the center of the canvas and move in a horizontal direction (left or right) AND vertical direction (up or down). The player will start with 0 points. When the box “hits” the edge of the canvas, it will bounce back in the opposite direction, either horizontally or vertically. (If it hits a corner, then the box will change direction both horizontally and vertically.) The rates that the box moves in the horizontal and vertical direction are called dx and dy, respectively, and each is represented by a random number between -5 and +5. The number indicates how many pixels the box moves in that direction between each frame of the animation.

As the box is bouncing around the canvas, the player needs to click inside the box. If they do, then the box gets a new random dx and dy, both in the same range (-5 to +5), and they earn one point. If they miss, they lose one point and the box continues with its current dx and dy. If the user reaches +3 points, the user wins and the game stops with a green canvas. If the user reaches -3 points, the user loses and the game stops with a red canvas.

Here is what a game might look like (with the Javascript console turned on for debugging purposes):

Start with a fresh copy of template2025-p5only.zip, unzip/uncompress it, rename the folder to andrewID-03-assignment and move this folder into your handin-03 folder. Edit the sketch.js file in this new folder you created.

The requirements are:

• The canvas is of arbitrary size, but it is at least 200 X 200. (Your program should work on any rectangular canvas, e.g. 400 X 300, so use the variables width and height where appropriate.)
• The box bounces off the top, right, and bottom sides of the canvas.
• The box bounces when it first touches the side, e.g. when the right edge of the box meets the right edge of the canvas.
• When the box bounces off of the left or right side, the vertical velocity remains the same.
• When the box bounces off the top or bottom side, the horizontal velocity stays the same.
• When the box is "touched" by clicking inside its bounds, it receives a new random horizontal velocity and new random vertical velocity in the same valid range.
• Print the player score in the console for debugging.
• The game continues until the player reaches +3 or -3 points. Once this happens, the game should just stop with a green canvas or red canvas, respectively. The game should NOT continue.
• Include your name and section letter as a comment at the top of your sketch.js file.

HINTS: You should define global variables to store the x and y location of the box, the horizontal and vertical velocity, and the number of points. You may use additional variables as needed.

Project 03: Dynamic Drawing (3 points)

In this Project, you will create a drawing that changes when the mouse moves. Here are some examples to get you started thinking:

• Moving Art at SmaPhoArt.com
• Animations at shutterstock.com
• Gifs by David Whyte

Animation by David Whyte

(Notice that these images are not controlled by the mouse, but you can imagine that many could be.)

Here is an example written in p5.js and using the mouse. It is intentionally very basic, but it conveys some elements we expect to see in your project: the dynamics of the image are at least as important as the image itself, motion is controlled directly by the human gesture of mouse movement, multiple parameters are coordinated (in this case size and position of two squares) and coupled to the mouse movement (and notice that some parameters increase while others decrease). The comments at the end of the Project 2 description regarding minimally viable solutions apply here.

function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    rect(10 + m * 190.0 / 400.0, 200.0, size, size);
    fill(0, 0, 255);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0, size, size);
}

Start with a fresh copy of template2025-p5only.zip, unzip/uncompress it, rename the folder to andrewID-03-project and move this folder into your handin-03 folder. Edit the sketch.js file in this new folder you created.

The requirements are:

• Using a canvas size whose dimensions are 600x450 (or 450x600, whichever you prefer), create an interactive program in p5.js that generates a dynamic drawing controlled by the mouse.
• You can use mouseX, mouseY or both to control your image.
• You must control at least 4 different aspects of image elements - size, position, angle, color/shade, etc.
• Some parameters must move in contrary motion, e.g. lighter and darker, left and right, bigger and smaller, clockwise and counter-clockwise, etc.
• The image should not have random or non-deterministic elements. Each time the cursor moves to a particular point, the image should be the same.
• Comment your code - it should be easy to tell how the code works, e.g. explain coordinate calculations ("increases from 10 to 30 as mouse moves down") and describe what parts of the drawing are drawn by different parts of your code. (Note: adding comments while you are programming to document your thought process is a good idea. Document as you are coding rather than trying to figure what you did later.)

Handing in your work

You will zip up the handin-03 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):

---

  handin-03
    andrewID-03-assignment
      index.html
      sketch.js
    andrewID-03-concepts.pdf
    andrewID-03-project
      index.html
      sketch.js

---

Once you are ready to submit, zip (compress) the handin-03 folder (which will likely be named handin-03.zip) and hand in the ZIP FILE into the Deliverable 03 submission area on Autolab. Once you handin, check your handin history and click on the magnifying glass to look at what you submitted to make sure it looks right. Reference Lab 01 for a reminder on how to work with the p5js template, organize your files and compress your work. You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the Saturday deadline. If you submit on Sunday (late), even if you submitted on time, you will be marked late. We only grade the final submission you upload to us via Autolab.