Category Archives: Computational Media

Resignation: ICM Final Project Documentation


Resignation is the next stage in my experience that bridges a software application, printed historical material, and real-world game elements (see my previous post for the project proposal).  I decided to focus the content on the perennial footnote in any biography of Ulysses S. Grant, that being his time at Fort Humboldt, California (which is in my hometown), and it’s alleged contribution to his alcoholism.

I built Resignation around the Speech-To-Text Library, which listens to a user’s speech, hands it off to the Google Speech API, and returns text based on Google’s translation (this is akin to what happens when someone leaves a voicemail on a Google Voice Account).   Continue reading Resignation: ICM Final Project Documentation

Clue Return: ICM Final Project Proposal


As I mentioned in my post about initial ideas for my Physical Computing Final Project, in my current practice as an artist and a human, I want to talk about the history of my hometown, Eureka, CA, which as I said is a tale of settlers and violence and wounds and silence.

How can I speak to this in terms of coding?   How can I code a difficult conversation?   Or use software to contribute to such a conversation?  Can this be the bedrock for my Introduction Computational Media Final Project?

Continue reading Clue Return: ICM Final Project Proposal

PImage & Pixels: Image Processing


Week 7 of Introduction to Computational Media was devoted to image processing.  We focused in on the unit of the pixel, and considered the way in which the screen is a collection of integer and color values for each individual pixel, and using various methods we can operate on a single one or groups of them.

For our assignment, we were given the open-ended task of creating a Processing Sketch that experiments with manipulation of pixels via images (whether static, moving, or captured from a live camera).  I chose to see if I could play with the metaphor of mixing pixels to explore the relationship of my own portrait to that of Bret Harte, a figure from the history of my hometown (Eureka, CA, for the non-family out there reading this).

Continue reading PImage & Pixels: Image Processing

Rockslide with Particles, Phase 2

Intro to Computational Media – Week 6
“Rockslide with Particles, Phase 2”


//Main Code

// ArrayList<RockSystem> rs;

RockSystem rs; //Delcare new RubbleSystem object

void setup() {
size(640, 450);
// rs = new ArrayList<RockSystem>();

rs = new RockSystem();

void draw() {

// Draws a mountain in the background
vertex(30, 275);
vertex(120, 150);
vertex(300, 88);
vertex(460, 130);
vertex(580, 300);

// for (RockSystem r: rs) {;
// rs.bouncing();
// }


void mousePressed() { //Starts rocks falling, including exploders
// for (int i=0; i < 100; i++) {
// RockSystem r = rs.get(i);

Visit my GitHub for the rest of the code, including all the classes.

Day to Night in a Processed City

2nd Sketch for Introduction to Computational Media, Fall 2014

2nd Sketch for Introduction to Computational Media, Fall 2014


With this Processing  assignment I was looking to start from a found image, and then replicate some everyday light phenomena using the additional tools of Variables and Conditionals that we’ve added on this week in Introduction to Computational Media.

Variables allow for manipulation of data and beginning to animate elements within a sketch.  For instance the variable “mouseX” (built into Processing) allows you to use the position of the mouse along the X axis to change behavior.  In my case I utilized this to alter a color fill that severed as my shadow.

Conditionals allow for changes to be implemented under certain circumstances.  For instance in my sketch I used the pressing of the mouse as the condition (or event) that triggers lights coming on in the buildings.  Pressing the mouse again turns them off.

Here are some examples of code I was experimenting with:

PImage buildings;

void setup() {
size(900, 613);
buildings = loadImage(“newyork.jpg”);

Buildings Background

float shadow = 0;

shadow = shadow + 0.4;

if ((mouseX > 360) && (mouseX < 500)) {
fill(0, shadow);
rect(0, 0, 900, 613);

Adding the Night

if (lights) {  [appearance of lights defined here using rect() function]  }

void mousePressed () {
if (lights) {
lights = false;
} else {
lights = true;
Adding Lights

Shades in Processing

First assignment for Introduction to Computational Media, Fall 2014.
                                 First assignment for Introduction to Computational Media, Fall 2014.


Processing is an unknown country for me.  But one place I have lived is with a bit of drawing, and some shadows.  In fact I’ve spent a lot of time considering the relationship of darkness to light, the scale from pure white to full black, whether in the work of William Kentridge or Roberto Casati. So when we were asked for our first assignment in Introduction to Computational Media at the Interactive Telecommunications Program to create a Processing sketch using the functions we’re becoming familiar with (sizing, simple 2D shapes, and basic coloration and grayscaling) I immediately felt I could give myself some grounding by exploring that known quantity, shading.

As many of you know, Processing is (as defined on its website) “a programming language, development environment, and online community.” Processing is built on another language, Java. In our first class session and early readings we were introduced to a handful of key Java-based functions that give instructions to create what’s called a “sketch”, functions such as:

size(): sets the size, in pixels, of the window for you sketch.
rect(): draws a rectangle based on specified coordinates.
fill(): specifies a color for the shapes that follow in the code.

I decided that I would depict a value gradient from black to white using the RGB scale which sets the former at “0” and the latter at “255”. I began with a black background:


Screen Shot 2014-09-09 at 9.31.47 PM

Then, I began building incrementally smaller rectangles, filled with increasing amounts of red + green + blue (white) values.

rect(10, 10, 620, 340);
rect(20, 20, 600, 320);
rect(30, 30, 580, 300);

Screen Shot 2014-09-09 at 9.41.24 PM

After creating several steps, I realized that 1) I wouldn’t have enough sizes of rectangle to allow for a large value gradient (wouldn’t come close to 255), and 2) that the transition from one value to the next was too harsh.  So I changed my code to reflect subtler variations.  I also added an integer to each rect() instruction to round the edges of each shape.

rect(7, 7, 625, 345, 2);
rect(14, 14, 610, 330, 2);
rect(21, 21, 595, 315, 2);

Screen Shot 2014-09-09 at 9.52.22 PM

At this point, I began to wonder if there wasn’t a way to auto-generate these shapes, since the increments I was using for both size and value were fixed.  I did some preliminary digging within the Processing Reference but could not locate what I needed, and decided I would present this question to Dan (Shiffman) during the next class.  I continued what I now realized was the extra labor of writing out each of the steps longhand until I had reached the full value range.  As a final enhancement I included a function to remove the black outlines on each rectangle, which made the overall image more dramatic and quality of depth and dimensionality emerged quite spontaneously, reminding me of perceptual theories connecting shadows to depth, how we depend on them to see.


First assignment for Introduction to Computational Media, Fall 2014.


Next up:

  • Inspired by my classmates, attempt some more graphic illustrations.
  • Utilize the  grid geometry of the sketch environment more thoroughly.
  • Venture into something more figurative or character-based.


Full code here.