Visual Music

A visual music performance. Processing 3 was used to make the program that the performance is done in. The songs used are “Sailing on the Wind” from the Flower OST, and “Through the Fire and Flames” by Dragon Force.

The performance is representative of how music affects my life. It can calm me and help me feel happy (as seen in the light blue sections with the dancing flowers) but can also help me express negative emotions like anger (the dark sections with the rectangles and flame-like lines). Essentially, I see music as a way of swaying my emotions as well as a projection of them.
The code is as follows:


//code for drawing with tablet from

//http://andrescolubri.net/processing/libraries/tablet/examples/BasicDrawing/BasicDrawing.pde
//minim imports
import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer songL;
AudioPlayer songR;
FFT fft;
BeatDetect beat;

//tablet import
import codeanticode.tablet.*;

Tablet tablet;

float size;

boolean music = true;

PImage photo;

public void setup() {
size (640, 640, P2D);

photo = loadImage (“flower.png”);

minim = new Minim(this);
songL = minim.loadFile(“Sailing on the Wind.mp3”, 2048);
beat = new BeatDetect();
fft = new FFT (songL.bufferSize(), songL.sampleRate());
minim = new Minim(this);
songR = minim.loadFile(“Through the Fire and Flames.mp3”, 2048);
beat = new BeatDetect();
fft = new FFT (songR.bufferSize(), songR.sampleRate());

tablet = new Tablet (this);

beat = new BeatDetect();

size = 50;
}

public void draw () {
noCursor();
background (0);
smooth();

songL.play();
songR.play();

if (music == false) {
songL.mute();
songR.unmute();
}

if (music == true) {
songL.unmute();
songR.mute();
}

if (mouseButton == LEFT) {
music = false;
noStroke();
fill (201, 0, 51, 50);
//rect (100, 100, 50, 50, tablet.getPressure());

for (int i = 0; i < songR.bufferSize()-1; i++) {
//metal line
stroke (255, 0, 0,100);
line (i, 135+ songR.left.get(i)*150, i+1, 160 + songR.left.get(i+1)*150);
stroke (255, 0, 0);
line (i, 160+ songR.left.get(i)*150, i+1, 185 + songR.left.get(i+1)*150);
stroke (255, 128, 0);
line (i, 185+ songR.left.get(i)*150, i+1, 210 + songR.left.get(i+1)*150);
stroke (255, 200, 0);
line (i, 210+ songR.left.get(i)*150, i+1, 260 + songR.left.get(i+1)*150);
stroke (255, 255, 204);
line (i, 260+ songR.left.get(i)*150, i+1, 310 + songR.left.get(i+1)*150);
stroke (255, 200, 0);
line (i, 310+ songR.left.get(i)*150, i+1, 350 + songR.left.get(i+1)*150);
stroke (255, 102, 102);
line (i, 350+ songR.left.get(i)*150, i+1, 365 + songR.left.get(i+1)*150);
stroke (200, 102, 255);
line (i, 365+ songR.left.get(i)*150, i+1, 380 + songR.left.get(i+1)*150);
stroke (0, 0, 204);
line (i, 420+ songR.left.get(i)*150, i+1, 440 + songR.left.get(i+1)*150);
}
} else if (mouseButton == RIGHT) {
music = false;
noStroke();
fill (201, 0, 51, 80);
rect(200, 50, songR.left.get(1)*550, songR.right.get(1)*550);
rect(100, width, songR.left.get(1)*550, songR.right.get(1)*550);
rect(width, 100, songR.left.get(1)*550, songR.right.get(1)*550);
rect(width-100, width-100, songR.left.get(1)*550, songR.right.get(1)*550);
rect(100, 350, songR.left.get(1)*550, songR.right.get(1)*550);
} else {
music = true;
background (135, 206, 250);
noStroke();
}

if (music == true) {
for (int i = 0; i < songL.bufferSize()-1; i++) {

beat.detect (songL.mix);
imageMode(CENTER);
if ( beat.isOnset() ) size = 200;
}
//mid
image (photo, mouseX, height/2, size, size);
if (size > 50) {
size = size – 4;
}
//top left
image (photo, mouseX-150, mouseY-150, size, size);
if (size > 50) {
size = size – 4;
//top right
}image (photo, mouseX+150, mouseY-150, size, size);
if (size > 50) {
size = size – 4;
//bottom right
}image (photo, mouseX+150, mouseY+150, size, size);
if (size > 50) {
size = size – 4;
//bottom left
}image (photo, mouseX-150, mouseY+150, size, size);
if (size > 50) {
size = size – 4;
}
}
}

Advertisements
This entry was posted in Interactive Authoring, Time-Based and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s