Category: Assignments

Assignment: drawing with code

Starting from a non-digital artist or artwork for inspiration, create an abstract or semi abstract image with code, using more than 10 drawing commands + at least one function that we didn’t cover in class (see the reference).

The “inspiration” can be very loose: a color scheme, a theme, the overall composition, the concept. It doesn’t have to look like a painting.

Advanced option
Same as above, make a static image but add an element of randomness.

The Yeti Speaks

We don’t know where it’s from, what it’s name is, or what it wants. But when you poke it it makes weird noises.

Nick Sardo and Eryn Jackson

Assignment: alternative interface

Combine what you learned in Processing and Arduino and make a physical interface for an interactive application or an interactive application with “tangible” outputs. Wearables and installations are also valid options.

– Think about how these sensors can be integrated into an object (es. flex sensor to detect the opening of a box) and within a specific context (es. pressure sensor to detect somebody sitting in front of the screen).

– Think about a screen or sound output that is meaningful and related to the interaction. Abstract visuals are fine but go beyond randomish flickering shapes this time.

– Don’t think in terms of utility or practicality. Your object can be an intentionally awkward way to interact with a system if it gives the users some kind of insights on the nature of the interaction.

– Think about the way your object is presented, the story it could tell. Your work could be a prop for a performance like:

Due date:


Some examples:

Mary Flanagan’s Giant Joystick



Ideas for games

I have to ideas for my games, both being these games on formalism. As of right now I would like to use the aesthetics of my “clock” piece and make it more interactive.

The first idea is an aesthetic game of tic-tac-toe in which the X’s are black and the O’s are white. The winner’s pieces then change from black or white to a black and white image of water. That being the reverse of the inverted picture of water in the background.


My other idea is a formal game that is more about constructing a geometric structure within the grid than actually winning a game. It is timed, so builders will have three minutes to construct something and then game over.

Here are some reference images:

Screen Shot 2014-10-14 at 9.21.39 PMother water

Assignment: Clock

Screen Shot 2014-10-06 at 5.47.49 PM

Using Fisica, create a 2D physics world that visualizes the passing of time
*It doesn’t necessarily have to be readable as a clock
*It can integrate standard processing elements we saw before
*Keep it abstract, don’t import images
*look up the fisica reference and use at least 2 methods I haven’t covered in class

Some inspirations here, here, and here

Assignment: Order vs. Disorder

Make a composition with controlled randomness which depicts “order” when the mouseX is on the left side of the canvas, and chaos (actually randomness) when it is on the right side. The degree of order/chaos should vary gradually with the position of the mouse.

.Use for loops
.Check the example below for reference but don’t make a variation of it. The grade will be mostly based on the originality of your sketch.
.Try using noise instead of random.

This is a simple, boring example.

void setup() {
  size (400, 400);
  fill(255, 255, 255);

void draw() {

  background(255, 255, 255);
  fill(0, 0, 0);

  float xPos;
  float yPos;
  int circleSize = 5;
  int circleDistance = 20;

  //defines the x-coordinate 
  for (int x=10; x< = width; x=x+circleDistance) {
    //defines the y-coordinate   
    for (int y=10; y<= height; y=y+circleDistance) {

      //the position is mostly determined by a grid but it also
      //has a component of randomness
      xPos = x + random(mouseX/50);
      yPos = y + random(mouseX/50);

      //80 is a "magic number" I figured out by trial and error
      //it reduces the amount of randomness

      //you can use the functions map and constrain for similar purposes

      ellipse(xPos, yPos, 10, 10);

Assignment: Drawing app

Make a simple mischievous drawing application like Auto-illustrator. You don’t have to make complex interfaces, just use create a similar tension between of randomness vs user agency.
Bonus: making crazy random stuff is quite easy, try to make a tool that always produces good looking, or stylistically consistent imagery.

Use at least one function from the reference we didn’t cover in class. Learn how it works and be prepared to explain it. Good examples are noise, curves, filters.

Recommended screen size is 320 x 480.

You can start from the bingo example to produce unexpected event and from the simple drawing application we made last week:

void setup(){

//I declare a variable type boolean, I call it mouseIsDown
//and I assign a value false. All in one instruction.
boolean mouseIsDown = false;

void setup() {
  size(500, 500);
  background(255, 255, 255);

void draw() {

//variable stroke according to speed
//float strokeW = abs(mouseX - pmouseX);
  //draw line only if mouse is down
  if (mouseIsDown == true) //same as if(mouseIsDown)
    line(mouseX, mouseY, pmouseX, pmouseY);


//this function is called every time you press a mouse button
void mousePressed() {
  mouseIsDown = true;

//this function is called every time you release a mouse button
void mouseReleased() {
  mouseIsDown = false;

Drawing Instructional

Close your eyes

Dot your entire sheet of 8.5 X 11 paper

Open your eyes

Two thirds down your piece of paper, in the center, draw three squares

Make the outer square the biggest

Make the medium square inside of the big square

Make the smaller square inside of the medium square

Now draw a diagonal line across the paper, following your dots that leads to the squares but does not touch them

Mirror that line on the other side, again make sure it does not touch the squares

Shade in the negative space

Repeat all these steps inside of the smallest square

You are done

Assignment: Face


Draw a stylized face in Processing. Requirements:

– A canvas size of 600 x 600

– Front view, not profile

– Use at least 10 graphic elements. Use the drawing functions I covered in class but also try something new from the reference.

– Use colors that don’t suck.
You can steal color palettes from here.
Create a new one with Kuler
Generate one from a picture with this tool

Here are some good examples from the past years, you can check the source code by clicking on code down to the right:
here , here , this one, this one too,
this one uses loops which I haven’t covered yet

PART 2: Make it Responsive

For this assignment, you’ll add sound-interactivity to your face using the Minim audio library.

The template files can be downloaded from here

Your Processing project will have two files.

The map function is crucial for this assignment.

float V = map(volume, 0, 100, 2,100);

In this snippet, V will assume a value between 1 and 200 in relation to the value of volume.
0 (silence) -> 1
200 (maximum noise) -> 200
All the in-between values will be scaled proportionally.

Map can produce negative values

float V = map(volume, 0,100, -100,100);

Or invert the scale

float V = map(volume, 0,100, 500,0);



1. Export it as mac app
2. Zip the project folder with pde and .app
3. Upload the zip on dropbox or similar service
4. Write a blog post with a screenshot of the sketch and a link to the zip


  • If stylized character design is not one of your strengths, look for inspirations in the pictoplasma Flickr pool
  • Volume can affect colors, positions, sizes, portion of arcs, control points in curves
  • Always backup your projects. Careful the name of the folder must correspond to the name of the main file. es: soundFaceBackup must contain soundFaceBackup.pde and MyAudioHandler.pde.
  • The easiest way to mash up this sketch with the previous one is copy the instructions from the static face to the dynamic example and not viceversa.
  • Don’t put other .pde files in your folder unless you know what you are doing, it may confuse Processing. You should have only 2 open tabs, the face sketch and the microphone handler.
  • Don’t get too obsessed if some shape breaks or overlaps, the microphone handler is not 100% reliable and may occasionally shoot some weird levels. The function constrain(var, min, max) can also be used to limit values.

If this assignment is too easy for you, you can integrate face detection using this super simple package:
FaceOSC + Processing template
Read the readme file for instructions.

Reading: Program or be Programmed


Douglas Rushkoff is an American media theorist, writer, columnist, lecturer, graphic novelist, and documentarian. He is best known for his association with the early cyberpunk culture, and his advocacy of open source solutions to social problems.

One of his most recent books is Program or be Programmed: Ten Commands for a Digital Age. In its ten chapters Rushkoff provides cyberenthusiasts and technophobes alike with guidelines to deal with the digital world without being controlled by it.

Read the introduction. PDF here

And leave a thought in the comment section below. I want more than a summary or a personal reaction (I agree/I disagree). You can start from this question:

Can you think of an example of a computational system or artifact that “programs” our lives or deeply affect our society? What are its bias and problems (if any)? Can you envision a better alternative?

Instructional Drawings

Class Exercise: Blind Drawing

  • Divide students into pairs. Call one person of each pair X, the other Y.
  • X students get drawing 1.
  • Y students get drawing 2.
  • Distribute blank paper and pens if necessary.
  • Pairs sit back to back without looking at the other’s drawing
  • X student describes his drawing to Y; Y tries to draw it from his instructions.
  • Switch at a reasonable time.
  • Y student describes her drawing to X; X tries to draw it from her instructions.
  • Pin up the drawings at the end, so people can see. Group by X/Y.
  • Discuss the results

Class Exercise: reverse engineering

This image is procedurally generated (Click to zoom):

1) Analyze it and try to “reverse engineer” the algorithm that produces similar images (only the lines, colors are not important). Describe the process using the minimum amount of clear, non ambiguous instructions.

2) Give the instructions to a person who has not seen the image and ask him/her to “execute” the process using a pen or pencil and a ruler, without giving him/her additional feedback – like in the exercise we did in class.

Warning: I don’t want exactly the same image line by line, but a universal set of instructions that can produce infinite variations of the pattern.

Here’s another image produced by the same algorithm:

Assignment: Drawing Algorithm

conditional drawings

1) Take a look at the videos and the materials on the conditional design website and manifesto. Also check peg programming for pseudo-code examples.

2) Create a set of instructions able to generate an infinite set of different drawings.

3) Without showing the previous results ask three (or more) people to execute them. You are not allowed to communicate verbally during the execution.

4) Post the results on the blog.


The surface has to be a standard letter sheet (8.5 by 11 inches). The tool should be a provided marker.

Your rules must contain an element of iteration. There should be “loops” in the execution that create repetition, seriality, fractal structures.

If there is repetition in the process you may have to devise an ending condition. You can verbally stop the execution, set up a timer, or prescribe a certain amount of iterations.

Your rules should be as specific as possible but also able to generate different results every time, so you should include at least one element of randomness or ambiguity.

Most importantly: the goal is to create a recipe for interesting drawings, not arbitrary doodles. Can you embed style and composition in a set of rules?

Twine ideas

Idea #1: Modular Soundscape I am less than experienced with developing narratives, much less a branching narrative, but I am intrigued by the possibilities of using the Twine platform for (for lack of a better term) world-building. In this case I am imagining a world crafted from sounds. Not necessarily a song, or an ambient sound atmosphere, but perhaps some place in between those two states. I am envisioning a choose your own adventure type path where the end result would have the user producing their own unique soundscape based on the loops, beats, melodies, recorded and manufactured noises of all kinds, that they chose as they progress through the twine sequences. My lack of experience with coding may make this a bit of a challenge, but one method of execution could make use of the youtube platform— the user would simply open links leading to different soundbites, and the videos playing all at once would come together to create the finished soundscape. The challenge with this would be assuring that the different clips would open at the right instance to sync up in the intended manner, but on the other hand the randomness may be advantageous in the end.

Idea #2: cloud brain Stemming from the original silly story I started working on in class the other day, I would like to play with another sort of worldbuilding concept, this time centering around the character of a cloud that may or may not have its own consciousness. The user would have, at each stage of the story, choices that either further the anthropomorphization  of this cloud or do the opposite, removing its identity as a character. The style of writing would also reflect these choices- the direction where the cloud becomes conscious would become more and more verbose and whimsical, while the choices in the opposite direction would become increasingly dry and factual. The end result of all the paths of varying points along this spectrum between fantasy and fact would be essentially descriptions of different universes with different amounts of “magic” to them. This story would have accompanying images, creating a visual mass as well as the textual mass to describe the universe the user chooses.

dream machines

what struck me reading this wasn’t just how telling it was of the (then) future, but how applicable it still is today–particularly the bit about education and the way schools operate….

particularly this diagram:

Screen Shot 2014-08-28 at 1.16.48 PM



Assignment: Interactive Story

Readings – due Thursday 28

Read at least one of these texts and write a personal response on the blog. I’m not looking for a summary or a review (I liked it etc.), it can be any coherent thought that runs in your mind after reading.

The garden forking paths – Jorge Luis Borges (1941)
Brainy. We talked about it in class, visionary literature.

CYOA – Christian Swinehart (200?)
Geeky. A formal analysis of Choose Your Own Adventure books.

Computer Lib / Dream Machines – Ted Nelson (1974)
Trippy. Possibly the most important text about personal computers ever written. Keep in mind it was 1974, no personal computers, no graphical interfaces, no Internet. You can skip the pages between 17 and 34 in the PDF, they are still a bit too crackpot.
(excerpt from New Media Reader)

Write a branching story with one or more of the following features:

  • Non-human (or better, non-animal) main character
  • Events out of chronological order
  • Multiple characters

PART I – due Monday September 1st

Post two ideas for this project.

Write the the first paragraph and (at least) a couple of examples of choices for each of the potential projects.

If you are planning to include visuals, produce (at east) one illustration/animation as example.

Start experimenting with Twine.

PART II – due Monday September 8th

Write (and illustrate) your story using Twine.

Post it in your personal web space and post a link in the blog.


Read at least 10 of your classmates work and post a comment on the blog with constructive criticism, impressions and suggestions.


Try to limit each block of text to one or two paragraphs

Don’t provide many choices, provide interesting choices

Don’t just think about the content, think about how it could be narrated:
self-aware / self referential?
fist, second, third person?
multiple endings?
multiple beginnings?
Do you control an avatar?
Does it have graphics? What’s the relation between graphics and text?

Comments Off on Assignment: Interactive Story Posted in