Interactive Authoring : Visual Music

https://vimeo.com/190139926

The concept of this work is play. This program is not just running the code, but you can participate in the music visualization.

With keyboards, you can keep the beat, and move and change the size of the main circle visualizer. With the tablet, you can change the objects’ color and draw particle lines. By using this program, you can visualize your imagination that you got from the music.

The combination of the program and operation by oneself creates the interesting play.

 

This is my Processing Code :

import codeanticode.tablet.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
final static ArrayList<Particle> myParticles = new ArrayList();
color[] colorOptions = {
color(200, 10, 255, 100),//purple
color(200, 55, 255, 100),//yellow
color(10, 25, 245, 100),//green
color(55, 70, 235, 100),//red
color(35, 130, 255, 100)};//blue
int particleSpeed = 0;

Minim minim;
AudioPlayer player;
Tablet tablet;
FFT fft;

float radious = 80;
float mainX = 400;
float mainY = 200;

void setup(){
size(800, 600);
minim = new Minim(this);
player = minim.loadFile(“Dr.Faceless.mp3”, 512);
fft = new FFT(player.bufferSize(), player.sampleRate());
player.play();

ellipseMode(RADIUS);
rectMode(CENTER);
noCursor();
tablet = new Tablet(this);
frameRate(200);}

void draw(){
background(0);
color c1 = color(255-mouseX/2, 255-mouseY/2, 255-mouseX/2);
color c2 = color(mouseX/2, mouseY/2, 205);

//Line
if(keyPressed){
if(key == ‘1’){
background(random(0, 255));
float r=random(0,255);
float g=random(0,255);
float b=random(0,255);
float y=random(0,600);
stroke(r,g,b);
line(0, y, 800, y);}}

//Main
translate(mainX, mainY);
if(keyPressed){
if(key == ‘r’){
mainX = width/2;
mainY =height/3;}
if(key == CODED){
if(keyCode == RIGHT){
mainX = 650;
mainY = 450;}
else if(keyCode == LEFT){
mainX = 150;
mainY = 150;}
else if(keyCode == UP){
mainX = 650;
mainY = 150;}
else if(keyCode == DOWN){
mainX = 150;
mainY = 450;}}}

fft.forward(player.left);
fft.forward(player.right);
stroke(lerpColor(c1, c2, map(player.mix.level(), 0, 0.03, 0, 1)));
strokeWeight(1);
for(int i = 0; i <= fft.specSize() / 2; i += 2){
float angle = HALF_PI – map(i, 0, fft.specSize() / 2, 0, PI) ;
float len = fft.getBand(i) * 30;
line(radious * cos(angle), radious * sin(angle), (radious + len) * cos(angle), (radious + len) * sin(angle));}
for(int i = 0; i <= fft.specSize() / 2; i += 2){
float angle = HALF_PI + map(i, 0, fft.specSize() / 2, 0, PI) ;
float len = fft.getBand(i) * 30;
line(radious * cos(angle), radious * sin(angle), (radious + len) * cos(angle), (radious + len) * sin(angle));}

if(keyPressed){
if(key == ‘r’){
radious = 80;}
if(key == ‘j’){
radious = 150;}
if(key == ‘k’){
radious = 200;}
if(key == ‘l’){
radious = 80;}}

//Particle
for (int i = myParticles.size()-1; i >= 0; i–) {
Particle myParticle = myParticles.get(i);
myParticle.updateParticle();
if (myParticle.isAlive == false) {
myParticles.remove(i);}}

//Beat
if(keyPressed){
if(key == ‘1’){
noStroke();
fill(random(200), random(200), random(200));
ellipse(0, 0, radious, radious);}

if(key == ‘2’){
int y = (int)random(radious-60, radious);
noStroke();
fill(mouseX/2, mouseY/2, 255,150);
ellipse(0, 0, y, y);}

if(key == ‘3’){
int x = (int)random(0, radious);
strokeWeight(0.5);
pushMatrix();
translate(0, 0);
beginShape();
for (int theta = 0; theta < 360; theta++) {
vertex(x * pow(cos(radians(theta)), 3), x * 1.4 * pow(sin(radians(theta)), 3));}
endShape(CLOSE);
popMatrix();}}}

void mouseDragged() {
if(particleSpeed < 5){
particleSpeed++;
}else{particleSpeed = 0;}
myParticles.add( new Particle(mouseX-400, mouseY-300,particleSpeed, colorOptions[int(random(colorOptions.length))]));}

class Particle{
float particleScale = 50;
float particleSpeed = 0;
PVector particlePoint;
color c;
float value;
boolean isAlive = true;

Particle(float startX, float startY, float speed, color tempC){
particleSpeed = speed;
particlePoint = new PVector(startX, startY, tempC);
c = tempC;
value = alpha(c);
stroke(c);
ellipse(particlePoint.x,particlePoint.y, particleScale, particleScale);
fill(c);
ellipse(particlePoint.x,particlePoint.y, particleScale*.75, particleScale*.75);
noFill();
noStroke();}

void updateParticle(){
smooth();
particlePoint.y = particlePoint.y – sin(particleSpeed) * .9;
particlePoint.x = particlePoint.x + cos(particlePoint.x);
if(particleScale > 0){
particleScale–;
}else{isAlive = false;}
stroke(c);
ellipse(particlePoint.x,particlePoint.y, particleScale, particleScale);
fill(c);
ellipse(particlePoint.x,particlePoint.y, particleScale*.75, particleScale*.75);
noFill();
noStroke();}}

void keyPressed(){
if(key == TAB){
if(player.isPlaying()){
player.pause();}
else{player.loop();}}}

void stop() {
player.close();
minim.stop();
super.stop();}

Advertisements

About Yoko

I'm Yoko. I'm an international student from Japan. I love Japanese animation♡
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