Category Archives: Introduction to Computational Media

Art, Design, Introduction to Computational Media, pcomp, Physical Computing

Introduction to Computational Media: Reactive Planar Dimension using Processing and a MacBook Pro

In the 1990s I created a series of grid structures using acid-etched industrial steel parts.  A sensor was located at each intersection.

l’Autre, Terezakis, Here Gallery and performance space, 1996

They were all connected with a combination of RJ11 and RJ45 connectors and appropriate cable. For ease of touring and installations, I designed six grids to be 48″ x 96″.  Plywood, sheetrock, and other building materials in the United States typically max out at those two dimensions.   Correctly fabricated the modules would have easily fit in cargo vans, elevators, and trucks.   Much to my chagrin, I did not factor in the additoinal length caused by the couplings and the additional offset of the pipe.  This caused some extra challenges. But that’s for a different text.

The grid structures were created for people to be able to play music and/or poetry either in a random manner or by controlling where their shadows fell on the grid. In this manner they could then control the placement and pattern of sounds or words if they chose.

I always liked the idea of creating participatory volumes and felt that their must be a better way to get control signals to the computer.

Processing and the availability of low cost web cameras would seem to be one way to update the mechanics of the artwork.

Serial port communication is a lot like it was in the 1990s.  Except that it is more robust, runs over a USB (then non-existent!) cable, has relaible physical connectors,  and Apple computers which can do things undreamt of back then.   The Arduino was essential in making this project work.  (This seemed like a heavy-handed solution for the task at hand. I can’t help but thing that a simple 16C58B could have given me the hardware interface I needed for this project.) I used the Arduino because I wanted the experience with the platform as well as the fact that its language is nearly identical to that of Processing.

A screen grab of the Arduino code appears below. In its uncommented out incarnation, the code allows me to see which outputs are firing and when. For the demonstration and testing I am using incandescent bulbs. Due to the heat they radiate, I prefer to have the lights “off” while waiting to trigger them using camera input.

LED test code for Arduino and AC power moduletest-test

Clicking on this link will open a new window with a screen cap showing the code testing with the laptop webcam. A white rectangle will appear with contiguous moving black segments, showing where my arm passes in front of the camera. (QT controller is at the bottom of the file.)

The above example is the code portion working. The file at this link shows the lights changing in response to the detected movement.

Peter Terezakis
ITP, Tisch School of the Arts
New York City

icm, Introduction to Computational Media

Introduction to Computational Media – Strings

I wqs working on a problem with Strings for this week’s assignment in ICM. For my sins, I was treated to the best error message I’ve seen since “Keyboard Failure: Press F1 to Continue. Screen capture of the error message follows:
”

Processing message
Error message confirming my lack of knowledge

Turned out what I thought was my incompetence/idiocy was actually a bug in processing.

The traditional way to use a specialized font in Processing is to include the font set within your Processing sketch’s data folder. My experiment was to work with generating text on screen using fonts which were local to the server.

In order to check what fonts are available on the serve, you are running the script below in your browser. At the bottom of your browser window there should be a section with a black background and a list of available fonts. This script also works on your local machine (if run locally).

<align=”left”>

You can close that “font information window” by clicking around. (On FIrefox there is an “X” in the window’s top right corner. Click that to get your browser’s real estate back.)

Running the script locally indicated that I had 347 fonts available. I used the script below to and it worked fine. On my browser I had:” sans-serif,serif,monospace,fantasy,cursive ” listed as fonts.

I posted and ran the script below with the expectation that I would not see characters using SYMBOL font; only that I would see something else. Instead of a text character, I saw the ASCII code for each letter. If you click anywhere on the red area and type, you will see numbers appear. That numbers appear and not characters is the issue.

If you did not close the window at the bottom of your browser you will see the intended characters appear as invoked by the println command.

Font used = SYMBOL:

On desktop machine works as expected:
desktop
Not working on server.

Font used = SERIF:

Code:

char letter;
String words = “font name”;void setup() {
size(640, 360);
// Create the font
textFont(createFont(“serif”, 18));
}

void draw() {
background(116,11,11);

// Draw the letter to the center of the screen
textSize(14);
text(“Mouse click on sketch. Type to add to characters to String”, 50, 50);
text(“Current key: ” + letter, 50, 70);
text(“String length is ” + words.length() +  ” characters”, 50, 90);

textSize(36);
text(words, 50, 120, 540, 300);
}

void keyPressed() {
// The variable “key” always contains the value
// of the most recent key pressed.
if ((key >= ‘A’ && key <= ‘z’) || key == ‘ ‘) {
letter = key;
words = words + key;
// Write the letter to the console
println(key);
}
}

Peter Terezakis
ITP, Tisch School of the Arts
New York City

icm, Introduction to Computational Media

Introduction to Computational Media: Fonts – display available fonts

//how to know what file extensions?
//good way to test and see what is available on a server?

<align=”left”> size(20, 20);
String[ ] fontList = PFont.list( );
println(fontList);

Peter Terezakis
ITP, Tisch School of the Arts
New York City

icm, Introduction to Computational Media

ICM Week 6.1

Used a background image and loaded it in a directory outside of Processing code.
Create squares whose fill, borders, and alpha are random. Pressing any key “clears screen” by repainting background image.
No doubt about it: Josef Albers would have detested my appropriation of his work.

Peter Terezakis
ITP, Tisch School of the Arts
New York City

icm, Introduction to Computational Media

ICM week 6 – The Square

Squares gone wild (homage to Josef Albers):
(Using mousePressed)

Cool and new discovery: size(displayWidth, displayHeight);
didn’t work in Javascript. Does work in JAVA. Code is here.Existing Post Image

Peter Terezakis
ITP, Tisch School of the Arts
New York City

Introduction to Computational Media

event

Size of display works in JAVA; not in JavaScript

>>>>>>>>>>>>>>>>>>>>>>>>>>

 

void setup() {
frameRate(60);
//new for me to use
size(displayWidth, displayHeight);

background(random(255),random(123),random(255));
}

void draw() {
smooth();
strokeWeight(random(50));
fill(random(255), random(255), random(255),random(255));
translate(width, height);
if (mousePressed == true) {

rotate(radians(mouseX/2));
rect(60, 60, 50, 50);
}
else {

stroke(random(255), random(255), random(255),random(255));
strokeWeight(random(50));
}
stroke(random(255), random(255), random(255),random(255));

rect(mouseX, mouseY, mouseX, mouseX);
}

Peter Terezakis
ITP, Tisch School of the Arts
New York City

icm, Introduction to Computational Media

ICM – Lines in Space

Peter Terezakis
ITP, Tisch School of the Arts
New York City

Introduction to Computational Media

ICM XY & left click

left mouse click background changes color
x circle changes size
y circle color changes color

X Y and left click

 

Peter Terezakis

Tisch School of the Arts
http://www.terezakis.com

[contact_form]