Deliverable 02 - Fall 2023

Due Saturday, Sept. 9, 2023 by 11:59PM


Reading: Cramer’s Concepts, Notations, Software, Art

Please read the three-page essay, Concepts, Notations, Software, Art by Florian Cramer, a German/Dutch cultural theorist of new media who has written extensively on software art since the late 1990s.

Cramer prompts us to contemplate the relationship between the outer form of a generated/interactive artwork (3D print, digital image, computer animation, etc.) and the inner form of the code and algorithms which produce it. Consider:

There is no submission due for this reading, but you may be called upon to discuss this article in recitation or class, or this may show up in a quiz.


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-02. You will put all of your work inside this folder and then compress or zip it to create handin-02.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-02 folder with the name andrewID-02-concepts.pdf. For example, if your andrewID is acarnegie, then you would save the PDF under the name acarnegie-02-concepts.pdf.

SPECIAL NOTE: 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 02: Visual Harmonies (3 points)

This programming Assignment (to be written using p5.js, and uploaded to Autolab) is intended to sharpening your skills using variables.

Study the following 400 X 400 canvas. You will notice that there are a number of “visual harmonies” (for example, there are two rectangles whose top edges are coincident).

Visual Harmonies example with adjacent shapes

Below is a p5.js program which produces the above diagram (with some crucial pieces hidden). Of course, the harmonies are the result of numbers which articulate relationships of size and position. 

    
var x = 30;
var y = 30;
var w = 30;
var h = 30;

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

function draw() {
    background(200);
    noStroke();
    fill(255,0,0);
    // rect(??, ??, ??, ??);
    fill(0,255,0);
    // ellipse(??, ??, ??, ??);
    fill(0,0,255);
    // triangle(??, ??, ??, ??, ??, ??);
    fill(255,0,255);
    // rect(??, ??, ??, ??);
    fill(255,255,0);
    // rect(??, ??, ??, ??);
    fill(0,255,255);
    // ellipse(??, ??, ??, ??);
    fill(255,255,255);
    // rect(??, ??, ??, ??);
}

Your task is to complete the program, using the variables x, y, w and h as shown, to complete these visual harmonies and recreate the picture. Note that these objects are “attached” to each other so we can use the variables to move the collection around as a unit or stretch the collection horizontally or vertically.

To better understand the harmonies, study the version below that has an embedded grid so you can see the positions and relationships of the objects to each other and the canvas (but you won’t draw the grid):

Same shapes with a grid overlaid

The top left of the red rectangle (and the entire collection) is (x, y). The width of each grid cell is w and the height of each grid cell is h. NOTE: in the picture above, these are all set to 30, but they could be different. Here is a picture where x = 70, y = 50, w = 30, and h = 20:

Same picture with different values for x,y,w,h

The requirements are:


Project 02: Variable Faces; Face Variables (3 points)

In this Project, you will create a face which has at least three aspects of variability.

“Chernoff Faces” are an example of generative faces, which are widely used in information visualization:

[From Wikipedia] “Chernoff Faces” are an information visualization technique, invented by Herman Chernoff in the early 1970’s, which represents multivariate data in the shape of a human face. The individual parts, such as eyes, ears, mouth and nose represent values of the variables by their shape, size, placement and orientation. The idea behind using faces is that humans easily recognize faces and notice small changes without difficulty. Chernoff used 18 variables (such as eyebrow height, jaw size, etc.) to describe a face.

Chernoff faces for judges - image

Paul Ekman’s Facial Action Coding System, by comparison, uses 46 variables to describe a facial expression. Each of these dimensions corresponds to the action of some muscle in the face.

For another example of generative face art, consider this lovely work by the young German new-media artist, Moka, in which he wrote an algorithm to imitate his own hand-drawings:

Grid of many facial expressions

For your Project-02, create a generative face which has at least three aspects of variability, but preferably more. For example, you might have variables that specify the size, position, color, or other visual characteristics of the eyes, nose, and mouth. These could modify the face’s expression (happy, sad, etc.), and/or the face’s identity (John, Mary, etc.), and/or the face’s species (cat, monkey, etc.). You may develop this from your previous face project, or you may create an entirely new face if you wish.

Nose chart showing various profiles

The requirements are:

SIMPLE EXAMPLE:

Here’s a very simple example you can use to get started. Notice how the variables are re-assigned (randomly) whenever the mouse is pressed: 

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;

function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
}

Here’s what that template looks like, when you run it and click a few times:

Animations of simple facial expressions

This template presents the minimally viable solution. We expect you to do something much more creative than this in order to earn a 2 or 3.

HELPFUL HINT: Let’s say one of your facial features is a random expression (happy, sad, angry, etc.). You can do this by setting up a variable (e.g. mouth) that has a random value of 1, 2, 3, etc. (one for each expression). Then you can use if-else in your draw function to test the current value to draw the expression: 

if (mouth == 1) {
// draw a happy mouth
} else if (mouth == 2) {
// draw a sad mouth
} else if (mouth == 3) {
// draw an angry mouth
} else {
// draw an expressionless mouth
}


Handing in your work

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

  handin-02
    andrewID-02-assignment
      index.html
      sketch.js
    andrewID-02-concepts.pdf
    andrewID-02-project
      index.html
      sketch.js
Once you are ready to submit, zip (compress) the handin-02 folder (which will likely be named handin-02.zip) and hand in the ZIP FILE into the Deliverable 02 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.