Interactive Authoring : Final Project

 

The music I used: Maze of Life, the theme song of PersonaQ

For the final project, I did music visualization. Visual music is sometimes called color music. It refers to the use of musical structures in visual imagery. I expressed my imagination that I got from the song I used for this project, “Maze of Life.” Through this visualization, I tried to express complications and excitement. My flat and bright use of color is inspired by “Synchromy,” created by Norman McLaren. By using his use of color on complicated figures, I expressed both difficulty and liveliness. At the climax of the song, I completely changed the scene to express excitement and fun as the lyric said. I matched the melody and movie to highlight the song’s pleasant flow.

Processing Code:

import codeanticode.tablet.*;
import ddf.minim.*;
import ddf.minim.analysis.*;

int counter;
int X;
int waveH = 100;
PFont font;
ArrayList<Triangle> triangles;
PImage img;

float MAX_VEL = 5;
float MAX_SIZE = 8.0;
ArrayList<Particle> particles;
ArrayList<Flow> flows;

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

void setup(){
size(800, 600);
smooth();
frameRate(20);
noCursor();

font = createFont(“Arial”, 20);
textFont(font);

minim = new Minim(this);
player = minim.loadFile(“maze_of_life.mp3”, 1400);
player.play();

tablet = new Tablet(this);

triangles = new ArrayList<Triangle>();
Triangle root = new Triangle();
triangles.add(root);
for(int i = 0; i < 20; i++){
Triangle tri = triangles.get(triangles.size() – 1);
triangles.add(tri.makeChild());}

particles = new ArrayList<Particle>();

flows = new ArrayList();
for(int i = 0; i < 100; i++){
flows.add(new Flow());}}

void draw(){
if(counter>=0&&counter<=56){
noStroke();
background(255, 110, 110);//red
fill(255, 175, 120);//orange
triangle(400,130,200,470,600,470);
fill(255, 255, 125);//yellow
circlesR(400,130,200,470,600,470,2);}

if(counter>=57&&counter<=97){
background(255,175,120);//o
fill(255,110,110);//r
triangle(600,160,450,410,750,410);
fill(255,255,125);//y
triangle(200,160,50,410,350,410);
fill(255,255,125);//y
circlesR(600,160,450,410,750,410,2);
fill(255,110,110);//r
circlesR(200,160,50,410,350,410,2);}

if(counter>=98&&counter<=104){
background(255,175,120);//o
fill(255,255,125);//y
triangle(600,160,450,410,750,410);
fill(255,110,110);//r
triangle(200,160,50,410,350,410);
fill(255,110,110);//r
circlesR(600,160,450,410,750,410,2);
fill(255,255,125);//y
circlesR(200,160,50,410,350,410,2);}

if(counter>=105&&counter<=112){
background(255,175,120);//o
fill(255,110,110);//r
triangle(600,160,450,410,750,410);
fill(255,255,125);//y
triangle(200,160,50,410,350,410);
fill(255,255,125);//y
circlesR(600,160,450,410,750,410,2);
fill(255,110,110);//r
circlesR(200,160,50,410,350,410,2);}

if(counter>=113&&counter<=165){
background(255, 255, 125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);}

if(counter>=166&&counter<=207){
background(255,255,125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
triangle(260,280,540,280,400,510);
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);
fill(255,175,120);//o
circlesR(260,280,540,280,400,510,2);}

if(counter>=208&&counter<=214){
background(255,255,125);//y
fill(255,110,110);//r
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,175,120);//o
triangle(260,280,540,280,400,510);
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);
fill(255,110,110);//r
circlesR(260,280,540,280,400,510,2);}

if(counter>=215&&counter<=222){
background(255,255,125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
triangle(260,280,540,280,400,510);
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);
fill(255,175,120);//o
circlesR(260,280,540,280,400,510,2);}

if(counter>=223&&counter<=385){
translate(width / 2, height / 2);
rotate(frameCount * 0.09);
for(Triangle tri: triangles){
tri.display();}
for(Triangle tri: triangles){
tri.update();}
if(triangles.get(0).radious > 1500){
triangles.remove(0);
triangles.add(triangles.get(triangles.size() – 1).makeChild());}}

if(counter>=386&&counter<=387){
background(250,10,10);}

if(counter>=388&&counter<=605){
if(mousePressed){
pushMatrix();
translate(mouseX, mouseY);
float hue = random(360);
fill(hue, 100, 100);
noStroke();
int dropNum = int(map(random(1), 0, 1, 700, 1000));
for(int i = 0; i < dropNum; i++){
float diameter = pow(random(1), 20);
float distance = sq((1.0 – pow(diameter, 2)) * random(1));
float scaledDiameter = map(diameter, 0, 1, 1, 30);
float scaledDistance = map(distance, 0, 1, 0, 300);
float radian = random(TWO_PI);
ellipse(scaledDistance * cos(radian), scaledDistance * sin(radian), scaledDiameter, scaledDiameter);}
popMatrix();}}

if(counter>=606&&counter<=607){
background(255,250,120);}

if(counter>=608&&counter<=798){}

if(counter>=799&&counter<=820){
background(0); }

if(counter>=821&&counter<=1260){
background(0);
stroke(random(255),random(255),random(255));
stroke(random(255),random(255),random(255));
for(int a = 0; a < player.left.size()-1; a++){
point(100+player.left.get(a)*waveH,a);
point(700+player.right.get(a)*waveH,a);}

fill(0, 50);
rect(0, 0, width, height);
ArrayList<Particle> nextParticles = new ArrayList<Particle>();
for(Particle p: particles){
p.update();
p.display();
if(p.size > 0.1){
nextParticles.add(p);}}
particles = nextParticles;

if(mousePressed){
for(int i = 0; i < random(100); i++){
particles.add(new Particle());}
}else{
for(int i = 0; i < random(2); i++){
particles.add(new Particle());}}}

if(counter>=1261&&counter<=1592){
noStroke();
fill(0, 64);
rect(0, 0, width, height);
for(Flow flow : flows){
flow.display();}

stroke(random(255),random(255),random(255));
for(int a = 0; a < player.left.size()-1; a++){
point(100+player.left.get(a)*waveH,a);
point(700+player.right.get(a)*waveH,a);}}

if(counter>=1593&&counter<=1646){
noStroke();
background(255,255,125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
triangle(260,280,540,280,400,510);
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);
fill(255,175,120);//o
circlesR(260,280,540,280,400,510,2);}

if(counter>=1647&&counter<=1687){
background(255, 255, 125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);}

if(counter>=1688&&counter<=1695){
background(255, 255, 125);//y
fill(255,110,110);//r
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,175,120);//o
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);}

if(counter>=1696&&counter<=1702){
background(255, 255, 125);//y
fill(255,175,120);//o
triangle(400,50,260,280,540,280);
triangle(260,280,120,510,400,510);
triangle(540,280,400,510,680,510);
fill(255,110,110);//r
circlesR(400,50,260,280,540,280,2);
circlesR(260,280,120,510,400,510,2);
circlesR(540,280,400,510,680,510,2);}

if(counter>=1703&&counter<=1755){
background(255,175,120);//o
fill(255,110,110);//r
triangle(600,160,450,410,750,410);
fill(255,255,125);//y
triangle(200,160,50,410,350,410);
fill(255,255,125);//y
circlesR(600,160,450,410,750,410,2);
fill(255,110,110);//r
circlesR(200,160,50,410,350,410,2);}

if(counter>=1756&&counter<=1797){
background(255, 110, 110);//r
fill(255, 175, 120);//o
triangle(400,130,200,470,600,470);
fill(255, 255, 125);//y
circlesR(400,130,200,470,600,470,2);}

if(counter>=1798&&counter<=1802){
background(255, 110, 110);//r
fill(255, 255, 125);//y
triangle(400,130,200,470,600,470);
fill(255, 175, 120);//o
circlesR(400,130,200,470,600,470,2);}

if(counter>=1806&&counter<=1810){
background(255, 110, 110);//r}

counter++;
text(counter, 20, 20);}

void keyPressed(){
if(key == ‘a’){
img = loadImage(“step1.png”);}
if(key == ‘s’){
img = loadImage(“step2.png”);}
if(key == ‘d’){
img = loadImage(“step3.png”);}
if(key == ‘f’){
img = loadImage(“step4.png”);}
tint(random(255), random(255), random(155));
image(img,random(width-100),random(height-100));}

void circlesR(float x1, float y1, float x2, float y2, float x3, float y3, int n) {
triangle((x1+x2)/2,(y1+y2)/2,(x2+x3)/2,(y2+y3)/2,(x3+x1)/2,(y3+y1)/2);
if (n>1) {
circlesR(x1,y1,(x1+x2)/2,(y1+y2)/2,(x1+x3)/2,(y1+y3)/2,n-1);
circlesR(x2,y2,(x1+x2)/2,(y1+y2)/2,(x2+x3)/2,(y2+y3)/2,n-1);
circlesR(x3,y3,(x2+x3)/2,(y2+y3)/2,(x1+x3)/2,(y1+y3)/2,n-1);}}

class Triangle {
float radious;
boolean isUp;
color c;
Triangle(){
radious = 1500;
isUp = true;
c = color(random(20),255,255);}
Triangle(float radious, boolean isUp){
this.radious = radious;
this.isUp = isUp;
c = color(random(255), random(255), random(190));}
Triangle makeChild(){
return new Triangle(radious / 2, !isUp);}
void update(){
radious += radious / 40;}
void display(){
fill(c);
noStroke();
beginShape();
for(int i = 0; i < 3; i++){
float ang = i * (TWO_PI / 3.0);
ang += isUp ? -HALF_PI: HALF_PI;
vertex(radious * cos(ang), radious * sin(ang));}
endShape(CLOSE);}}

class Particle{
PVector loc, vel;
float size;
float decay;
Particle(){
loc = new PVector(mouseX, mouseY);
setVel();
size = 0.0;
for(int i = 0; i < 5; i++){
size += random(MAX_SIZE);}
size /= 5.0;
decay = random(0.95, 0.98);}

void setVel(){
float velSize = 0.0;
for(int i = 0; i < 5; i++){
velSize += random(MAX_VEL);}
velSize /= 5.0;
float velAng = random(TWO_PI);
vel = new PVector(velSize * cos(velAng), velSize * sin(velAng));}

void display(){
fill(lerpColor(color(255, 150, 0), color(255), sqrt(size / MAX_SIZE)), 150);
ellipse(loc.x, loc.y, size, size);}

void update(){
if(random(1) < 0.1){
setVel();}
loc.add(vel);
size *= decay;}}

class Flow{
PVector start;
float len, current;
Flow(){
float x = random(width-200);
float y = map(random(1), 0, 1, 0, height – 150);
start = new PVector(x+100, y);
len = map(random(1), 0, 1, 100, 200);
current = random(len);}

void display(){
float next = current + 5;
stroke(0, 0, 255);
strokeWeight(4);
line(start.x, start.y + current + 0.5, start.x, start.y + next + 0.5);
stroke(255);
strokeWeight(2);
line(start.x, start.y + current, start.x, start.y + next);
if(next > len){
current = 0;
} else {
current = next;}}}

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