Skip navigation

Category Archives: Exercise 1

Above is a short video of my Exercise 1 along with the song for which it was made.

==============================================================

Description:

This interactive applet features colored tiles that can be “played” to a song of the user’s choice, in this case, Disney’s Main Street Electrical Parade.

==============================================================

Controls:

‘1’: Play and/or pause the song.

Left and Right Mouse Click: Large and small white tiles that vary slightly in size and appear where the mouse is clicked.

‘V’,’B’,’N’, and ‘M’: The middle four colored tiles of the applet.

‘A’,’S’,’D’,’F’,’J’,’K’,’L’,’;’: The 16 little colored tiles on the top and bottom of the applet.

==============================================================

Code:

import ddf.minim.*;

AudioPlayer player;

Minim minim;

boolean sound;

int frame;

float shapeSize;

float BBwidth;

float SBwidth;

color bg = color(50,45,45);

color c = color(255);

color c2 = color(255);

color c3 = color(225,75,75);

color c4 = color(200,150,250);

color c5 = color(250,225,100);

color c6 = color(100,250,200);

color c7 = color(100,250,200);

color c8 = color(100,250,200);

color c9 = color(250,225,100);

color c10 = color(250,225,100);

color c11 = color(200,150,250);

color c12 = color(200,150,250);

color c13 = color(225,75,75);

color c14 = color(225,75,75);

void setup(){

size(800,600);

background(bg);

rectMode(RADIUS);

noStroke();

minim = new Minim(this);

player = minim.loadFile(“ElectricalParade2.mp3”, 2048);

}

void draw(){

if(frame == frameCount-1 ||

frame == frameCount-2 ||

frame == frameCount-3 ||

frame == frameCount-4 ||

frame == frameCount-5 ||

frame == frameCount-6 ||

frame == frameCount-7 ||

frame == frameCount-8 ||

frame == frameCount-9 ||

frame == frameCount-10 ||

frame == frameCount-11 ||

frame == frameCount-12 ||

frame == frameCount-13 ||

frame == frameCount-14 ||

frame == frameCount-15 ||

frame == frameCount-16 ||

frame == frameCount-17 ||

frame == frameCount-18 ||

frame == frameCount-19 ||

frame == frameCount-20 ||

frame == frameCount-21 ||

frame == frameCount-22 ||

frame == frameCount-23 ||

frame == frameCount-24 ||

frame == frameCount-25 ||

frame == frameCount-26 ||

frame == frameCount-27 ||

frame == frameCount-28 ||

frame == frameCount-29 ||

frame == frameCount-30 ||

frame == frameCount-31 ||

frame == frameCount-32 ||

frame == frameCount-33 ||

frame == frameCount-34 ||

frame == frameCount-35 ||

frame == frameCount-36 ||

frame == frameCount-37 ||

frame == frameCount-38 ||

frame == frameCount-39 ||

frame == frameCount-40 ||

frame == frameCount-41 ||

frame == frameCount-42 ||

frame == frameCount-43 ||

frame == frameCount-44 ||

frame == frameCount-45 ||

frame == frameCount-46 ||

frame == frameCount-47 ||

frame == frameCount-48 ||

frame == frameCount-49 ||

frame == frameCount-50 ||

frame == frameCount-51 ||

frame == frameCount-52 ||

frame == frameCount-53 ||

frame == frameCount-54 ||

frame == frameCount-55 ||

frame == frameCount-56 ||

frame == frameCount-57 ||

frame == frameCount-58 ||

frame == frameCount-59 ||

frame == frameCount-60){

fill(bg,25);

rect(0,0,800,600);

}

if(sound == true){

player.play();

}

if(sound == false){

player.pause();

}

}

void mousePressed(){

fill(c);

if(mouseButton==LEFT){

rectMode(RADIUS);

shapeSize = random(100,150);

rect(mouseX,mouseY,shapeSize,shapeSize);

}

fill(c2);

if(mouseButton==RIGHT){

rectMode(RADIUS);

shapeSize = random(15,40);

rect(mouseX,mouseY,shapeSize,shapeSize);

}

frame = frameCount;

}

void keyPressed(){

float BBwidth = width/4;

float SBwidth = BBwidth/2;

rectMode(CORNER);

noStroke();

switch(key){

case ‘v’:

fill(c3);

rect(0,100,BBwidth,400);

frame = frameCount;

break;

case ‘b’:

fill(c4);

rect(200,100,BBwidth,400);

frame = frameCount;

break;

case ‘n’:

fill(c5);

rect(400,100,BBwidth,400);

frame = frameCount;

break;

case ‘m’:

fill(c6);

rect(600,100,BBwidth,400);

frame = frameCount;

break;

case ‘a’:

fill(c7);

rect(0,0,SBwidth,100);

rect(0,500,SBwidth,100);

frame = frameCount;

break;

case ‘s’:

fill(c8);

rect(SBwidth,0,SBwidth,100);

rect(SBwidth,500,SBwidth,100);

frame = frameCount;

break;

case ‘d’:

fill(c9);

rect(SBwidth*2,0,SBwidth,100);

rect(SBwidth*2,500,SBwidth,100);

frame = frameCount;

break;

case ‘f’:

fill(c10);

rect(SBwidth*3,0,SBwidth,100);

rect(SBwidth*3,500,SBwidth,100);

frame = frameCount;

break;

case ‘j’:

fill(c11);

rect(SBwidth*4,0,SBwidth,100);

rect(SBwidth*4,500,SBwidth,100);

frame = frameCount;

break;

case ‘k’:

fill(c12);

rect(SBwidth*5,0,SBwidth,100);

rect(SBwidth*5,500,SBwidth,100);

frame = frameCount;

break;

case ‘l’:

fill(c13);

rect(SBwidth*6,0,SBwidth,100);

rect(SBwidth*6,500,SBwidth,100);

frame = frameCount;

break;

case ‘;’:

fill(c14);

rect(SBwidth*7,0,SBwidth,100);

rect(SBwidth*7,500,SBwidth,100);

frame = frameCount;

break;

case ‘1’:

if(sound == false){

sound = true;

break;

}

if(sound == true){

sound = false;

break;

}

}

}

import ddf.minim.*;

AudioPlayer player;

Minim minim;

boolean sound;

int frame;

float shapeSize;

float BBwidth;

float SBwidth;

color bg = color(50,45,45);

color c = color(255);

color c2 = color(255);

color c3 = color(225,75,75);

color c4 = color(200,150,250);

color c5 = color(250,225,100);

color c6 = color(100,250,200);

color c7 = color(100,250,200);

color c8 = color(100,250,200);

color c9 = color(250,225,100);

color c10 = color(250,225,100);

color c11 = color(200,150,250);

color c12 = color(200,150,250);

color c13 = color(225,75,75);

color c14 = color(225,75,75);

void setup(){

size(800,600);

background(bg);

rectMode(RADIUS);

noStroke();

minim = new Minim(this);

player = minim.loadFile(“ElectricalParade2.mp3”, 2048);

}

void draw(){

if(frame == frameCount-1 ||

frame == frameCount-2 ||

frame == frameCount-3 ||

frame == frameCount-4 ||

frame == frameCount-5 ||

frame == frameCount-6 ||

frame == frameCount-7 ||

frame == frameCount-8 ||

frame == frameCount-9 ||

frame == frameCount-10 ||

frame == frameCount-11 ||

frame == frameCount-12 ||

frame == frameCount-13 ||

frame == frameCount-14 ||

frame == frameCount-15 ||

frame == frameCount-16 ||

frame == frameCount-17 ||

frame == frameCount-18 ||

frame == frameCount-19 ||

frame == frameCount-20 ||

frame == frameCount-21 ||

frame == frameCount-22 ||

frame == frameCount-23 ||

frame == frameCount-24 ||

frame == frameCount-25 ||

frame == frameCount-26 ||

frame == frameCount-27 ||

frame == frameCount-28 ||

frame == frameCount-29 ||

frame == frameCount-30 ||

frame == frameCount-31 ||

frame == frameCount-32 ||

frame == frameCount-33 ||

frame == frameCount-34 ||

frame == frameCount-35 ||

frame == frameCount-36 ||

frame == frameCount-37 ||

frame == frameCount-38 ||

frame == frameCount-39 ||

frame == frameCount-40 ||

frame == frameCount-41 ||

frame == frameCount-42 ||

frame == frameCount-43 ||

frame == frameCount-44 ||

frame == frameCount-45 ||

frame == frameCount-46 ||

frame == frameCount-47 ||

frame == frameCount-48 ||

frame == frameCount-49 ||

frame == frameCount-50 ||

frame == frameCount-51 ||

frame == frameCount-52 ||

frame == frameCount-53 ||

frame == frameCount-54 ||

frame == frameCount-55 ||

frame == frameCount-56 ||

frame == frameCount-57 ||

frame == frameCount-58 ||

frame == frameCount-59 ||

frame == frameCount-60){

fill(bg,25);

rect(0,0,800,600);

}

if(sound == true){

player.play();

}

if(sound == false){

player.pause();

}

}

void mousePressed(){

fill(c);

if(mouseButton==LEFT){

rectMode(RADIUS);

shapeSize = random(100,150);

rect(mouseX,mouseY,shapeSize,shapeSize);

}

fill(c2);

if(mouseButton==RIGHT){

rectMode(RADIUS);

shapeSize = random(15,40);

rect(mouseX,mouseY,shapeSize,shapeSize);

}

frame = frameCount;

}

void keyPressed(){

float BBwidth = width/4;

float SBwidth = BBwidth/2;

rectMode(CORNER);

noStroke();

switch(key){

case ‘v’:

fill(c3);

rect(0,100,BBwidth,400);

frame = frameCount;

break;

case ‘b’:

fill(c4);

rect(200,100,BBwidth,400);

frame = frameCount;

break;

case ‘n’:

fill(c5);

rect(400,100,BBwidth,400);

frame = frameCount;

break;

case ‘m’:

fill(c6);

rect(600,100,BBwidth,400);

frame = frameCount;

break;

case ‘a’:

fill(c7);

rect(0,0,SBwidth,100);

rect(0,500,SBwidth,100);

frame = frameCount;

break;

case ‘s’:

fill(c8);

rect(SBwidth,0,SBwidth,100);

rect(SBwidth,500,SBwidth,100);

frame = frameCount;

break;

case ‘d’:

fill(c9);

rect(SBwidth*2,0,SBwidth,100);

rect(SBwidth*2,500,SBwidth,100);

frame = frameCount;

break;

case ‘f’:

fill(c10);

rect(SBwidth*3,0,SBwidth,100);

rect(SBwidth*3,500,SBwidth,100);

frame = frameCount;

break;

case ‘j’:

fill(c11);

rect(SBwidth*4,0,SBwidth,100);

rect(SBwidth*4,500,SBwidth,100);

frame = frameCount;

break;

case ‘k’:

fill(c12);

rect(SBwidth*5,0,SBwidth,100);

rect(SBwidth*5,500,SBwidth,100);

frame = frameCount;

break;

case ‘l’:

fill(c13);

rect(SBwidth*6,0,SBwidth,100);

rect(SBwidth*6,500,SBwidth,100);

frame = frameCount;

break;

case ‘;’:

fill(c14);

rect(SBwidth*7,0,SBwidth,100);

rect(SBwidth*7,500,SBwidth,100);

frame = frameCount;

break;

case ‘1’:

if(sound == false){

sound = true;

break;

}

if(sound == true){

sound = false;

break;

}

}

}

Advertisements

This exercise was about syncing an output with music. For the scope of that project, the processing code doesn’t listen to the music; instead, the interactivity is brought by playing with the keyboard and the mouse:

 – by pressing successively W five time accordingly to the music rhythm, the program will register the music tempo and displays psychedelic bubbles at each beat. Pressing Q will unregister the tempo.

bubbles

 – C will throw random numbers that will move like objects on a pond.

letters

Each of the created objects stay on stage and move towards the audience (each object is actually a particule that evolves in a 3D space), but the user can change the display in the following way:

– V launches the Time Shift, where all the particles are moved back in time (ie in the background) very quickly. It is meant to match momentums in the music.

timeshift

– P and M changes the field of vision of the pseudo 3D engine.

surimpress

– If the right click is pressed on, the image is not redrawn at each call of draw, resulting in a perceived accelerated motion.

– Moving the mouse change the relative position of the camera in the 3D space.

Also the class Particle3D provides an abstraction to develop all kinds of 3D object that can evolve in this space, but I haven’t explore further this possibility.

The music I used was “Anyway You Choose to Give It” by The Black Ghosts, remixed by Boy-8-Bit.

François

Code

I’m still learning Processing so please excuse me if this reeks of tutorial stuff. I did learn a lot and tried to add different visual elements. Here’s a screenshot and code. By the way, the music was “Anyway You Choose to Give It” by The Black Ghosts, remixed by Boy-8-Bit.

Picture 1

int numChars = 26;
color[] colors = new color[numChars];
int keyIndex;
float keyScale;
int rectWidth;

int gx = 15;
int gy = 35;
float leftColor = 0.0;
float rightColor = 0.0;

void setup()
{
size(400, 400);
noStroke();
background(0);
smooth();
keyScale = 400/numChars-1.0;
rectWidth = width/4;
}

void draw()
{
float circles = map(mouseX, 0, 50, 2, 18);
int x = int(random(0, 400));
int y = int(random(0, 400));
if(keyPressed) {
if(key >= ‘A’ && key <= ‘y’) {
if(key <= ‘Y’) {
keyIndex = key-‘A’;
} else {
keyIndex = key-‘a’;
}
fill(millis()%255);
float beginRect = rectWidth/2 + keyIndex*keyScale-rectWidth/2;
rect(beginRect, 0.0, rectWidth, height);
}
if (key == ‘z’) {
setup();
}
}
if (mousePressed) {
ellipse(x, y, circles, circles);
}
}

 

Screen Shot from program

Screen Shot from program

Code Below:

 

 

// Q: mixed rectangles& circles(yellow and purple) on navy
// A: red ellipses
// S: green ellipses
// D: pink backqround change from bottom left
// z: orange background change from bottom left
// X: purple circles from bottom left
// C: pink circles from bottom right
// V: restore blue
// B: white background
float fillSize=0;
float fillSizeZ=0;
float fillSizeX=0;
float fillSizeC=0;
float fillSizeF=0;
float fillSizeQ=0;
float location =width/2;
int numCountA= 0;
int numCountS=0;
void setup(){
  background(36,34,121);
  size(500,500);
  smooth();
}
void draw(){
  for (int i=50; i>0; i–){
    numCountS= numCountS + 16;
    if (numCountS > 100000){
      numCountS=0;
    }
  } 
  // V: restore blue
  if (key == ‘v’ || key == ‘V’) {
    background(36,34,121);
  }
  // B:white background
  if (key == ‘b’ || key == ‘B’) {
    background(255, 50);
  }
  for (int i=0; i<50; i++){
    numCountA= numCountA + 16;
    if (numCountA > 100000){
      numCountA=0;
    }
  } 
  //A:red ellipses
  if (key == ‘a’ || key == ‘A’){
    background(36,34,121);
    noFill();
    stroke(255,0,0);
    strokeWeight(6);
    ellipse(random(000,250),random(00,250), numCountA/1000, numCountA/1000);
  }
  // S:green ellipses
  if(key==’s’|| key==’S’){
    background(36,34,121);
    noFill();
    stroke(0,255,0);
    strokeWeight(10);
    ellipse(random(250,500),random(250,500), numCountS/1000, numCountS/1000);
  }
  // D:pink backqround change from bottom left
  if (key ==’d’|| key ==’D’){
    for (int i=0; i<=100; i++){
      fillSize = fillSize +1;
      if (fillSize ==1500|| fillSize >1500){
        fillSize =0;
      }
    }
    fill(239,30,173);
    noStroke();
    ellipse(0,0,fillSize, fillSize);
    println(fillSize);  
  }
  // z:orange background change from bottom left
  if (key ==’z’|| key ==’Z’){
    for (int i=0; i<=100; i++){
      fillSizeZ = fillSizeZ +1;
      if (fillSizeZ ==1500|| fillSizeZ >1500){
        fillSizeZ =0;
      }
    }
    fill(246,155,38);
    noStroke();
    ellipse(0,500,fillSizeZ, fillSizeZ);
    println(fillSizeZ);  
  }
  // X:purple circles from bottom left
  if (key ==’x’|| key ==’X’){
    for (int i=0; i<=100; i++){
      fillSizeX = fillSizeX +.5;
      if (fillSizeX ==1500|| fillSizeX >1500){
        fillSizeX =0;
      }
    }
    noFill();
    strokeWeight(5);
    stroke(165,38,246);
    ellipse(0,400,fillSizeX, fillSizeX);
    println(fillSizeX);  
  }
  //C:pink circles from bottom right
  if (key ==’c’|| key ==’C’){
    for (int i=0; i<=100; i++){
      fillSizeC = fillSizeC +.5;
      if (fillSizeC ==1500|| fillSizeC >1500){
        fillSizeC =0;
      }
    }
    noFill();
    strokeWeight(5);
    stroke(231,12,223);
    ellipse(400,400,fillSizeC, fillSizeC);
    println(fillSizeC);  
  }
  //Q:mixed rectangles& circles(yellow and purple) on navy
  if (key ==’q’|| key ==’Q’){
    for (int i=0; i<=100; i++){
      fillSizeQ = fillSizeQ +1;
      if (fillSizeQ ==50|| fillSizeQ >50){
        fillSizeQ =0;
      }
    }
    noFill();
    strokeWeight(random(0,6));
    stroke(250,252,64);
    background(36,34,121);
    rect(random(0,60),random(0,100),fillSizeQ, fillSizeQ);
    rect(random(80,300),random(130,400),fillSizeQ, fillSizeQ);
    rect(random(300, 350),random(300,350),fillSizeQ, fillSizeQ);
    stroke(149,131,217);
    ellipse(random(0,500),random(0,500),fillSizeQ, fillSizeQ);
    ellipse(random(400,480),random(400,480),fillSizeQ, fillSizeQ);
    ellipse(random(200,400),random(200,175),fillSizeQ, fillSizeQ);
  }
}
Spots and Light

Spots and Light

I wanted to create a visualization that didn’t have a specific focal point, and one that would not persist without interaction. Thus I have a warping repeated texture of dots with lights “behind” them. I like the mystery here; the dots are always “in plain sight” but you can’t see them without the lights.

Source code, for now, at: http://www.cs.cmu.edu/~jmccann/ex1.zip

http://paulshen.name/sketches/3

Paul Shen

This visualization accompanies “I’d Rather Dance With You” by Kings of Convenience. The objects are simple shapes (circles, “loud” circles, arrows, meteors) with colors drawn randomly from a set of rainbow colors, on a black background, but they are transient so it’s hard to capture a screenshot. I wanted to convey the dancing-ness of the music with fast-moving objects with colorfulness that hopefully reminds people of the disco era. The code can be found here; the input uses numbers 1-8.

// Darren’s Dancing Man

int size_x = 1000;

int size_y = 1000;
int i;

float bodywidth = 75;
float bodyheight = 150;
float L_x = size_x/2 – bodywidth/2;
float L_y = size_y/3;
float R_x = L_x + bodywidth;
float R_y = L_y;
float L_angle1 = 0.0;
float L_angle2 = 0.0;
float R_angle1 = 0.0;
float R_angle2 = 0.0;
float segLength_arm = 50;
float rand_x;
float rand_y;
float rand_col;

void setup() {
size(size_x, size_y);
smooth();
strokeWeight(25.0);
stroke(0, 100);
}

void draw() {
background(25,25,25);
if(keyPressed) {
if (key == ‘z’) {
ellipse(size_x/2,size_y/2-bodyheight/2,500+300,500+300);
if (mousePressed) {
fill(random(255),random(255),random(255));

}
R_angle1 = (mouseX/float(width) – 0.5) * -PI;
R_angle2 = (mouseY/float(height) – 0.5) * PI;

L_angle1 = PI + (mouseX/float(width) – 0.5) * -PI;
L_angle2 = (mouseY/float(height) – 0.5) * PI;

draw_man();
}
if (key == ‘x’) {
ellipse(size_x/2,size_y/2-bodyheight/2,500+125,500+125);
if (mousePressed) {
fill(random(255),random(255),random(255));
}
R_angle1 = (mouseX/float(width) – 0.5) * -PI;
R_angle2 = (mouseY/float(height) – 0.5) * PI;

L_angle1 = PI + (mouseX/float(width) – 0.5) * -PI;
L_angle2 = (mouseY/float(height) – 0.5) * PI;

draw_man();
}
if (key == ‘c’) {
ellipse(size_x/2,size_y/2-bodyheight/2,500 – 50,500 – 50);
if (mousePressed) {
fill(random(255),random(255),random(255));
}
R_angle1 = (mouseX/float(width) – 0.5) * -PI;
R_angle2 = (mouseY/float(height) – 0.5) * PI;

L_angle1 = PI + (mouseX/float(width) – 0.5) * -PI;
L_angle2 = (mouseY/float(height) – 0.5) * PI;

draw_man();
}
i = i +1;
if (i%100 == 0) {
rand_x = random(size_x);
rand_y = random(size_y);
}
ellipse(rand_x,rand_y,100,100);

//if (key == ‘b’) {
// new_rand = random(255);
//}
}
else {
if (mousePressed) {
fill(random(255),random(255),random(255));
}
R_angle1 = (mouseX/float(width) – 0.5) * -PI;
R_angle2 = (mouseY/float(height) – 0.5) * PI;

L_angle1 = PI + (mouseX/float(width) – 0.5) * -PI;
L_angle2 = (mouseY/float(height) – 0.5) * PI;

draw_man();
}

}

void segment(float x, float y, float a, float segLength) {
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
}

void draw_man() {

rect(L_x,L_y,bodywidth,bodyheight);
ellipse(L_x + bodywidth/2, L_y-bodywidth/2,bodywidth/3,bodywidth/2);
pushMatrix();
segment(R_x, R_y, R_angle1, segLength_arm);
segment(segLength_arm, 0, R_angle2, segLength_arm);
popMatrix();

pushMatrix();
segment(L_x, L_y, L_angle1, segLength_arm);
segment(segLength_arm, 0, L_angle2, segLength_arm);
popMatrix();
}

sketches

I wanted to create a watercolor-esque feeling, something very sketchy, and white, and bright. I don’t actually think I am super happy with the direction that I have gone with it, but it is at least aesthetically appealing (to me) While working on it I came up with maybe two or three other concepts that I want to explore. So that is good at least.

The applet is here (with source): http://patrickgagekelley.com/gobbledigook/applet/

Screen captures here: on Flickr

I have two versions of my exercise one because I couldn’t decide if it was better to be able to have all of my different animations going at once, or if they should be separate
The first one works by just moving the mouse:
http://andrew.cmu.edu/user/lpaolett/Exercise1/
The second one works if you click on the different parts. To reset this one hit r
http://andrew.cmu.edu/user/lpaolett/Exercise1ver2/
I have the music on my computer since I don’t know how to upload it.