Assignment 04

This week, we dive headlong into Processing. We have much hacking and reading to do. For this reason, there is no “Looking Outwards” due this week.

Assignment 04A: Reading

 

Here are two books by Casey Reas and Ben Fry:

Not every book works for every person. For this reason, we are providing two different readings. Look over the two books, and pick the one which makes the most sense to you.

Readings for Wednesday 9/17:

  • Getting Started with Processing: Chapter 4 (pp. 37-50)
  • Processing: A Handbook, the following sections:
    • Data 1: Variables;
    • Math 1: Arithmetic;
    • Control 2: Repetition;
    • Data 2: Text;

Readings for Monday 9/22:

  • Processing: A Handbook, the following sections:
    • Math 4: Random;
    • Transform 1: Translate, Matrices
    • Transform 2: Rotate, Scale

Assignment-04-Face.
Variable Faces; Face Variables.

In this assignment, due Monday September 22nd, you will create a face which has at least three dimensions of variability.

[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 your assignment 04e, create a face which has at least three dimensions of variability, but preferably more. These might 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 things like skin color, stubble, hairstyle, piercings, etc.

So:

  • Create an interactive program in Processing or P5JS.
  • If you are using Java: upload some screenshots of your project, and embed your code into the blog post using the WP-Syntax plugin.
  • If you are using JavaScript: upload the JS sketch using Lauren’s p5js-embed plugin.
  • Categorize the assignment with Assignment-04-Face.

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

float eyeSize = 20; 
float faceWidth = 100; 
float faceHeight = 150; 

void setup(){
  size(300,300); 
  // if using P5JS, use "function" instead of "void";
  // use "createCanvas" instead of "size";
  // use "var" instead of "float", etc. 
}

void draw(){
  background(180);
  ellipse (width/2, height/2, faceWidth, faceHeight); 

  float eyeLX = width/2 - faceWidth*0.25;
  float eyeRX = width/2 + faceWidth*0.25;
  ellipse (eyeLX, height/2, eyeSize, eyeSize); 
  ellipse (eyeRX, height/2, eyeSize, eyeSize); 
}

void mousePressed(){
  faceWidth  = random (75,  150); 
  faceHeight = random (100, 200); 
  eyeSize    = random (10,  30); 
}

Assignment-04-Iteration

Wallpaper using nested for { } loops.
Due Monday September 22nd.

We continue our formal studies. In this project, you will use generative techniques to design a repeating pattern to generate an attractive wallpaper or fabric.

For some mathematical inspirations, see

Incidentally, wallpaper can be interesting as well as beautiful. For example, here’s some recent work by the Italian group ToDo, developed using the visual programming toolkit Nodebox.js: Spamghetto Wallpaper.

  • See http://www.processing.org/learning/basics/embeddediteration.html
  • Create a composition which generates a pattern of tiling wallpaper.
  • Per your artistic inclination, you may include subtle randomness for visual interest.
  • Create a blog post for your project and, in about 100 words, describe your process, your goals, and how your project evolved.
  • If you are using Java: upload a screenshot of your project, and embed your code into the blog post using the WP-Syntax plugin.
  • If you are using JavaScript: upload the JS sketch using Lauren’s p5js-embed plugin.
  • Categorize the assignment with Assignment-04-Iteration.

Assignment-04-Chaos: “Chaos vs. Order”

A Composition with Interactively-Parameterized Randomness.
Due Monday September 22nd.

  • Make an interactive composition which depicts “order” when the mouseX is on the left side of the canvas, and “chaos” when it is on the right side.
  • The degree of order/chaos (entropy) should vary smoothly with the position of the mouse. The following function may be very helpful: map(), constrain()
  • Consider different perceptual features which can be chaotic or ordered: for example, size, position, color, regularity of spacing (rhythm), weight, texture, amount of detail, curvature, etc.
  • If you are an advanced student, think in advanced ways. What if the chaos concerns the way things are animated (e.g. erratically)? What if the composition is figurative and not abstract? Etc.
  • Categorize the assignment with Assignment-04-Chaos.

The following code is not offered as a template, but rather, as the simplest possible illustration of what I mean by the assignment. Please do not just submit the code below with random colors; go create your own composition.

void setup(){
  size(500,200); 
}

void draw(){
  background(255);
  smooth(); 

  float randomness = map(mouseX, 0,width, 0,1);
  randomness = constrain(randomness, 0,1); 

  for (int i=1; i < 25; i++){
    float xA = (i*20)  + randomness * random(-15,15); 
    float xB = (i*20)  + randomness * random(-15,15);
    line (xA,0, xB,height); 
  }
}