Category: Uncategorized

Looking Outwards

Project that inspired me: “The Gary” by V Squared Labs

I’m very interested in audio-visualization, so I was really excited to stumble upon one of V Squared Labs new projects they made for Dillon Francis (DJ). The video shows VSL’s process of design and production of a DJ booth that will be used in Dillon Francis’s shows. It is inspiring to see a group of people collaborate to create an immersive and overwhelming concert experience. The intensity and mind-blowing factor of visualizations at concerts continues to increase at every show that I attend, and I want to be a person who continues enhancing audio/visual experiences for concert-goers.

http://vsquaredlabs.com/project/dillon-francis-the-gary/

Project that surprised me: Infected Mushroom 3D experience – V Squared Labs

The immersive experience mentioned in the previous project is found whole-heartedly in V Squared Lab’s stage design for Infected Mushroom. The 3D visual experience is so powerful. Projection mapping is designed around 2 DJ ‘orbs’ on either side of the stage. The visuals are absolutely mind-blowing, and puts concert-goers in a completely foreign environment as compared to a concert from 4-6 years ago. This video at (26:00), (1:30), and (7:00) has some nice excerpts.

 

Project that has potential: Mixology by Rob Goodson

This project is also expansive on audio/visual relationships, but in a different context than the last two projects because of the interactive component. This project is projection mapped onto a hand made surface, with controls programed with Arduino. The viewer can use the controls to change the colors and sounds of the installation. I see a lot of different iterations of this project, with possible explorations for the controller component and visualizations.

Alex Clock

Hour Glass

For this prompt, I decided to crake an hour glass looking structure that counts the seconds in red, the minutes in yellow and the hours (0-12) in blue. I used smooth progressive rectangle code in the example and multiplied it and flipped it vertically in my version. For some reason I lost the function of the rectangles resting when I transferred it into my hourglass structure. I originally wanted to crate a particle falling hourglass that gads small particles of sand fall through a hole and once the sand reached a certain number would combine and turn into a larger different color sand particle for the minute and then when 60 min sand particles combined, they would turn into a larger particle for the hour.

int prevSec;
int millisRolloverTime;
 
//--------------------------
void setup() {
  size(400,400);
  background(80);
  millisRolloverTime = 0;
}
 
//--------------------------
void draw() {
  strokeWeight(25);
  stroke(100,70,20);
  line(100,50, 300,50);
  line(100,350, 300,350);
  strokeWeight(3);
  line(120,50,120,350);
  line(280,50,280,350);
  int H = hour();
  int M = minute();
  int S = second();
  if (prevSec != S) {
    millisRolloverTime = millis();
  } 
  prevSec = S;
  int mils = millis() - millisRolloverTime

  float secondsWithFraction = S + mils/1000.0; 
  float minuetesWithFraction = M;
  float hourWithFraction = H;
  float rectHeightSec = map(secondsWithFraction,   0,60, 0,277);
  float rectHeightMin = map(minuetesWithFraction, 0,60, 0,277);
  float rectHeightHr = map(hourWithFraction, 0,12, 0,100);
  noStroke(); 
  fill(150,0,0); 
  rect(140,62, 20, rectHeightSec); 
  fill(150,120,0);
  rect(170,62, 35, rectHeightMin);
  fill(0,0,150);
  rect(220,62, 50, rectHeightHr);
}

LOOKING OUTWARDS

max/msp/jitter

Andrew Reed Miller is a professional musician turned instillation and media artist who uses string instruments in his work.

Supercanon uses vid display and audio loops

The computer must sense when he is about to play and when the phrase ends and automatically records the video and audio and plays each one on the tiled screen on a loop.

 

I like this because it’s live and musical. This is the kind of stuff i would do in middle school with my choir music on a friday night, minus the visual aspect. I used to try to loop a tiny ukulele part for a whole song because I wanted to record it and I was really bad at ululele (still am). Im excited to get to play with music.

At a Loss

This morning I, realized I had been spending way too much money. I began to relate my spending habits with the days of the week and realized that tracking the amount of money I had spent would be a perfect way for me to tell how far along into the week we are. Originally I aimed to make this in java processing, but python was much more receptive to the list structure I wanted to use, so I switched to python mode.

Here is a snapshot of September 24th at 4:44
WednesdayOctFirst444

And here is a snapshot of today, October 1st at 4:45
WednesdayOct8445

sun = []
mon = [10.56, 9.10, 19.68, 5.62, 7.39]
tue = [7.27, 6.75, 8.85, 7.39]
wed = [7.39, 7.39, 2.85]
thu = [2.00, 6.75, 13.75]
fri = [6.75, 9.08, 9.08]
sat = [7.27, 6.75, 8.85, 7.39]

sunTot = 0
monTot = 0
tueTot = 0
wedTot = 0
thuTot = 0
friTot = 0
satTot = 0

sunAvg = 0
monAvg = 0
tueAvg = 0
wedAvg = 0
thuAvg = 0
friAvg = 0
satAvg = 0

weekTot = 0
weekAvg = 0

sunLoss = 0
monLoss = 0
tueLoss = 0
wedLoss = 0
thuLoss = 0
friLoss = 0
satLoss = 0

lossList = []

todayTotal = 0
lossPerSecond = 0

dayLoss = 0

previousDayLoss = 0

startingCash = 0

totalLoss = 0
currentCash = 0

def setup():
    size(800,300)
    startingCash = 240 #Dollars
    initialize() 
    previousDayLoss = cashUsed()
    
def initialize():
    sunTot = total(sun)
    monTot = total(mon)
    tueTot = total(tue)
    wedTot = total(wed)
    thuTot = total(thu)
    friTot = total(fri)
    satTot = total(sat)

    weekList = [sunTot, monTot, tueTot, wedTot, thuTot, friTot, satTot]
    weekTot = total(weekList)

    sunAvg = sunTot / weekTot
    monAvg = monTot / weekTot
    tueAvg = tueTot / weekTot
    wedAvg = wedTot / weekTot
    thuAvg = thuTot / weekTot
    friAvg = friTot / weekTot
    satAvg = satTot / weekTot
    weekAvg = weekTot / 7.0

    sunLoss = sunAvg * startingCash
    monLoss = monAvg * startingCash
    tueLoss = tueAvg * startingCash
    wedLoss = wedAvg * startingCash
    thuLoss = thuAvg * startingCash
    friLoss = friAvg * startingCash
    satLoss = satAvg * startingCash
    
    lossList = [sunLoss, monLoss, tueLoss, wedLoss, thuLoss, friLoss, satLoss]
    
    todayTotal = lossList[dayOfWeek()]
    lossPerSecond = todayTotal / 86400
    
    
def draw():
    background(findBg())
    dayLoss = ((((hour() * 60) + minute()) * 60) + second()) * lossPerSecond
    totalLoss = previousDayLoss + dayLoss
    currentCash = startingCash - totalLoss
    printCash()

def total(alist):
    total = 0
    for i in alist:
        total += i
    return total

def dayOfWeek():
    # 5 is number of days into 2014 for sunday
    daystotal = (365*(year() - 1)) + (int(floor((year()-1)/4))) -(int(floor((year() - 1)/100))) + (int(floor((year() - 1)/400))) + day()
    return daystotal % 7

def week():
    return month() * 4 + day() % 7 

def cashUsed():
    w = week()
    d = dayOfWeek()
    daysElapsed = (w % 2) * 7 + d - 1 
    loss = 0
    for i in range(daysElapsed):
        loss += lossList[i%7] / 2
    return loss

def findBg():
    return map(255.0 * ((((week() % 2) * 7) + dayOfWeek()) / 14.0),255,0,0,255) \
             + map(hour()+8,24,0,0,18)
             
def printCash():
    textAlign(CENTER)
    cashLeft = "%f" % currentCash
    fill(100)
    textSize(width * .20)
    lost = nfs(totalLoss,3,2)
    text("$"+lost,width*.505, height*.71)
    
    fill(255,0,0)
    stroke(0)
    
    textSize(width * .20)
    lost = nfs(totalLoss,3,2)
    text("$"+lost,width*.5, height*.7)
    
        
    

Clock: The Whoring Hours

approx 12am

A screen shot taken around midday.

The work day in Amsterdam’s Red Light District runs from about 7pm till 3am. This is a sped-up render of a visual clock representing that work period across the world. The image consists of 24 bars, that can be turning on, on or off. Each bar represents a time zone, and there is a small cross on the bar that shares the time zone of the clock (in this case the US east coast). It’s intended as a reminder of what is currently happening across the world, either near or far, and the stories of the people involved. This is a rendering of the change across time sped up:

code:

//The Whoring Hours. This might belong in a sports bar.


// function that handles the drawing of the light. Could be kept 
// within the bar class
void drawBar( int sx, int sy, int ex, int ey, float dx, 
              color lowC, color highC){
  int lr = int(red(lowC));
  int lg = int(green(lowC));
  int lb = int(blue(lowC));
  int dr = int(red(highC)) - lr;
  int dg = int(green(highC)) - lg;
  int db = int(blue(highC)) - lb;
  stroke(lr,lg,lb, int(100*dx));
  strokeWeight(40);
  line(sx,sy,ex,ey);
  stroke(lr + dr/3,lg + dg/3,lb + db/3, int(150*dx));
  strokeWeight(20);
  line(sx,sy,ex,ey);
  stroke(lr + int(dx*2*dr/3),lg + int(dx*2*dg/3),
         lb + int(dx*2*db/3),int(200*dx));
  strokeWeight(7);
  line(sx,sy,ex,ey);
  stroke(lr + int(dr*dx*dx),lg + int(dg*dx*dx),
         lb + int(db*dx*dx),int(255*dx*dx));
  strokeWeight(2);
  line(sx,sy,ex,ey);
  fill(0);
  noStroke();
  rect(sx-20,sy-40,40,40);
  rect(ex-20,ey,40,40);
              }

//class for each of the light bars that represent a time zone
class Light {
  String name;
  int diff;
  int sStart;
  int hStart;
  int sEnd;
  int hEnd;
  int x;
  int y;
  //int alpha;
  //int r;
  float dl;
  
  Light( String tempName, int tempDiff, int tempSS, int tempHS,
         int tempSE, int tempHE, int tempX, int tempY){
    name = tempName;
    diff = tempDiff;
    sStart = tempSS;
    hStart = tempHS;
    sEnd = tempSE;
    hEnd = tempHE;  
    x = tempX;
    y = tempY; 
    dl = 0.0;
  }
  
  //gets the relative brightness (dh) based on time of day and
  //time difference
  void update(int h, float dh){
    int nh = (h + diff) % 24;
    if ((nh >= hEnd) && (nh < sStart)){
      dl = 0.0;
    }  
    else if (nh >= hStart || nh < sEnd){
      dl = 1.0;
    }
    else if (nh == sStart){
      dl = dh;
    }
    else {
      dl = 1-dh;
    }
  }
  
  void display(){
    drawBar( x,y,x,y+200, dl, color(255,0,0),color(255,255,255)); 
    textAlign(CENTER);
    fill(160,190,190);
    text(name,x,y+220);
  }
}

ArrayList<Light> lights;

void setup(){
  size(1200,300);
  lights = new ArrayList<Light>();
  for( int i = -4; i<20; i ++){
    lights.add(new Light("", i, 19,20, 2,3, (i+5)*width/25,50));
  }
}

void draw(){
  int s = second();
  int m = minute();
  int h = hour();
  float dh = float(m)/60 + float(s)/(60*60);
  background(10);
  for (int i = lights.size()-1; i >= 0; i--) {
    Light light = lights.get(i);
    light.update(h,dh);
    light.display();
  }
  fill(200,200,200);
  textAlign(LEFT);
  textSize(15);
  text("The Whoring Hours:",15,30);
  stroke(200,200,200);
  strokeWeight(1);
  line((5*width/25)-5,270,(5*width/25)+5,270);
  line((5*width/25),265,(5*width/25),275);
}

 

Alex One Liner

Screen Shot 2014-10-01 at 4.54.23 PM

For this assignment, I wanted to have a line that would bend with the movement of the mouse. I succeeded by using vectors. However, that was too easy and boring. So, i decided to add more lines that moved with the mouse but were fixed at different angles. I really enjoy the forms and shades created by a gem. I originally had all of the lines move with the mouse however, I re read the prompt and decided to only move one of the lines. I then thought it would be interesting to add a transparency so that the viewer can observe the tonal changes.

void setup() {
 size(400,400); 
}

void draw(){
 background(200);
 
  fill(220);
 beginShape();
   vertex (200,0);
   vertex(height/2+150, height/1.5);
   vertex(200,400);
 endShape(); 
 
 fill(10);
 beginShape();
   vertex (200,0);
   vertex(height/2+70, height/1.5);
   vertex(200,400);
 endShape();   
 
  fill(215);
 beginShape();
   vertex (200,0);
   vertex(height/2+20, height/1.5);
   vertex(200,400);
 endShape();  
 
 fill(255);
  beginShape();
   vertex (200,0);
   vertex(height/2-150, height/1.5);
   vertex(200,400);
 endShape();
 
 fill(150);
 beginShape();
   vertex (200,0);
   vertex(height/2-100, height/1.5);
   vertex(200,400);
 endShape();  
 
  fill(50);
 beginShape();
   vertex (200,0);
   vertex(height/2-50, height/1.5);
   vertex(200,400);
 endShape(); 
  
 fill(100,100,100, 100);
 beginShape();
   vertex (200,0);
   vertex(mouseX, height/1.5);
   vertex(200,400);
 endShape(); 
} 

oneliner

bloggif_542c62b4c4529

As you move the cursor across the screen, the line increases suddenly in size, flooding the screen.

float x; 

void setup () {
  size (400, 400);
  smooth ();
  x = width/2;
  noCursor ();
}

void  draw () {
 
  
  background (200);
  strokeWeight (1);
  stroke (255);
  if (mouseX > x) {
    x += 2 ; 
  }
  if (mouseX < x) {
    x -= 2;
   
  }
  
  line (x, 200, 20, 200);
  
  line (mouseX, mouseY, mouseX, mouseY );
  line (mouseX, mouseY, mouseX, mouseY );
  
 if (mouseX > width/2) {
   strokeWeight (650);
 
 }
 else {
   strokeWeight (1);
 }
 

 
 if (mouseX > width/2) {
   stroke (100);
   strokeWeight (650);
   
    if (mouseX > x) {
    x += 2 ; 
  }
  if (mouseX < x) {
    x -= 2;
   
   
   line (x, 200, 20, 200);
   line (mouseX, mouseY, mouseX, mouseY);
  }
   
 }
 else {
   stroke (255);
   strokeWeight (650);
 }
}

Iterative wallpaper

Screen Shot 2014-09-17 at 8.55.28 PM

 

This is the wallpaper I made for the iterative assignment. Some aspects of this pattern I had fun playing with involved opacities of the shapes, as well as the layering that occurs as the program runs. Unfortunately, I was unable to recover the exact code after my computer died, but I will post the code I used to start, below.

 

// Will Taylor
// Iteration wallpaper

int width = 800; int height = 800;
int fr = 24;

void setup(){
size(width, height);
background(255);

}

void draw(){
background(#FF4D6E);
strokeWeight(5);
stroke(#4DFF6F);

int diam = width/10;
float rad = diam*.75;
//green lines
for (int i = 0; i <=20; i++){
line(0, i*diam/2, width, i*diam);
}
stroke(0);
for (int r = 0; r <= 13; r++){
for (int c = 0; c <= 13; c++){
smooth();
strokeWeight(5);
fill(#FFF300,25); // yellow
ellipse(r*rad, c*rad, diam, diam);
strokeWeight(2);
fill(#008AFF, random(100)); // blue
ellipse(r*rad, c*rad, diam/4, diam/4);
}

}

}

 

 

The Enemies

the enemies virus New Version

 

chaos and order

The Enemy
When given the theme of working with chaos and order, for some reason my mind immediately went back to viruses. I wanted to create a program where on the surface the objects appeared to be ordered and calm but when the user interacted with it became a chaotic frenzy. With that in mind I set out to create the ‘enemies’, viruses that would scramble as the user pressed the screen and moved the mouse from the top of it to the bottom. Honestly my biggest obstacle was creating the actual shape of the virus. I used the createShape() function but really had a difficult time picturing where I would plot the points that made my shape come together. It was a lot of guess work which I found troublesome, especially because for some reason, the tweak mode on processing wasn’t working for my computer. After that I created a loop that repeated the image of the virus over an increment of 100 on the y value, in order to space it out. Then I mapped the movement of the y value on the mouse so that as the user when down it became more chaotic. I used a constraint to make the top of the screen the most static. I also made it so that as long as the mouse wasn’t pressed the viruses won’t move. I did this by creating an if statement that was dependent on the Boolean move which functioned to make the viruses move only if the mouseisPressed function was true.

*EDITED: I created a gif of the project working and also resized the viruses so they are smaller and there are more of them. This change can be seen in the gif and in the code below.

 

//order mouseX= left chaos mouseX is right
float x=0;
float y=0;
float xmove;
float trying;
float trying2;
boolean moving= false;

void setup(){
  size(400,405); 
  
}

void draw(){
  smooth();
  background(255,15,72);
  
 
  xmove= map(0,mouseY,1,height,0);
  xmove= constrain( xmove,1,0);
 
  for( x=0; x< =width*20; x+=100){
    for( y=0; y<=height*20; y+=200){
      
      
        trying= x + xmove*random(-30,30);
        trying2= y+ xmove*random(-30,30);
        
          
if (mousePressed==true){//will run the code as long as the mouse is held down
   
           x=trying;
         y=trying2;
        }
    
  stroke(5);
  
  fill(132,199,44);
  //headvirus
  
 
beginShape();
//triangle 1 top
vertex((x)/3,(y+50)/3);//outsidebeginingline
vertex((x+50)/3,(y+15)/3);
vertex((x+100)/3,(y+50)/3);
vertex((x)/3,(y+50)/3);

//triangle2bottom

vertex((x+50)/3,(y+100)/3);
vertex((x+100)/3,(y+50)/3);

endShape();
line((x+50)/3,(y+15)/3,(x+50)/3,(y+100)/3);

fill(0,0,182);
//bottom virus;
beginShape();
vertex((x+25)/3,(y+100)/3);
vertex((x+75)/3,(y+100)/3);
vertex((x+75)/3,(y+200)/3);
vertex((x+25)/3,(y+200)/3);
vertex((x+25)/3,(y+100)/3);
endShape(); 

stroke(0,0,0);
line((x+25)/3,(y+200)/3,(x+15)/3,(y+215)/3);
line((x+45)/3,(y+200)/3,(x+35)/3,(y+215)/3);
line((x+55)/3,(y+200)/3,(x+65)/3,(y+215)/3);
line((x+75)/3,(y+200)/3,(x+85)/3,(y+215)/3);
    }//inloop
  }//ousideloop
  

}//end draw

 

Wallpaper

Gif of wallpaper Gif of wallpaper

 

wallpaper

Wallpaper

When making this piece I didn’t really have a specific visualization of what I wanted the piece to look like as much as I did a color scheme I wanted to work around. I wanted to create something that was dynamic that worked with the scheme of red, black, yellow and white. What I did first was create an ellipse which I repeated across a boundary of fifty, by fifty using a loop. I did the same thing for the smaller ellipse located inside it. Another thing I added was a series of lines, also created by a for loop. These lines ran from opposite corners of the image, one from a negative section beyond the canvas and another from the width of it. I also made the colors of another series of lines I created-along with the inside circles—running through the bottom left and top right corner of the canvas to change from a random number from 1 to 121 and changed the blue and green value of the stroke, creating different shades of yellow.

 EDITED: I added a moving gif of the wallpaper and also changed the parameters of the circles and lines being drawn so that they aren’t confined to the space which can be seen in the new version of the code below.

import processing.video.*;

void setup(){
 size(500,500);
 background(255,2,14);
frameRate(5);

}

void draw(){

 float cu= random (1,121);

for (int x = 0; x< =width; x+=40){//creating a shape from width minus wall (50) and continues until it reacheds wall(50) 
//meaning 800-50=750 so from 750 up over and over again until it reaches 50
  for(int y = 0; y<height; y+=40){//doing the same thing
  noStroke();
   
    
   fill(0,0,0);
   ellipse(x-1, y-1, 50,50);
   fill(255,cu,0);
   ellipse(x+1,y+1, 15,15);
   
   stroke(5);
   
   line(x,y,-x,-y);//all going towards a negative number somewhere
   stroke(255,255,255);
   line(2*x,2*y,-x,-y);
   stroke(255,cu,cu);
   line(4*y, 4*x,-x,-y);//line four times as much as x and y going to a negative number
   stroke(0,0,0);
   line(width,height,x,y);//lines coming from the end of the screen to x and y
   
   stroke(255,cu*2,cu);
   line(4*width, 4*height,-x,-y);
   
 

    }
  }
}

&nbsp;