Set 02 (Due 9/10)

This is a seven-part homework. (Don’t fret, the parts are small.) The readings, assignments, and projects below constitute the Week 02 Deliverables and are due by 11:59pm EDT on Thursday, September 10th:

  1. Reading: Cramer’s “Concepts, Notations, Software, Art”
  2. Technical Readings (GSWp5Js, etc.)
  3. Looking Outwards 02: Generative Art [Blog]
  4. Assignment-02-A. [Autolab]
  5. Assignment-02-B. [Autolab]
  6. Assignment-02-C. [Autolab]
  7. Project-02: Variable Faces; Face Variables [Blog]

1. 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:

  • Where do you think the “art” is located?
  • Does algorithmic art require a computer?

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


2. Technical Readings

  • Read Chapter 4 (pages 63-80) in GSWp5.js, on Variables.
  • Read Michell3’s Do’s and Don’ts of Style.
  • Read W3Schools on JavaScript variables. Optionally, If you’re still having a hard time understanding variables, do the 6 small exercises at the bottom of that page.

3. Looking Outwards 02: Generative Art

This deliverable is to be your second Looking Outwards report. Our topic for this week is Generative Art: art whose forms (images, sculptures, etcetera) have been generated by algorithms — algorithms created by artists, designers, architects, musicians, and poets.

“Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural
invention, which is set into motion with some degree of autonomy contributing to or
resulting in a completed work of art.” — Philip Galanter, What is Generative Art? (2003)

Some places to get started include:

Identify a project or work which you find inspirational. In a blog post of about 150 words,

  • Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
  • What do you know (or what do you suppose) about the algorithm that generated the work?
  • It what ways are the creator’s artistic sensibilities manifest in their algorithm?
  • Link (if possible) to the work. To the best of your abilities, be sure to provide the creator’s name, title of the work, and year of creation.
  • Embed an image and/or a YouTube/Vimeo video of the project (if available).
  • Label your blog post with the Category, LookingOutwards-02.
  • Label your blog post with the Category referring to your section (e.g. GolanSection, RogerSectionARogerSectionBRogerSectionD, or RogerSectionE).

As a reminder, you may find it helpful to refer to:


4. Assignment-02-A: Three Squares

This programming Assignment (to be written using p5.js, and uploaded to Autolab) is designed to exercise and/or sharpen your skills using variables. (In some ways, it’s a much simpler, rolled-back version of the “Family/Proportions” Assignment from last week.)

The requirements are: 

  • In a canvas of 600×300 (width x height) pixels,
  • Declare a variable, which should be called myUnit, and assign it to have a value of 50.
  • Draw a square, whose width and height are equal to that variable, myUnit.
  • Draw another square, whose dimensions are exactly twice as large as the first square, and whose dimensions are defined in terms of myUnits.
  • Likewise, draw a third square, whose dimensions are exactly three times as large as the first square.
  • These squares should be coded in such a way, that if the myUnit variable had instead been initialized with a different value (such as 60), all three squares would immediately assume new dimensions, while maintaining the same relative size proportions of 1:2:3.
  • There are no requirements for the positioning (placement) of the squares — only their sizes.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information as comments at the top of your program:
    • Your name.
    • Your class section or time.
    • Your email address, including @andrew.cmu.edu
    • Assignment-02-A
  • Name your project UserID-02-a. For example, if your Andrew ID is placebo, then your project name should be placebo-02-a. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-02-a.
  • Zip (compress) and upload your code to our course Autolab tool, using the provided instructions. Zip your entire sketch folder, please (including the p5.js libraries subdirectory). (If you use the new Lightweight sketch.js Template, there will be no libraries subdirectory.)

The image below represents an example of what your program’s output might look like. Of course, you don’t need to imitate the colors, positions, stroke join, or line weight.

assignment-02-a


5. Assignment-02-B: Two Circles

Here’s an animated GIF showing a recording of a live interaction. Notice how the horizontal positions of the circles relate —  in different ways — to the system property, mouseX:

balls

Below is a broken version of the code which generated the above program. Go ahead, run it; you’ll observe that the fixme variable, which controls the position of the black circle, ain’t right. Your job is to correct the value assigned to fixme, in order to reproduce the behavior shown in the GIF above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function setup() {
    createCanvas(600, 300);
}
 
function draw() {
    background(170, 190, 200);
    noStroke();
 
    var fixme = random(width); // FIX ME!
 
    fill(255);
    ellipse(mouseX, 100, 60, 60);
 
    fill(0);
    ellipse(fixme, 200, 60, 60);
}

The requirements are: 

  • Modify the given program, by correcting the expression assigned to fixme in line #9.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information as comments at the top of your program:
    • Your name.
    • Your class section or time.
    • Your email address, including @andrew.cmu.edu
    • Assignment-02-B
  • Name your project UserID-02-b. For example, if your Andrew ID is placebo, then your project name should be placebo-02-b. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-02-b.
  • Zip (compress) and upload your code to our course Autolab tool, using the provided instructions. Zip your entire sketch folder, please (including the p5.js libraries subdirectory if any).

6. Assignment-02-C: Harmonies

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

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

assignment-02-c

Below is a p5.js program which produces the above diagram. Of course, the harmonies are the result of numbers which articulate relationships of size and position.

function setup() {
    createCanvas(600, 300);
    background(200, 150, 100);
    noStroke(0);
 
    fill(250); 
    // ellipse( ??, ??, ??, ?? ); 
    fill(0);
    // rect( ??, ??, ??, ?? );
    fill(100);
    // rect( ??, ??, ??, ?? );
    fill(250); 
    // ellipse( ??, ??, ??, ?? );
    fill(200); 
    // rect( ??, ??, ??, ?? );
    fill(50);
    // rect( ??, ??, ??, ?? );
    fill(250); 
    // triangle( ??, ??, ??, ??, ??, ??);
}

Your task is to modify the program, by adding no more than four variables that describe these visual harmonies. 

To better understand the harmonies, study the “annotated” version of the diagram, below. This shows the sizes and positions of the various forms, marked out in “units”.

assignment-02-c-annotated

The requirements are: 

  • Modify the given program, by declaring up to four variables. There may be no more than four variables.
  • Assign the values of those variables.
  • Replace every “??” that is used as a parameter in the ellipse() and rect() calls, with the variables you made, in order to reproduce the diagram. Note: you may need to use expressions which are arithmetically related to your variables, and/or various arithmetic combinations of your variables.
  • To be absolutely clear, there should not be any “hard-coded” or “magic” numbers inside the revised invocations of ellipse() and rect()  — only variables, arithmetic combinations of variables, and the integers 1, 2, 3, and 4 which appear in the figure above.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information as comments at the top of your program:
    • Your name.
    • Your class section or time.
    • Your email address, including @andrew.cmu.edu
    • Assignment-02-C
  • Name your project UserID-02-c. For example, if your Andrew ID is placebo, then your project name should be placebo-02-c. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-02-c.
  • Zip (compress) and upload your code to our course Autolab tool, using the provided instructions. Zip your entire sketch folder, please (including the p5.js libraries subdirectory if needed).

7. Project-02: Variable Faces; Face Variables.

In this Project, which (as usual for Projects) is to be uploaded to our course WordPress blog, 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.

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:

moka-faces

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.

  • Consider whether your face is shown in frontal, profile, or three-quarters view.
  • Consider things like skin color, stubble, hairstyle, piercings, interpupillary distance, cephalic index, etc.
  • Give special consideration to the shape of face parts, such as the shape of the head, nose, or chin. (This is a great time to experiment with curveVertex() if you haven’t already.)

nose_chart_by_macawnivore

So, here are the Project-02 Requirements: 

  • Using a canvas size whose dimensions are 640×480 (or 480×640, whichever you prefer), create an interactive program in p5.js that generates a new face whenever the user clicks the mouse. Be sure your face has at least three aspects of variability.
  • When you’re done, embed your p5.js sketch in a blog post on this site, using the (usual) instructions here. Make sure that your p5.js code is visible and attractively formatted in the post. Hey, some comments in your code would be nice.
  • In your blog post, write a sentence or two reflecting on your process and product. In discussing your process, it would be awesome to see any of your paper sketches from your notebook; these could be as simple as photos captured with your phone.
  • Label your project’s blog post with the Category Project-02-Variable-Face.
  • Label your project’s blog post with the Category referring to your section (e.g. GolanSection, RogerSectionA, RogerSectionB, RogerSectionD, or RogerSectionE).

Here’s a very simple template 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); 
}

This template presents the minimally viable solution. We often regret presenting templates like this, because some students think that trivial modifications to such a template would represent satisfactory work. But we know your generative faces will be much more interesting.

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

faces


EOF.