/*
 * 	~~~FrameLooper!~~~
 * 	|||henderson888|||
 *
 *	Loops frames from video input
 *	~ Mousebutton adds a new frame to the loop
 *	~ 'r' key refreshes the loop
 *	~ alter the number of frames in the loop with the 'maxFrames' variable
 *
 */

import processing.core.*;
import codeanticode.gsvideo.*;

public class multiplication extends PApplet {

	private static final long serialVersionUID = 1L;

	GSCapture video;

	// canvas size
	int w = 320;
	int h = 240;
	// resolution of video input
	int vresx = w;
	int vresy = h;
	int numPixels = 0;

	int maxFrames = 20; // max frames in loop - change this to make loop longer

	int frameIndex = 0; // position within the loop
	int loopLength = 0; // number of frames currently in the loop
	int playIndex = 0; // current frame number in the loop

	// array of color values at frameIndex
	int[][] loop = new int[maxFrames][vresx * vresy];

//#########################################
	// setup
	public void setup() {
		size(w, h);
		frameRate(25);

		video = new GSCapture(this, vresx, vresy);
		video.start();
		// fill array
		for (int i = 0; i < maxFrames; i++) {
			for (int j = 0; j < vresx * vresy; j++) {
				loop[i][j] = 0;
			}
		}

		background(0);
		noStroke();

		numPixels = vresx * vresy;
	}

//##########################################
	//called every frame

	// read video input
	public void captureEvent(GSCapture c) {
		c.read();
	}

	// draw
	public void draw() {

		//keep the playIndex within the length of the loop
		if (playIndex < loopLength) {
			playIndex++;
		} else {
			playIndex = 0;
		}

		//load pixels and draw each frame in the loop to the screen
		loadPixels();
		for (int i = 0; i < numPixels; i++) {
			pixels[i] = loop[playIndex][i];
		}
		updatePixels();
	}
//##########################################
	//input

	// calls the addFrame method: adds new frames to the loop
	public void mousePressed() {
		System.out.println("Adding a frame!");
		addFrame();
	}

	// refresh loop
	public void keyPressed() {
		if (key == 'r') {
			loopLength = 0;
		}
	}

//##########################################
	// method to add new frames to the loop
	public void addFrame() {

		// stop loopLength from exceeding maxFrames
		if (loopLength < maxFrames - 1) {
			loopLength++;
		} else {
			loopLength = maxFrames - 1;
		}

		if (frameIndex < maxFrames - 1) {
			frameIndex++;
		} else {
			frameIndex = 0;
		}

		//print the position of the new frame in the loop
		System.out.println("Frame Index: " + frameIndex);

		//load and add pixels to the loop
		video.loadPixels();
		// fill array with pixel[] vals
		for (int i = 0; i < numPixels; i++) {
			loop[frameIndex][i] = video.pixels[i];
		}
		video.updatePixels();
	}
}

Networked Media – Piet Zwart Terminal Sessions

Sh script that enables you to output n number of frames as a gif from a timecoded position on a video file.

Images taken from comedy-horror classic Horror Express.

Inspired by Carsten Nicolai’s Grid Index and Moire Index, and the ambient dynamic screens of Brian Eno, I have been working on creating some generative animations based on simple sinewave manipulations. In this case, a sinewave algorithm manipulates the greyscale value of each pixel in the animation. A secondary sinewave algorithm manipulates the phase position of the first sinewave, as a result producing these very intricate repeat-patterns.

View the animation online here.

Read on for sourcecode

/*henderson[###]*/

float time;
void setup() {
  size(470, 360);
}

void draw() {
  background(255);
  loadPixels();
  for (int i=1; i<width-1; i++) {
    for (int j=1; j<height-1; j++) {
      pixels[j*width+i] = color(sineWave(255, i*j, 10, sineWave(155, i*j, 10, time)));
    }
  }
  updatePixels();
  time+=0.001;
}

float sineWave(float a, float t, float freq, float phase) {
  float sine = (a*(sin(radians(freq*t)+phase)));
  sine = map(sine, -a, a, 0, a);
  return sine;
}

Back in May, a realtime version of my audio/visual software Soundscape[Topology] was installed at In Flux Festival in Limerick, Ireland, hosted by Occupy Space. A disused new development in Limerick’s city centre became a makeshift gallery space, with various exhibitions curated by studios and gallery spaces from around Ireland and Europe taking place over six floors.

Project Statement:
Soundscape[Topology] is an interactive audio/visual artwork built in Processing. The piece makes use of a microphone, which records the ambient sounds of the room into the computer. The custom Processing sketch draws the waveforms of these sounds onto the screen as a three dimensional topology, in an attempt to draw attention to their physicality. Along with this, we see a direct relationship between the macro and the micro: the virtual sonic landscape has an uncanny resemblance to the forms and undulations of the physical topologies around us. From viewing this work, we can see sound as the characteristics of our environment: sinewaves produce low, rolling hill-like forms, while electronic man-made sounds produce more architectural and inorganic shapes.

Statement from Occupy Space:

Occupy Space are proud to present in_flux, a large scale alternative art fair exhibition which brings together ten artist-led project spaces from Ireland, UK and Europe. This temporary hub invites the public and art practitioners to engaging in a weekend of performances, screenings, exhibitions, art viewing and dialogue.

This project considers the model of artist-led spaces, which provide alternative frameworks for art practices and represent communities where ‘doing-it-yourself’ and experimentation are key activities. Artist-led spaces are vital, energetic elements of the visual art fabric of many cities. This exhibition, consisting of pop-up galleries from each artist-led space, makes reference to an non-traditional art-fair format in which non-profit artist-led spaces present exhibitions rather than commercial galleries striving to sell work.

Artist-led spaces participating in in_flux include:

126, Galway
Block T, Dublin
Transmission, Glasgow
Basement Project Space, Cork
Transition, London
Monster Truck, Dublin
Wolfart, Rotterdam
Catalyst, Belfast
SOMA, Waterford
1646, The Hague

Play with the sketch on openprocessing.

This project attempts to visualise the influence Facebook has on Europe’s population of internet users. The data is shown per country – the larger blue circle represents the percentage of the population with internet access, the inner white circle represents the Facebook penetration rate. If the two circles are almost the same size, this indicates that a large proportion of a country’s “online” population also use the social networking site – for example, Iceland, with a fraction under 95% of its population being connected to the internet, has Europe’s highest Facebook penetration rate of almost 61%. In the Netherlands, Poland, and others, Facebook loses out to popular national social networks (such as Hyves in the Netherlands).

There are no figures currently available for the number of Facebook users in The Vatican City (along with some of Europe’s other smallest nations), so questions about the existence of the personal Facebook accounts of Pope Benedict and his aides will have to remain unanswered for now.

The processing sketch makes use of Karsten Schmidt’s ToxicLibs.

Read on for the source code:

//    HENDERSONSIX [2011]
//    FACEBOOK USERS AS A PROPRORTION OF POPULATION WITH INTERNET ACCESS, PER COUNTRY, EUROPE (2010)
//    THIS PROCESSING SKETCH IS RELEASED UNDER A CC-BY-SA LICENSE.
//    FOR MORE INFO, REFER TO http://creativecommons.org/licenses/by-sa/2.0/
//    DATA SOURCED FROM
//    http://www.culturalpolicies.net/web/statistics-participation.php?aid=189&cid=74&lid=en
//
//    Please report ommissions and errors on http://hendersonmedia.wordpress.com/2011/06/24/data-visualisation-facebook-users-as-a-proportion-of-internet-users-europe-2010/

import toxi.geom.*;
import toxi.color.*;
import toxi.physics2d.*;
import toxi.physics2d.behaviors.*;

VerletPhysics2D physics;

Cluster cluster;
PFont infoFont;

void setup() {
  size(900, 600);
  physics = new VerletPhysics2D();
  physics.setWorldBounds(new Rect(0, 0, width, height));

  Vec2D center = new Vec2D(width/2, height/2);
  cluster = new Cluster(random(30, 40), center);
  smooth();

  infoFont = loadFont("Monospaced.plain-12.vlw");
  textFont(infoFont, 12);
}

void draw() {
  physics.update();
  background(255);

  cluster.display();
  cluster.renderText();
  cluster.panel();

  ui();
}

void ui() {
  fill(0);
  textAlign(LEFT);
  text("Facebook Users as a Proportion of the Population with Internet Access, Europe, 2010", 10, 20);
  fill(59, 89, 152);
  ellipse(15, 40, 10, 10);
  fill(0);
  text("Internet Users as a % of Population", 30, 45);
  fill(255);
  strokeWeight(1);
  stroke(59, 89, 152);
  ellipse(15, 55, 10, 10);
  fill(0);
  text("Facebook Users as a % of Population", 30, 60);
  text("r   Refresh", 12, 75);
  text("c   Display Country Names", 12, 90);
  text("Source: http://culturalpolicies.net", 10, height-15);
}

void keyPressed() {
  if (key=='r') {
    setup();
  }
  if (key==' '){
    save(frameCount+".jpg");
    println("saved "+frameCount);
  }
}

void setup() {
  size(900, 600);
  physics = new VerletPhysics2D();
  physics.setWorldBounds(new Rect(0, 0, width, height));

  Vec2D center = new Vec2D(width/2, height/2);
  cluster = new Cluster(random(30, 40), center);
  smooth();

  infoFont = loadFont("Monospaced.plain-12.vlw");
  textFont(infoFont, 12);
}

void draw() {
  physics.update();
  background(255);

  cluster.display();
  cluster.renderText();
  cluster.panel();

  ui();
}

void ui() {
  fill(0);
  textAlign(LEFT);
  text("Facebook Users as a Proportion of the Population with Internet Access, Europe, 2010", 10, 20);
  fill(59, 89, 152);
  ellipse(15, 40, 10, 10);
  fill(0);
  text("Internet Users as a % of Population", 30, 45);
  fill(255);
  strokeWeight(1);
  stroke(59, 89, 152);
  ellipse(15, 55, 10, 10);
  fill(0);
  text("Facebook Users as a % of Population", 30, 60);
  text("r   Refresh", 12, 75);
  text("c   Display Country Names", 12, 90);
  text("Source: http://culturalpolicies.net", 10, height-15);
}

void keyPressed() {
  if (key=='r') {
    setup();
  }
  if (key==' '){
    save(frameCount+".jpg");
    println("saved "+frameCount);
  }
}

class Node extends VerletParticle2D {
  float sz, fsz;
  color fbc;

  Node(Vec2D pos, float _sz, float _fsz) {
    super(pos);
    sz = _sz;
    fsz = _fsz;
    fbc = color(59, 89, 152);
  }

  void display() {
    noStroke();
    ellipseMode(CENTER);
    fill(color(fbc));
    ellipse(x, y, sz, sz);
    fill(255);
    ellipse(x, y, fsz, fsz);
  }

  void selected() {
    strokeWeight(2);
    stroke(255, 0, 0);
    ellipseMode(CENTER);
    fill(color(fbc));
    ellipse(x, y, sz, sz);
    fill(255);
    ellipse(x, y, fsz, fsz);
  }

  boolean showStats() {
    PVector m = new PVector(mouseX, mouseY);
    PVector loc = new PVector(x, y);
    float d = m.dist(loc);

    if (d < (sz/2)) {
      return true;
    }
    else {
      return false;
    }
  }
}

class Cluster {
  ArrayList nodes;
  float di;
  int entryCount = 0;
  String[] dataset;
  String[] country = new String[50];
  float[] netUsers = new float[50];
  float[] fbUsers = new float[50];
  int cindex, index, findex = 0;

  Cluster(float d, Vec2D center) {
    nodes = new ArrayList();
    di = d;
    dataset = loadStrings("fullstats.txt");

    for (int i=0; i<dataset.length; i+=7) {
      String[] cparts = split(dataset[i], '\n');
      country[cindex] = cparts[0];
      cindex++;
    }

    for (int i=4; i<dataset.length; i+=7) {
      String[] parts = split(dataset[i], '\n');

      netUsers[index] = float(parts[0]);
      index++;
    }

    for (int i=5; i<dataset.length; i+=7) {
      String[] fparts = split(dataset[i], '\n');
      fbUsers[findex] = float(fparts[0]);
      findex++;
    }

    for (int i=0; i<dataset.length/7; i++) {
      nodes.add(new Node(center.add(Vec2D.randomVector()), netUsers[i], fbUsers[i]));
    }

    for (int i=0; i<nodes.size(); i++) {
      VerletParticle2D p1 = (VerletParticle2D) nodes.get(i);
      for (int j=i+1; j<nodes.size(); j++) {
        VerletParticle2D p2 = (VerletParticle2D) nodes.get(j);
        physics.addSpring(new VerletMinDistanceSpring2D(p1, p2, (netUsers[i]+netUsers[j])/1.9, netUsers[i]/5000));
      }
    }
  }

  void display() {
    for (int i=0; i<nodes.size(); i++) {
      Node n = (Node) nodes.get(i);
      n.display();
    }
  }

  void renderText() {
    for (int i=0; i<nodes.size(); i++) {
      Node n = (Node) nodes.get(i);
      if (n.showStats()) {
        n.selected();
        noStroke();
        textAlign(LEFT);
        String info = country[i]+'\n'+"Net Access: "+netUsers[i]+"%"+'\n'+"Facebook Users: "+fbUsers[i]+"%";
        fill(0, 155);
        float w = textWidth(info);
        rect(n.x-4, n.y-12, w+8, 54);
        fill(255);
        text(info, n.x, n.y);
      }

      if (keyPressed) {
        if (key=='c') {
          String info = country[i];
          fill(0, 155);
          float w = textWidth(info);
          rect(n.x-4, n.y-12, w+8, 16);
          fill(255);
          text(info, n.x, n.y);
        }
      }
    }
  }

  void panel() {

    for (int i=0; i<nodes.size(); i++) {
      fill(0);
      float countryWidth = textWidth(country[i]);
      Node n = (Node) nodes.get(i);
      if (mouseX > width-countryWidth && mouseX < width) {
        if (mouseY > (i*12)-6 && mouseY < (i*12)+6) {
          n.selected();
          noStroke();
          textAlign(LEFT);
          textSize(12);
          String info = country[i]+'\n'+"Net Access: "+netUsers[i]+"%"+'\n'+"Facebook Users: "+fbUsers[i]+"%";
          fill(0, 155);
          float w = textWidth(info);
          rect(n.x-4, n.y-12, w+8, 54);
          fill(255);
          text(info, n.x, n.y);
          fill(59, 89, 152);
        }
      }
      textAlign(RIGHT);
      text(country[i], width-5, i*12-1);
    }
  }
}

In the exhibition Cloudbusters the two artists search the boundaries of our beliefs, whether the practice is artistic or scientific, evidence of ‘the search’ is what we have for the moment.

For the last three weeks I have been working with curator John De Weerd and the rest of the team at TAG in Den Haag on the production of this show. I was delighted to be able to assist in the realisation of an ambitious and – in my opinion – very successful exhibition. Agnes Meyer-Brandis’ Cloud Core Scanner, Fluid Matter, and their associated documentation, along with Edwin Deen’s piece Liquid Rainbow and one of his collections of flourescent objects are on display until April 24th. Meyer-Brandis will perform her piece Making Clouds, or On the Absence of Weight on Sunday the 20th March at 19.00 at TAG.

For more information, please visit:
TAG
Agnes Meyer-Brandis website
Edwin Deen website
Review of the show on PeoplesForeignExchange blog

Realtime color manipulation from a webcam input using the Nes Colorizer Processing sketch. The footage is of the Stille Verkade in Den Haag.

To continue with the previous week’s theme of low-fi, glitch, and distortion, I have built a small analog synthesizer that produces very unpredictable and noisy sounds as soon as it is turned on. It also has an ultraviolet status led ; ) The circuit is essentially the famous Atari Punk Console (but slightly customised), and uses the 556 timer chip to create some very unusual square waves.

Processing source code. Draws NES colour-palletized webcam input to the screen. Read more about the NES colour palette here. Many thanks to The Almighty Guru site for the NES Hacker wiki entry with the RGB values list.

//HendersonSix NES Colorizer 1.0
//Thanks to the Almighty Guru's NES Hacker Wiki for the RGB List

import processing.video.*;

String[] palette;  //string array to load the palette.txt file
PVector[] colors = new PVector[64];  //256 colors in the palette file
float d;  //variable to store the distance between the NES color and the sampled color

Capture video;

int res=4;  //sets the increment value in the for loops
float mindist = 256;  //set minimum dist to maximum
color nes;  //the color eventually drawn to the screen

void setup(){

  size(640, 480);

  video = new Capture(this, width, height);

  palette = loadStrings("NesPalette.txt");  //text file with RGB values

    //divide each line from the .txt file into R, G, and B values
  for(int i=0; i<palette.length; i++){
    String[] cols = split(palette[i], ',');
    if(cols.length == 3){
      colors[i] = new PVector(int(cols[0]), int(cols[1]), int(cols[2]));
    }
  }
  noStroke();
}

void draw(){

  if(video.available()){
    video.read();

    //loop through the video input
    for(int x=0; x<video.width; x+=res){
      for(int y=0; y<video.height; y+=res){

        color currColor = video.get(x, y);
        //isolate the R, G, and B channels
        int rval = (currColor >> 16) & 0xFF;
        int gval = (currColor >> 8 ) & 0xFF;
        int bval = currColor & 0xFF;
        //store them in a pvector
        PVector curr = new PVector(rval, gval, bval);

        mindist = 256;  //reset minimum distance variable to maximum

        //get the distance between the current sampled color and the nes color palette using the brute force method
        for(int i=0; i<palette.length; i++){
          d = colors[i].dist(curr);
          if(d < mindist){
            mindist = d;  //if there is a new lowest distance, set mindist accordingly
            nes = color(colors[i].x, colors[i].y, colors[i].z);
          }
        }
        fill(nes);  //fill rect with the color from the nes palette
        rect(x, y, res, res);
      }
    }
  }
}

void keyPressed(){
  if(key==32){
    save(frameCount+".jpg");
    println("saved! "+frameCount);
  }
}

Hacked together a processing sketch this afternoon that converts an image or a live video stream from a webcam into the lovely Nintendo Entertainment System colour palette.

The code horizontally and vertically samples every n number of pixels of the video stream or image, and picks the closest available colour from the NES palette. The sample resolution can be set by the user. I’ll post up the source code later this evening when it’s tidied up and commented.

Many thanks to the NES Hacker Wiki for publishing the RGB values of the NES colour palette on their site.