PR Introduction

Symo's Design Portfolio

Introduction ...

Processing is a programming language and development environment for interactive media. The online community has since 2001 evolved into a development tool for professionals although it was originally created to teach computer programming fundamentals within a visual context. Currently, tens of thousands of individuals use processing including students, artists, and designers to name few.

Below I have inserted an example of what can be created using processing.org and this is called "Fancy FFT Effect" by Erin RobotGrrl. The code used to create the interactive piece is to the right, should you want to try it for yourself.

// Fancy FFT of the song
// Erin K 09/20/08
// RobotGrrl.com
// ------------------------
// Based off the code by Tom Gerhardt
// thomas-gerhardt.com

import processing.core.*;
import ddf.minim.analysis.*;
import ddf.minim.*;

AudioPlayer jingle;
FFT fftLog;

int lastPosition;
int canvasW = 1024;
int canvasH = 600;
int baseLine = 700;
int sampleCount = 0;
int sizew = 20;
int sizeh = 15;

void setup() {
size(canvasW, canvasH);
background(0);
Minim.start(this);
jingle = Minim.loadFile("BristleBot.mp3");
fftLog = new FFT(jingle.bufferSize(), jingle.sampleRate());
fftLog.logAverages(22, 3);
fftLog.window(FFT.HAMMING);
jingle.loop();
colorMode(HSB, 100);
}

void draw() {
if (jingle.isPlaying() && jingle.position() != lastPosition) {
lastPosition = jingle.position();
fftLog.forward(jingle.mix);
ellipseMode(CENTER);
smooth();
noStroke();
colorMode(HSB, 100);

for(int i = 0; i < fftLog.avgSize(); i++) {
if(i < fftLog.avgSize() - 29) {
fill(color(0,0,0,20));
rect(0,0,canvasW,canvasH);
}

float amp = sqrt(sqrt(fftLog.getAvg(i)))*150;
float h = i * 100/fftLog.avgSize();
h -= 10;
h = 100 - h;
float s = 70;
float b = amp/3 * 100;
float a = 100;
fill(color(h,s,b,a));

float x = i*24 + 150;
float y = canvasH - amp-50;
ellipse(x, y, sizew, sizeh);
}
}
}

void stop()
{
jingle.close();
super.stop();
}

To see more work from Erin RobotGrrl, visit her website:

For more examples of what you can achieve using processing.org please follow the following link:

The Code: