Deliverable 03 - Fall 2024

Due Saturday, Sept. 14, 2023 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 ball (circle) 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 ball “hits” the edge of the canvas, it will bounce back in the opposite direction, either horizontally or vertically. (If it hits a corner, then both the ball will change direction both horizontally and vertically.) The rate that the ball moves in the horizontal and vertical direction is called its h-velocity and v-velocity, and each is represented by a random number between -4 and +4. The number indicates how many pixels the ball moves in that direction between each frame of the animation.

As the ball is bouncing around the canvas, the player needs to click inside the ball. If they do, then the ball gets a new random h-velocity and v-velocity, both in the same range (-4 to +4), and they earn one point. If they miss, they lose one point. If the user reaches +5 points, the user wins and the game stops with a green canvas. If the user reaches -5 points, the user loses and the game stops with a red canvas.

Here is what a game might look like:

Start with a fresh copy of template2023-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:

HINTS: You should define variables to store the x and y location of the ball, 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:

animating hexagons
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 template2023-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:


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.