Processing 1.0 offers many features to provide a visual ease to a coding framework. With its simplified Java-like syntax, users can avoid the hassle of setting up programs and jump right into the graphic design. One particular project that caught my eye was music visualization. Car stereos, iTunes or any media player for that matter usually incorporates this into its program. I would like to implement a 2d version, with color changing frequency bars that ‘bounce’ to the music, or possibly some other form of visualization that oscillates or flows with the music. This is possible by analyzing the raw sound data, a few bytes for each frequency at a given time in a song. With the frequency numbers, lines & shapes can be assigned to follow the frequency values and therefore change with the sound. Although I don’t know how well audio is incorporated into Processing, a 3d version is available on the YouTube website, yet the frame rate is very low and the quality is poor.

Video

final int screenwid = 720;
final int screenhei = 480;

void setup()
{
size(screenwid, screenhei);
noLoop();
}

void draw()
{

for(int i = 0; i < 5; i++) {
triang(int(random(screenwid)), int(random(screenhei)),
int(random(screenwid)), int(random(screenhei)),
int(random(screenwid)), int(random(screenhei)));
}
}

void triang(int x0, int y0, int x1, int y1, int x2, int y2) {
line(x0, y0, x1, y1);
line(x1, y1, x2, y2);
line(x2, y2, x0, y0);
}

//CUBIC BEZIER MOUSE CLICKS
int x0, x1, x2, x3, y0, y1, y2, y3;
int count = 0;
void setup()
{
size(300, 300);
}

void draw()
{

}

void mousePressed()
{
if(count%4 == 0) {
x0 = mouseX;
y0 = mouseY;
point(x0, y0);
}
else if(count%4 == 1) {
x1 = mouseX;
y1 = mouseY;
point(x1, y1);
}
else if(count%4 == 2) {
x2 = mouseX;
y2 = mouseY;
point(x2, y2);
}
else {
x3 = mouseX;
y3 = mouseY;
point(x3, y3);
cubic(x0, y0, x1, y1, x2, y2, x3, y3);
}
count++;
}

void cubic(int x0, int y0, int x1, int y1, int x2, int y2, int x3, int y3)
{
float xB, yB;
for(float t = 0; t < 1; t += .001) {
xB = (1-t)*(1-t)*(1-t)*x0 + 3 *(1-t)*(1-t)*t*x1 + 3*(1-t)*t*t*x2 + t*t*t*x3;
yB = (1-t)*(1-t)*(1-t)*y0 + 3 *(1-t)*(1-t)*t*y1 + 3*(1-t)*t*t*y2 + t*t*t*y3;
point(xB, yB);
}

void setup()
{
size(300, 300);
noLoop();
}

void draw()
{
drawline(100, 100, 200, 200);
quadratic(5, 120, 5, 200, 220, 220);
cubic(30, 20, 80, 5, 80, 75, 30, 75);
}

void drawline(int x0, int y0, int x1, int y1)
{
float xB, yB;
for(float t = 0; t < 1; t += .001) {
xB = (1 - t) * x0 + t * x1;
yB = (1 - t) * y0 + t * y1;
point(xB, yB);
}
}

void quadratic(int x0, int y0, int x1, int y1, int x2, int y2)
{
float xB, yB;
for(float t = 0; t < 1; t += .001) {
xB = (1 - t) * (1 - t) * x0 + 2 * (1 - t) * t * x1 + t * t * x2;
yB = (1 - t) * (1 - t) * y0 + 2 * (1 - t) * t * y1 + t * t * y2;
point(xB, yB);
}
}

void cubic(int x0, int y0, int x1, int y1, int x2, int y2, int x3, int y3)
{
float xB, yB;
for(float t = 0; t < 1; t += .001) {
xB = (1-t)*(1-t)*(1-t)*x0 + 3 *(1-t)*(1-t)*t*x1 + 3*(1-t)*t*t*x2 + t*t*t*x3;
yB = (1-t)*(1-t)*(1-t)*y0 + 3 *(1-t)*(1-t)*t*y1 + 3*(1-t)*t*t*y2 + t*t*t*y3;
point(xB, yB);
}
}

void setup()
{
size(300,300);
noLoop();
}

void draw()
{
drawLine(60, 70, 30, 200);

drawWeb(50);
drawCircle(50, 50, 20);
}

void drawLine(int x0, int y0, int x1, int y1)
{
int temp = 0;
boolean steep = abs(y1 - y0) > abs(x1 - x0);
if(steep)
{
temp = x0;
x0 = y0;
y0 = temp;
temp = x1;
x1 = y1;
y1 = temp;
}
if(x0 > x1) {
temp = x0;
x0 = x1;
x1 = temp;
temp = y0;
y0 = y1;
y1 = temp;
}
int deltax = x1 - x0;
int deltay = abs(y1 - y0);
float error = 0;
float deltaerr = (float)deltay/deltax;
int ystep;
int y = y0;

if(y0 < y1)
ystep = 1;
else
ystep = -1;

for(int x = x0; x <= x1; x++)
{
if(steep)
point(y, x);
else
point(x, y);

error += deltaerr;
if(error >= .5)
{
y += ystep;
error--;
}
}
}

void drawWeb(int n)
{
for(int i = 0; i < n; i++){
line(0, n-i, i, 0);
}
}

void drawCircle(int x0, int y0, int radius)
{
int f = 1 - radius;
int ddF_x = 1;
int ddF_y = -2*radius;
int x = 0;
int y = radius;

point(x0, y0 + radius);
point(x0, y0 - radius);
point(x0 + radius, y0);
point(x0 - radius, y0);

while(x < y) {
if(f >= 0) {
y--;
ddF_y += 2;
f += ddF_y;
}
x++;
ddF_x += 2;
f += ddF_x;
point(x0 + x, y0 + y);
point(x0 - x, y0 + y);
point(x0 + x, y0 - y);
point(x0 - x, y0 - y);
point(x0 + y, y0 + x);
point(x0 - y, y0 + x);
point(x0 + y, y0 - x);
point(x0 - y, y0 - x);
}
}

//Set canvas size
size(300, 300);

//The letter 'M'
line(10, 40, 15, 10);
line(15, 10, 20, 30);
line(20, 30, 25, 10);
line(25, 10, 30, 40);

//The letter 'A'
ellipse(45, 30, 20, 20);
line(55, 20, 55, 40);

//Two 'T's
line(65, 10, 65, 40);
line(60, 20, 70, 20);
line(80, 10, 80, 40);
line(75, 20, 85, 20);

//Stick Face
ellipse(150, 150, 40, 60);
ellipse(140, 140, 10, 8);
ellipse(160, 140, 10, 8);
ellipse(150, 160, 20, 10);

//Stick Body
line(150, 180, 150, 250);
line(150, 250, 140, 285);
line(150, 250, 160, 285);
line(150, 200, 140, 240);
line(150, 200, 160, 220);
line(160, 220, 170, 195);