# Processing Pixel Dance

I chose to explore what could be done with pixels from uploaded to processing images.

Here is a page from Processing website i studied:

https://processing.org/tutorials/pixels/

The idea of exploding pixels in 3d space looks like the perfect respond to the performance I chose last week.

PImage img;

void setup() {
size(300, 300, P3D);

}

void draw() {
background(0);
for ( int x = 0; x < width;x++) {
for ( int y = 0; y < height;y++) {
int loc = x + y*width; // Pixel array location
color c = img.pixels[loc]; // Grab the color
// Calculate a z position as a function of mouseX and pixel brightness

// the brighter the pixel the more it moves to the front
float z = (mouseX/(float)width) * brightness(img.pixels[loc]) – 300.0;

//float z = (500/(float)width) * brightness(img.pixels[loc]) – 300.0;

// Translate to the location (moves pixel), set fill and stroke, and draw the rect
pushMatrix();
translate(x,y,z);
fill(c);
noStroke();
//rectMode(CENTER);
rect(0,0,1,1);
popMatrix();
}
}
// saveFrame(“pixeldance.jpg”); // saves the image
}

Interactivity with sound library:

One of my interests is ability to translate sounds into visuals. I installed Sound and Minim libraries.

http://code.compartmental.net/minim/audioinput_class_audioinput.html

First, I wanted to use sound input received from computer mic to change opacity of the image – make it blink. That sketch does it –

import ddf.minim.*;

PImage img;

Minim minim;
AudioInput in;
void setup()
{
size(400, 400, P3D);
minim = new Minim(this);

// use the getLineIn method of the Minim object to get an AudioInput
in = minim.getLineIn();
}

void draw()
{
background(0);
stroke(255);
float level = in.mix.level();

tint(255, 255*level);
image(img, 0, 0);

}

Further I tried to combine this idea with last week’s sketch, where pixels created explosive movement by reacting on mouse movement, so this time i decided make them react to sound instead of mouse, here is what I got –

import ddf.minim.*;

PImage img;

//float myOpacity;

Minim minim;
AudioInput in;
float bufferSizeMy;
int i = 0;

void setup()
{
size(400, 400, P3D);
minim = new Minim(this);

// use the getLineIn method of the Minim object to get an AudioInput
in = minim.getLineIn();
}

void draw()
{
background(0);
//stroke(255);
// Begin loop for columns
for ( int x = 0; x < width;x++) {
// Begin loop for rows
for ( int y = 0; y < height;y++) {
int loc = x + y*width; // Pixel array location
color c = img.pixels[loc]; // Grab the color

// myOpacity = map ( abs(in.mix.get(i)), 0, .7, 0, 255);
float level = in.mix.level();

// Calculate a z position as a function of mouseX and pixel brightness
float z = level*5 * brightness(img.pixels[loc]) – 100.0;
// Translate to the location, set fill and stroke, and draw the rect
pushMatrix();
translate(x,y,z);
fill(c);
noStroke();
rectMode(CENTER);
rect(0,0,1,1);
popMatrix();
}
}

}

}

The output is pretty much the same (but controlled with the live sound):