15-104: Introduction to Computing for Creative Practice

Deliverable 09 - Fall 2023

Due SUNDAY, November 5, 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-09. You will put all of your work inside this folder and then compress or zip it to create handin-09.zip to submit to Autolab.

Conceptual Questions

THERE ARE NO CONCEPTUAL QUESTIONS TO ANSWER FOR THIS DELIVERABLE DUE TO THE WRITTEN EXAM

Technical Assignment 09: Animation Walk Cycle (3 points)

In this Assignment, you are asked to write code to animate a walking character with sprite images. (You are provided, below, with the necessary sprite images for the character facing to the right.) The final goal of this Assignment is to create a scene where up to three characters walk back and forth down a canvas. Here are a few snapshots of what this might look like:

Snapshot of animated characters walking to the right

Snapshot of animated characters walking to the left

Here is the source image for the walk cycle of the animated character we’ll be using:

8 stages of animated walk cycle

The individual frames of this animation can be found in this Imgur.com album. There are 8 frames, which are provided to you as .PNG images with transparent backgrounds.

Start with the following code:

var walkImage = [];   // an array to store the images

function preload(){

    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "http://i.imgur.com/svA3cqA.png";
    filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
    filenames[2] = "http://i.imgur.com/IgQDmRK.png";
    filenames[3] = "http://i.imgur.com/kmVGuo9.png";
    filenames[4] = "http://i.imgur.com/jcMNeGq.png";
    filenames[5] = "http://i.imgur.com/ttJGwkt.png";
    filenames[6] = "http://i.imgur.com/9tL5TRr.png";
    filenames[7] = "http://i.imgur.com/IYn7mIB.png";

    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }
}

// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
         }
    return c;
}

Programming Instructions

Create a global array to hold the three characters, initially empty.
Write code to model each character as an object. You will need three methods, one of which is given for you (see above):
- makeCharacter – a constructor that creates and returns an object representing a walking character. Each walking character has the following properties:
  - x – horizontal location of the center of the character, given by a parameter
  - y – vertical location of the center of the character, given by a parameter
  - dx – horizontal velocity of the character (delta x), given by a parameter
  - dy – vertical velocity of the character (delta y), given by a parameter
  - walkingRight – Boolean representing whether the character is walking toward the right or not (default: true)
  - imageNum – a number that indicates which of the positions the character is in, corresponding to an image number (default: 0)
  - stepFunction – a reference to a function that updates the walking character for the next frame
  - drawFunction – a reference to a function that draws the appropriate image for the walking character in the correct position
- stepCharacter – a method that updates the walking character for the next frame, has no parameters (see special instructions below)
- drawCharacter – a method that draws the walking character, has no parameters (see special instructions below)
setup – Create a canvas of size 600 x 700 with a frame rate of 20. Set the image mode to CENTER (see the p5.js reference). Then construct and store the three characters (using a loop) so that they start at positions (50, 50), (50, 250) and (50, 450). Each should have a dx of 5 and dy of 1, facing right, in the contact position (image #0).
draw – Create a light gray background. Then draw the 6 red lines using a helper function drawLines (see bullet below). Then use a loop to draw the three characters, one by one. Call each character’s step function first, then its draw function. If the vertical position of the character reaches 650, change its vertical position to 50 so that the character repeats the walking path.
- drawLines – For this helper function for the draw function, the lines extend from x=50 to x = 550, the endpoints of the lines on the left are at y = 50, 250, 450 and 650, and the endpoints of the lines on the right are at y = 150, 350, and 550.

Special Instructions

Initially, write your stepCharacter and drawCharacter functions so the character moves down and to the right along the red lines from left to right only. This should (hopefully) be straightforward. Try to get one character to walk to the right first. If you can get the first character to walk along its initial path from the left side to the right side, then you will get 2 of the 3 points. Save your sketch under the name sketch-v1.js as a backup to show us your work up to this point.

Next, add two more characters, moving from left to right along with the first character. If you can get all three characters to walk along their initial paths from the left side to the right side, then you will get 2.5 of the 3 points. Save your sketch under the name sketch-v2.js as a backup to show us your work up to this point.

Finally, in order to get the characters to walk to the left, you will need to do some clever programming, since we haven't given you the images facing left. Essentially, when the character is supposed to walk to the left, you should change the coordinate system so that the origin is in the top right of the canvas and x should increase going right to left. You can do this by using translate(600,0) to translate the origin to the top right corner of the canvas. Then you can use scale(-1, 1) to flip the x axis. (It’s as if you’re looking at the canvas from behind!) The dx and dy for your characters should remain the same, but their x coordinate should change. Think about where the character is when its on the right end of the lines but you look at the canvas from behind. Remember that when you do the translation and scaling, you should do them in between push and pop function calls since you don’t want to permanently change the coordinate system.

The final goal is to make the characters walk to the right, then to the left, then to the right, etc., moving back up to the starting position (50,50) when they reach the bottom of the path. If you can get the final program working as specified, then you can achieve the 3 points!

Style and Documentation

Be sure to follow our coding style guidelines and document your code for anything that doesn’t seem obvious. Poor style and minimal/no documentation can lead to a 1 point deduction.

Open-ended Project 09: Computational Portrait (3 points)

In this creative Project, you will create a computational portrait, using some kind of original surface treatment (such as a “custom pixel”) of a hidden underlying photograph.

Here are some examples of using an image (or video capture) to use pixel values to control other elements to make an abstract portrait:

Wooden Mirror example
Danny Rozin, Wooden Mirror - the angle of the pieces of wood are tilted toward or away from an overhead light based on the brightness of pixels in the image of the observer

Grandmother Fanny thumbprint art Artist creating Fanny with thumbprints
Chuck Close created a 12 foot high portrait of his wife's grandmother, Fanny, created with thumbprints of various darknesses.

Ryan Alexander example Ryan Alexander image closeup
Ryan Alexander allows fungus-like filaments to grow according to forces from an underlying image. It turns out that those filaments are actually strings of words.

Requirements

The portrait must be an un-retouched photograph of a person that you can access on imgur.com. Ideally, it should be a photograph of you, although you may use a photograph of another person if you do not want to upload your photo to imgur.com. It may not be a faculty member, TA, celebrity, politician, or religious figure. Think about finding a photograph that will express something artistic when you convert it. Do not upload a photograph of someone you know (family, friends) without their permission. The photograph should focus on the face only. No additional body parts below the shoulders.
Students whose faith prohibit the representation of sentient beings are excused from the first constraint, and may create a representation of an animal instead, or make some other proposal by arrangement with the instructor.
You may not display the original photograph in unaltered form at any time. You may only display the portrait generated from it.
You must use an actual photograph as a starting point for a computational interpretation; you may not synthesize a portrait “from scratch” (as you did in your Variable Faces project).
Dimensions may be no larger than 480×480 pixels, though smaller canvases are fine.
In a comment in your program, write a sentence or two reflecting on your process and product.
In order to earn 3 points, you must show creativity in your portrait representation. Simply duplicating what you see in the example code will not earn full credit.

Sample Code

We highly recommend you look at Dan Shiffman’s great p5.js Pointillism Example for a start.

Handing in your work

Your handin folder handin-09 should have the two folders described above.

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

  handin-09
    andrewID-09-assignment
      index.html
      sketch.js
      sketch-v1.js
      sketch-v2.js
    andrewID-09-project
      index.html
      sketch.js

NOTE: You might not have all of the backup versions shown if you don't complete the technical assignment.

Once you are ready to submit, zip (compress) the handin-09 folder (which will likely be named handin-09.zip) and hand in the ZIP FILE into the Deliverable 9 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. IF YOU SUBMIT THE WRONG ZIP FILE, YOU RISK GETTTING A 0 ON THIS DELIVERABLE!

You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the deadline. If you submit up to one day late, even if you submitted on time, you will be marked late. We only grade the final submission you upload to us via Autolab.