Audiovisual track 0×03 taken from the Hyphema DVD released by pixelnerve.com

Sound by Jerome Faria.
Visuals by Victor Martins.

Cast: Jerome Faria

Visual Music Piece by Chris O’Leary

Cast: Christopher O’Leary

Build of an image from the Engine series of prints. I’ll be showing them at an exhibition at the Resolution Gallery in Johannesburg, opening on July 10th 2008. They’re made using software created in Processing that allows gestural manipulation of photographic images - resulting in these rather densely textured prints.

Cast: Daniel Hirschmann

Build of an image from the Engine series of prints. I’ll be showing them at an exhibition at the Resolution Gallery in Johannesburg, opening on July 10th 2008. They’re made using software created in Processing that allows gestural manipulation of photographic images - resulting in these rather densely textured prints.

Cast: Daniel Hirschmann

dancing.recursives.project.
2006.
more information:
movope.de/en/dancingrec.html

Cast: MOVOPE PROD.

An installation we (Jason Bruges Studio) built for Veuve Cliccquot as their artist in residence. The video demonstrates the software written that receives a number of video feeds and tracks the movement of the polo players around the field. Their relative position effects the rotation of a grid of flags.

Cast: Daniel Hirschmann

An installation we (Jason Bruges Studio) built for Veuve Cliccquot as their artist in residence. The video demonstrates the software written that receives a number of video feeds and tracks the movement of the polo players around the field. Their relative position effects the rotation of a grid of flags.

Cast: Daniel Hirschmann

Growing Leaves.

Cast: Koki IBUKURO

Interfacing a Scalextric Digital Slot Car set with Processing. This basic sketch is a proof of concept that data can be retrieved from the track. Now to play with the numbers and create some interesting stuff!

project32.wordpress.com

Music: Radiohead-House of Cards

Cast: Derek Olson

For Ignite NYC, I made a five minute presentation demonstrating basic programming concepts, as illustrated in Processing. The point: basic code literacy is as important today as basic arithmetic knowledge, and there’s no reason to be afraid — by working with code visually, you can learn to program, even with “advanced” concepts like object oriented code.

I’ll elaborate on this more for those not there, but if you did make the presentation, these additional code examples should be helpful (in case you missed some of what I was saying in the 15 seconds allotted each slide!)

Referenced Code Examples

Putting something on the screen: Using commands like “line” means everything you do can give you immediate visual response. Line does what it sounds like it does, and takes four simple arguments: x and y coordinates for the start point and end point.

line(0,0,200,200);

An interactive line: Add a draw() loop, and the line you draw becomes interactive, working with the mouse.

void setup() {
  size(400,400);
}
void draw() {
  background(255); //try moving this line to setup and watch what happens!
  line(0,0,mouseX,mouseY);
}

Make values visible: The numbers can also be meaningful values — in this case, from the internal clock.

void setup() {
  size(400,400);
  strokeWeight(50);
  strokeCap(SQUARE);
}

void draw() {
  smooth();
  background(255);
  line(100,0,100,(hour()/24.0)*height);
  line(200,0,200,(minute()/60.0)*height);
  line(300,0,300,(second()/60.0)*height);
}

Variables: Using variables in place of fixed number values allows you to adjust that value — over time for animation, to transform the value aesthetically, and to experiment with how code works.

In fact, the best way to start to figure out code — even before you’re sure how it works — is often to start messing around with values. Sometimes “breaking” code you don’t understand can be a great learning experience. For instance, see what happens when students start to “mess up” the game Breakout to transform it aesthetically and make new art.

Changing values can also help create surprise. You don’t have to hook up variables the way someone would expect. Watch what happens when you move mouseX and mouseY with our interactive line:

void setup() {
  size(400,400);
}

void draw() {
  background(200);
  line(mouseY,height/2,width/2,mouseX);
}

Loops: Seeing a loop happen — even a simple one — illustrates the way the process of iteration can work in more complex problems.

int numOfLines = 10;
int distance = 10;

size(200,200);
background(0);
stroke(255);
strokeWeight(3);

int yPos = 20;
for(int i=0; i<numOfLines; i++) {
  line(20,yPos,width-20,yPos);
  yPos += distance;
}

//bonus!
/*
int yPos = 20;
for(int i=0; i<numOfLines; i++) {
  line(20,yPos,width-20,yPos);
  yPos += distance;
  distance += 2;
}
*/

Loops and arrays: Using arrays (lists) with loops can help to simplify code, even in a simple example — loops and lists are a natural match for one another, since the former lets you iterate through the latter.

int[] circles = {170,113,78,30,13};
size(400,400);
background(150);
noStroke();
smooth();

for (int i=0;i<circles.length;i++){
  fill(random(0,255),random(0,255),random(0,255));
  ellipse(width/2,height/2,circles[i],circles[i]);
}

Loops within loops: You can also place a loop inside a loop. What’s that mean? It helps to see the result.

int[] circles = {170,113,78,30,13};
size(400,400);
background(150);
noStroke();
smooth();

for (int j=0;j<4;j++) {
  for (int i=0;i<circles.length;i++){
    fill(random(0,255),random(0,255),random(0,255));
    ellipse((width/4)*j,(height/4)*j,circles[i],circles[i]);
  }
}

You can extend the loops within loops concept to more involved iteration, such as iterating through columns, then rows — essential to processing the individual pixels in an image.

Java is quick enough for doing this with smaller images and even video, though for better performance, it’s also possible to perform some tasks using shaders on the GPU, thanks to Processing’s support for OpenGL. (Image processing, video processing, and OpenGL are best left to a separate discussion!)

Functions can be understood as recipes. In pseudo-code:

makes cake "Cakemaker" (eggs, flour, ingredients, etc...) {
  step 1
  step 2
  step 3
  return cake, serves 8
}

Objects: Object-oriented programming may seem mystical, but it’s really just a way to better organize code functions. For instance, in the case of the cake, we might consider what the attributes of a cake are, what can be done to it (make a cake, eat a cake, throw a cake at someone’s face), and then organize it relative to smaller categories of related things (cupcakes) and bigger categories of things (dessert).

In visual terms, that allows us to create fast, readable, powerful systems for visual expression, like particle systems. In the included Processing example Topics > Simulate > MultipleParticleSystem, for instance, you’ll see particles and systems of particles defined as objects.

Code for Making the Presentation

For Ignite, I wrote a quick Processing sketch that allowed me to quickly generate the slides I would use. The event needed a PowerPoint file, but I could at least output images to drop into another program for PPT export (hence the saveFrame() function, which saves image files). And for my own purposes, I don’t even need PowerPoint.

Note that in addition to the Processing file, the data folder contains:

• image assets
• fonts (generated in Processing with Tools > Create font…
• a text file with the text for the slides

To create the text file, I simply separated bullets with the “@” character and put a tab between titles and body text. The split() command in Processing then divides up that text into necessary Strings. So, for instance, the first slide looks like this:
visual code literacy Code literacy == math literacy @Technologists, artists (non-specialists)

What this means is that very little code is needed for the presentation — and it’d basically work for any presentation of this template. I saved time versus working in PowerPoint.

You need some Java classes, listed at top, for this to work.

import java.util.*;
import java.text.*;

String[] slides;

PFont font;
int currSlide = 0;

void setup() {
  size(800,600);
  slides = loadStrings("p5_5slides.txt");
  background(0);
  font = loadFont("TimesNewRomanPSMT-14.vlw");
}

void draw() {
  String[] headerString = split(slides[currSlide], TAB);
  String[] bullets = split(headerString[1], '*');
  println("Header: " + headerString[0]);
  for (int i=0;i<bullets.length;i++) {
    println("Bullet: " + bullets[i]);
  }
  saveFrame();
  if(currSlide < slides.length-1) {
  currSlide++;
  }
  else {
    //currSlide = 0;
    stop();
  }
}

Image Credits

In the presentation…

Dinner check by Jim Reynolds:
http://flickr.com/photos/revjim5000/2445394705/

LOGO-generated image graphic created by remi, logo source code created by Arbol01, via Wikimedia:
http://en.wikipedia.org/wiki/Image:Remi_turtlegrafik.png

Apple II image by Florian Eckerstorfer
http://flickr.com/photos/florianeckerstorfer/1870727397/

Breakout art, as featured in Create Digital Motion:
http://createdigitalmotion.com/2007/04/17/breakout-hacked-into-art-in-processing/
See also Game Mod:
http://www.trsp.net/teaching/gamemod/

NOAA climate information from the National Weather Service:
http://www.weather.gov/climate/

Vintage cookbooks by Patrick Q:
http://flickr.com/photos/patrick_q/199986515/

All other images by the author

I borrowed Samuel Bravo Silva’s excellent “cylinder_tree” sketch and ported it to my native GL framework. The video is captured in real-time as I control the camera with the mouse and keyboard. The source for this application is available on my website, carsonbaker.org.

The music is a just mellow jazz backing from freeplaymusic.com.

Cast: Carson Baker

dancing.recursives.project.
more information:
movope.de/en/dancingrec.html

Cast: MOVOPE PROD.

Clément aka Pikilipita wrote me a mail about his new VJ software. Last time we had a feature about Pikilipita VJ for the DS, now he finished PS24VJ (read: Playstation 2 for Video Jockey). He took somehow an inspiration of the Digital Tools header-graphic to illustrate some of his characters. Call it remix, call it sampling or call it homage, but I am pleased, that Clement used some screenie of the Digital Tools header to make and support his own work of art. And just because he is like me into colors, homebrew and stuff like that, I feel very comfortable about this. Check out his work!

PS24VJ is a VJ software running on the Sony Playstation 2 video game system which features most classic VJ softwares options. Leave your laptop home and just take your PS2 with you when going to perform a gig! Invite a VJ to join you on for a jam: PS24VJ can be controlled by two VJ simultaneously!

You will need a Playstation 2, a PC with some recent Windows OS and Quicktime 7.5, Swap Magic 2.6 and DVD, as well as a USB memory stick. Your graphic and video files will then be converted into a format with the funny name “Kouky video format“, he developed himself.

He also setup an interesting kind of “business model” for his homebrewed application. You can get a copy of the software if you donate any amount of money. It can be less, but it can also be more - you choose! He told me, that donations so far were between 30 and 100 Euros so far. This is a somehow pleasing way, transforming the good old idea of shareware into the present. Why not spending Clément some bucks for his coffee and the effort he made, while you are adding some aesthetic value to your VJ sets and most of all your hanging around at home for pleasure?

A demonstration video of PS24VJ is available here.