All posts by Caleb Ferguson

Final Project: Visualizing Sound

 

Guysssss I’m gonna miss y’all. Thank you for a great semester. Friend me on the ‘book, and/or check out ma website to stay in touch!

tuneshot-1338

 

 

Step 1 of ‘the dream’ is complete. The program plays a select set of songs and visualizes the music using a forward fourier transformation (fft). The “.getBand()” command is used to quantify the various aspects of the audio waves.

 

tuneshot-876

As a user, hold down the ‘P’ key to view the menu. It will tell you that you have the option to change the song (with the number keys), the colors of the visualization (keys a through g). You can increase and decrease the intensity of the visualization with the ‘=’ and ‘-‘ keys, respectively. Finally, you can pause the movie with the ‘I’ key and take a screenshot by clicking on the screen. downloadable .zip file – including .mp3’s – here.

 

Worldstar-quality video clip of the in-class demo

 

Code:

import ddf.minim.*;
import ddf.minim.ugens.*; 
import ddf.minim.analysis.*;
import processing.video.*;

int spectrum;
float videoHeight;
float videoWidth;
float threshold;
float multiplier;
PFont font;
StringList playlist;
color ringColor;
color antiColor;

Minim       minim;
AudioPlayer jingle;
FFT         fft;
Capture     video;

void setup()
{
  //video presets
  font = loadFont("MicrosoftTaiLe-Bold-12.vlw");
  video = new Capture(this, 640, 480);
  video.start();
  threshold = 20;

  //sound presets
  minim = new Minim(this);
  jingle = minim.loadFile("bt.mp3", 1024);
  fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );
  spectrum = fft.specSize();
  multiplier = 20;

  //sound-dependant video settings
  videoHeight = ((spectrum - 480)/2)+1;
  videoWidth = ((spectrum - 640)/2)+1;

  //sound-dependant background
  size(spectrum, spectrum);
}

void draw() {

//tracklist, key commands
if (keyPressed) {
  if (key == 'p') {background(255);
                  fill(0);
                  textFont(font, 12);
                  textAlign(CENTER);
                  text("Press 'P' at any time for playlist options, press number keys to change the song:",(width/2), 25);
                  text("1: One Direction - Happily",(width/2),50);
                  text("2: No Doubt - Sunday Morning",(width/2),75);
                  text("3: Beethoven - 5th Symphony",(width/2),100);
                  text("4: Andrew McMahon - Catching Cold",(width/2),125);
                  text("5: DJ Naim - Crispy Hunneds",(width/2),150);
                  text("6: Arctic Monkeys - Do I Wanna Know?",(width/2),175);
                  text("7: Grimes - Oblivion",(width/2),200);
                  text("8: Frank Ocean (feat. Diplo) - Hero",(width/2),225);
                  text("9: Srkrillex - Bangarang",(width/2),250);
                  text("0: Grimes - Genesis",(width/2),275);
                  text("Press a, b, c, d, e, f, and g keys to change the color profile", (width/2), 325);
                  text("Press = to increase the intensity, - to decrease the intensity of the waves", (width/2), 350);
                  text("Press 'I' to pause the current song", (width/2), 375);
                  text("Click on the screen to snap a screenshot!", (width/2), 400);
                  }

//color changer
  if (key == 'a') {ringColor = color(255,0,0); antiColor = color(0,255,0);};
  if (key == 'b') {ringColor = color(0,255,0); antiColor = color(255,0,0);};
  if (key == 'c') {ringColor = color(255,0,0); antiColor = color(0,0,255);};  
  if (key == 'd') {ringColor = color(0,255,0); antiColor = color(0,0,255);};
  if (key == 'e') {ringColor = color(0,0,255); antiColor = color(255,0,0);};
  if (key == 'f') {ringColor = color(0,0,255); antiColor = color(0,255,0);};
  if (key == 'g') {ringColor = color(random(255),random(255),random(255)); antiColor = color(random(255),random(255),random(255));};

//intensity changer
  if (key == '=') {multiplier = multiplier + 5;};
  if (key == '-') {multiplier = multiplier - 5;};

//pause button
  if (key == 'i') {jingle.pause();};

//track changer
  if (key == '1') {jingle.pause();jingle = minim.loadFile("oned.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '2') {jingle.pause();jingle = minim.loadFile("nod.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '3') {jingle.pause();jingle = minim.loadFile("bt.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '4') {jingle.pause();jingle = minim.loadFile("catch.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '5') {jingle.pause();jingle = minim.loadFile("crispy.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '6') {jingle.pause();jingle = minim.loadFile("doi.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '7') {jingle.pause();jingle = minim.loadFile("oblivion.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '8') {jingle.pause();jingle = minim.loadFile("hero.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '9') {jingle.pause();jingle = minim.loadFile("skr.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
  if (key == '0') {jingle.pause();jingle = minim.loadFile("genesis.mp3", 1024);jingle.loop();fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );};
    }

else {
  //launch music analysis
  fft.forward(jingle.mix);

  //video section
  if (video.available()) {
   video.read();
  }
    video.loadPixels();
    image(video,videoWidth, videoHeight);

  //for loop for EQs
  for (int i=0; i < fft.specSize(); i++) {
    float level = fft.getBand(i)*multiplier;
    noFill();
    strokeWeight(3);
    stroke(ringColor,random(100,200));
    //top left & right
    line(i, 0, i, level);line(width - i, 0, width - i, level);
    //bottom left & right
    line( i, height, i, height - level);line( width - i, height, width - i, height - level);
    stroke(antiColor,random(100,200));
    //left top & bottom
    line(0, i, level, i);line(0, height - i, level, height - i);
    //right top & bottom
    line(width, i, width - level, i);line(width, height - i, width - level, height - i);
    //oval
    if (level > 350 && level < 450) {
       strokeWeight(15);
       stroke(ringColor,random(0,150));
       ellipse((width/2),(height/2), level, level*1.2);
    }
  }
  };};

//  screenshot
void mousePressed() {
    saveFrame("tuneshot-###.png");
  }

Rant

In 1965 Gordon E. Moore claimed that computing hardware growth would enable computers to double in speed and other capabilities approximately every two years. In 2014 we find this claim to be roughly correct. Computers have transformed from room-sized to pocket-sized, and their capabilities have grown significantly along the way.

This evolution is occuring faster than I can really keep up with. At work last summer I was researching a computer security company. The litany of acronyms and knotty relationship of computational vocabulary terms showed me that truly understanding how something as apparently simple as email works is no easy task. That week, I took a dive down the rabbit hole and am still falling. I love it. I’m in wonderland.

I love ICM because we are trying to bridge the gap between “tricking electrons” and expressing ourselves. Consider ‘expression’ as the mouth of the rabbit hole, and the “tricked electrons” on the non-linear, opposite end. We are exploring the part of the rabit hole that is most tangible. Phyiscal computing gives us an essential framework for understanding our relationship with the machines.

Computers don’t discriminate based on age, race, or gender. To a computer, all humans look the same until told otherwise.

humanputer

This is both a good and bad thing. Its a bad thing because it makes communicating with a computer difficult. Discovery of the relationship between each others INPUTs and OUTPUTs has a steep learning curve. Losing three hours of my life because I forgot to put a semicolon somewhere is bad.

Yet the pros of this non-discrimination greatly outweight the cons.  Technology is a democratizing force (think TwitterRedditHypeM), which is why Open Source is such a powerful idea. Technology empowers to those willing to learn and particpate, allowing people to self-actualize. Much like the printing press, computers allow more people to add scale to our actions. This is the first era where a teenager can out-muscle a mega corporation with the right tools.

I remain uncertain about what the future holds for the relationship between man and computer. Yet as Moore predicted, this future is arriving at a exponentially faster rate. I think the Matrix trilogy was poignant in suggesting that mishandling our relationship with computers will lead to our slavery. At the same time, films like Her, Cortana from Halo, and Claptrap from Borderlands suggest that humans and computers will become more intimate friends, not enemies. I sleep next to my phone every night, which is more than I can say of any human…

 

Final Project Progress: visualizing sound

Inspired by Alice. The process of turning sound into numbers and numbers into visuals is tough for exactly the reasons we talked about in class. Sound has many aspects to it that change from instant to instant. Fourier Tranformations? Spectrum size? Changes in waves over time? If you think I remember ANY trigonometry, you’re wrong.

Recall my dream for Amon Tobin-style crowdsourced music visuals, tersly summarized below:

badassdj

This weeks I got the basics of minim down. I am exploring use of the getBand(), noise(), and averaging sound bytes over time. The code below plays the very basic “jingle” file so we can observe how changes in the sound of the music are reflected across the soundbytes. Different axis feature different equalizer-type representations of the sound.

Notice how the equalizers tend to have a long-tail situation in terms of frequency.

Screen Shot 2014-04-21 at 12.48.59 PM

My inner economist thinks the next step is to take the (inverse?) natural log of this equalizer value and see how it looks.

import ddf.minim.analysis.*;
import ddf.minim.*;
import processing.serial.*;
import ddf.minim.ugens.*; 

float x; 
float y;
float l1; 
float l2; 
float l3; 
float l4;  
float l5;
float level; 
float average;

Minim       minim;
AudioPlayer jingle;
FFT         fft;

void setup()
{
  float y = 0;
  float x = 0;
  l1 = 0; 
  l2 = 0; 
  l3 = 0; 
  l4 = 0; 
  l5 = 0;
  size(600, 600, P3D);
  smooth();
  colorMode(RGB);

  minim = new Minim(this);

  // specify that we want the audio buffers of the AudioPlayer
  // to be 1024 samples long because our FFT needs to have 
  // a power-of-two buffer size and this is a good size.
  jingle = minim.loadFile("jingle.mp3", 1024);

  // loop the file indefinitely

  jingle.loop();

  // create an FFT object that has a time-domain buffer 
  // the same size as jingle's sample buffer
  // note that this needs to be a power of two 
  // and that it means the size of the spectrum will be half as large.
  fft = new FFT( jingle.bufferSize(), jingle.sampleRate() );
}

void draw()
{
  background(0);

  // perform a forward FFT on the samples in jingle's mix buffer,
  // which contains the mix of both the left and right channels of the file
  fft.forward( jingle.mix );

  for (int i = 0; i < fft.specSize(); i++)
  {
    // draw the line for frequency band i, scaling it up a bit so we can see it
    x+=0.02;
    y+=1;
    float n = noise(x);
    float t = noise(y);
    float p = noise(i);
    pushMatrix();
    stroke(70, 3, 11, 20);
    translate(310, -140);
    rotate(.5);
    fill (60, 170, 205, t*4);
    rect(t*(width)-50, n*height+10, 50*n, height/2*n);
    rect( n*height+10, t*(width)-50, height/2*n, 50*n);
    popMatrix();
    stroke(255);
    level = fft.getBand(i);
    l1 = level;
    //float logLevel = -1/log(level);
    print(average + " | "+ p + "\n");

    if (average <= 12) {
      stroke(50, 160, 200);
      rect(40, 30, 150, 450);
    };

    if (average <= 18 && average >= 12) {
      stroke(50, 160, 200);
      rect(60, 130, 180, 450);
    };

    if (average <= 40 && average >= 18) {
      stroke(50, 160, 200);
      rect(400, 30, 550, 450);
    };

    if (average > 40) {
      stroke(50, 160, 200);
      rect(350, 130, 120, 600);
    };

    line( i, height, i, height - level*50);
    stroke(255);
    line(i, 0, i, p*100);
    line(average, i, 0, i);
    l5 = l4;
    l4 = l3;
    l3 = l2;
    l2 = l1;
    average = 100*((l1 + l2 + l3 +l4 + l5)/5);
  };
}

 

Fuel of the Week

I used data from my Nike FuelBand for this weeks project. “Fuel” is a proprietary unit that measures estimated activity over the course of the day. While “3206 Fuel” is meaningless on its own, this unit is an excellent relative measure of activity.

Fuel of the Week collects Fuel data from a .csv file, groups Fuel earned from every day of the week, and performs some math operations to create what we see below:

FergieFuel

Monday = m, Tuesday = t, Wednesday = w, Thursday = h, Friday = f, Saturday = s, Sunday = u.

Pressing a corresponding key will activate that day of the week. The size AND color of the column correspond to what proportion of weekly activity is attributed to that day (on average). Red = LOW, Green = HIGH. It will also show sample Fuel units from a day on that day of the week.

TIL it’s a good rule of thumb to conceptualize the final product before jumping into the code. This code can probably be made more succinct through use of a couple if statements and for loops.

Download the application here. Here is the code:

//Array of data
String [][] csv;
//sums
float mondaySum; float tuesdaySum;float wednesdaySum; float thursdaySum; float fridaySum; float saturdaySum; float sundaySum;
//proportions
float mondayP; float tuesdayP; float wednesdayP; float thursdayP; float fridayP; float saturdayP; float sundayP;
//cumulants
float mondayC; float tuesdayC; float wednesdayC; float thursdayC; float fridayC; float saturdayC; float sundayC;
//colors for mapping
color mon; color tue; color wed; color thu; color fri; color sat; color sun;
//counter and total for proportions
float counter; 
float total;
//visual presets
PFont font;
PImage swoosh;

void setup() {
//the basics
size(1000,1000);
font = loadFont("CenturyGothic-Bold-48.vlw");
textFont(font,32);
swoosh = loadImage("swoosh.png");

//CSV magic i borrowed from the internet
String lines[] = loadStrings("NikeFuel.csv");
int csvWidth=0;
//calculate max width of csv file
for (int i=0; i < lines.length; i++) {
  String [] chars=split(lines[i],',');
  if (chars.length>csvWidth){
    csvWidth=chars.length;
  }
}
//create csv array based on # of rows and columns in csv file
csv = new String [lines.length][csvWidth];
//parse values into 2d array
for (int i=0; i < lines.length; i++) {
  String [] temp = new String [lines.length];
  temp= split(lines[i], ',');
  for (int j=0; j < temp.length; j++){
   csv[i][j]=temp[j];
  }
  }

// make variables: sum, proportion, cumulants, color maps
for (int i=0; i<csv.length-6; i+=6) {
  counter = counter + i;
  mondaySum = mondaySum + parseInt(csv[i][1]);
  tuesdaySum = tuesdaySum + parseInt(csv[i+1][1]);
  wednesdaySum = wednesdaySum + parseInt(csv[i+2][1]);
  thursdaySum = thursdaySum + parseInt(csv[i+3][1]);
  fridaySum = fridaySum + parseInt(csv[i+4][1]);
  saturdaySum = saturdaySum + parseInt(csv[i+5][1]);
  sundaySum = sundaySum + parseInt(csv[i+6][1]);
  }

total = mondaySum + tuesdaySum + wednesdaySum + thursdaySum + fridaySum + saturdaySum + sundaySum;
mondayP = mondaySum/total;
tuesdayP = tuesdaySum/total;
wednesdayP = wednesdaySum/total;
thursdayP = thursdaySum/total;
fridayP = fridaySum/total;
saturdayP = saturdaySum/total;
sundayP = sundaySum/total;

//cumulants
mondayC = width*mondayP;
tuesdayC = mondayC + width*tuesdayP;
wednesdayC = tuesdayC + width*wednesdayP;
thursdayC = wednesdayC + width*thursdayP;
fridayC = thursdayC + width*fridayP;
saturdayC = fridayC + width*saturdayP;
sundayC = saturdayC + width*sundayP;

mon = color(map(mondayP,.13,.16,255,0),map(mondayP,.13,.16,0,255),0,10);
tue = color(map(tuesdayP,.13,.16,255,0),map(tuesdayP,.13,.16,0,255),0,10);
wed = color(map(wednesdayP,.13,.16,255,0),map(wednesdayP,.13,.16,0,255),0,10);
thu = color(map(thursdayP,.13,.16,255,0),map(thursdayP,.13,.16,0,255),0,10);
fri = color(map(fridayP,.13,.16,255,0),map(fridayP,.13,.16,0,255),0,10);
sat = color(map(saturdayP,.13,.16,255,0),map(saturdayP,.13,.16,0,255),0,10);
sun = color(map(sundayP,.13,.16,255,0),map(sundayP,0,.13,.16,255),0,10);

}

void draw () {
    noStroke();
    if (keyPressed) {
    if (key == 'm') {fill(mon);rect(0,0,mondayC,height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i][1]),0,i*6);};}
    if (key == 't') {fill(tue);rect(mondayC,0,width*tuesdayP,height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+1][1]),mondayC,i*6);};}
    if (key == 'w') {fill(wed);rect(tuesdayC,0,width*wednesdayP, height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+2][1]),tuesdayC,i*6);};}
    if (key == 'h') {fill(thu);rect(wednesdayC,0,width*thursdayP, height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+3][1]),wednesdayC,i*6);};}
    if (key == 'f') {fill(fri);rect(thursdayC,0,width*fridayP,height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+4][1]),thursdayC,i*6);};}
    if (key == 's') {fill(sat);rect(fridayC,0,width*saturdayP,height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+5][1]),fridayC,i*6);};}
    if (key == 'u') {fill(sun);rect(saturdayC,0,width*sundayP,height);
    for (int i=0; i<csv.length-6; i+=6) {fill(255);text((csv[i+6][1]),saturdayC,i*6);};}
    }
    else {background(swoosh);
    fill(0);
    text("Press & Hold M,T,W,H,F,S, or U",300,.7*width);};
    fill(255);
}

 

 

Music Video redefined

Video feed where certain pixels change color based on their brightness, which the color being based on MUSIC. MUSIC. VIDEO. get it?

I realized I have no idea how sound works, so this is very bruteish.

CALEB IS DOG

K so…

1. Pick an mp3 from your music library

2. Copy/paste this code into processing, save it under whatever name you want

3. Add a folder titled “data” to the folder containing the .pde filde

4. rename your favorite mp3 file “crispy.mp3” and place it in the data folder

5. Run da trackkkkkkkkkk

import processing.video.*;
import ddf.minim.analysis.*;
import ddf.minim.*;
float musicColor;

Capture     video;
Minim       minim;
AudioPlayer crispy;
FFT         fft;

void setup() {
  size(600, 600/*, P3D*/);
  video = new Capture(this, 320, 240);
  minim = new Minim(this);
  video.start();
  crispy = minim.loadFile("crispy.mp3", 1024);
  crispy.loop();
  fft = new FFT(crispy.bufferSize(), crispy.sampleRate());
}

void draw( ) {
  fft.forward(crispy.mix);
  for(int j = 0; j < fft.specSize(); j++)
      musicColor = fft.getBand(j)*750;
      print(musicColor);
      println();
  if ( video.available() ) {
    video.read();  //read in the new image if it is available
  }
  for (int i = 0; i < video.pixels.length;  i++) {  //you can ask the pixel array how long it is
    if (brightness(video.pixels[i]) < 140 && brightness(video.pixels[i]) > 80) {  //check the brightness of the pixel
      video.pixels[i] = color(random(0,musicColor), random(0,musicColor), random(0,musicColor), random(0,150));  //set the pixel to purble if it is bright
    }
  }
  image(video, 0, video.height);
}

 

Almost there

I’m close to something happening. Unfortunately my photo-sensor broke, so as a proxy I’ve been using a button as an input.

Every time the button is pushed, I want the expanding circle to revert back to its original size. Check da code, help me!

This Arduino code prints “1” to the serial when the button is pressed and “0” otherwise:

void setup(){
  Serial.begin(9600);
}

void loop(){
  //int brightness = analogRead(A0);
  int pressed = digitalRead(11);
  //Serial.print(brightness);
  //Serial.print(", ");
  Serial.print(pressed);
  Serial.print('\n');
}

Processing main file:

import processing.serial.*;
Ripple a;

Serial myPort;

void setup() {
  // List all the available serial ports:
  println(Serial.list());
  // Print out the list and look for port your Microcontroller is on
  // Finding the Arduino is not easy because they have weird names like "/dev/tty.usbmodem1421" or COM1
  // Ardnino is almost always the first one so you can usually use Serial.list()[0].
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  //myPort.readStringUntil('\n');  //clean out anything already in the buffer
  size(600,600);
  a = new Ripple();
}

void draw() {
  background(255);
  a.ripple();
  a.colorshift();
  a.buttonReset();
}

Processing class file:

class Ripple {
float col;
float radius;
//float brightness;
float button;

Ripple () {
 radius = 50; 
 col = 80;
}

  void ripple () {
    noStroke();
    fill(col);
    ellipse(.5*width, .5*height, radius, radius);
    radius = radius + 10; 
  }

  void colorshift () {
    if (col == 40) {
      col = 80;
    }
    else if (col == 80) {
      col = 40;
  }
  }

  void buttonReset () {
    if (myPort == null) return;
    //brightness = myPort[0];
    String input = myPort.readStringUntil('\n');
    if (input != null) {
      input = input.trim();
      button = int(input); 
    } 
    //button = myPort.read();
    print(button);
    if (button == 1) {
      radius = 50;
}
}
}

Object Oriented: Space Jam

Space Jam was on TV. ’nuff said.

Michael Jordan’s firey, inquisitive eyes are the only thing that can block the five Monstars’ (Pound, Bupkus, Bank, Blanko, and Nawt) shots. Use your mouse to block the shots.

I tried adding music, but couldn’t get around a file type error. See the commented out parts (audio code from Anna). Next steps include:

-a score/block counter

-debugging for the egdechecks

-more sound effects

-idk, you tell me!

//import ddf.minim.spi.*;
//import ddf.minim.signals.*;
//import ddf.minim.*;
//import ddf.minim.analysis.*;
//import ddf.minim.ugens.*;
//import ddf.minim.effects.*;
PImage background;
float blockheight;

//Minim minim;
//AudioPlayer sou;

Cube pound;
Cube bupkus;
Cube bang;
Cube blanko;
Cube nawt;
Block mj;

void setup () {
  size(894,894);
  smooth();
  background = loadImage("http://i.imgur.com/8IFBU8I.jpg");
  //minim = new Minim(this);
  //sou = minim.loadFile("http://files.nyu.edu/ccf264/public/Projects/Projectfiles/spacejam.mp3");
  //sou.loop();
  pound = new Cube(); //cube is constructor: birth of object
  bupkus = new Cube();
  bang = new Cube();
  blanko = new Cube();
  nawt = new Cube();
  mj = new Block();

}

void draw () {
  background(background);
  mj.exist();
  pound.launch();
  bupkus.launch();
  bang.launch();
  blanko.launch();
  nawt.launch();
}

 

class Cube {
float xpos;
float ypos;
float xspeed;
float yspeed; 
float ballsize;
PImage basketball;

Cube(){
  xpos=random(width);
  ypos= height;
  yspeed= random(1,6);
  xspeed= random(-5,5);
  basketball = loadImage("http://i.imgur.com/i01ziHJ.png");
  ballsize=57;
}

void launch () {
    blockCheck();
    xCheck();
    display();
    move();
  }

void display () {
  stroke(0);
  fill(255);
  image(basketball,xpos,ypos,ballsize,ballsize);

}

void move (){
  ypos = ypos - yspeed;  

  if (yspeed < 0) {
    xpos = xpos - xspeed;
  }
}

void blockCheck () {
  if (ypos <= blockheight && xpos > mouseX && mouseX + 100 > xpos || ypos >= height+1) {
    yspeed = -yspeed;
    }
}

void xCheck () {
  if (xpos>=width || xpos<=0) {
    xspeed = -xspeed;
}
}
}

class Block {
float blocky;
PImage jordaneyes;

Block () {
  blocky = 0;
  blockheight = 30;
  jordaneyes = loadImage("http://i.imgur.com/LgDddGj.jpg");
  }

void exist () {
  image(jordaneyes, mouseX, blocky, 100, blockheight);
}
}

 

Alright Alright Alright

This week I combined my drawing and animation projects.

Muffin + Bouncing Seizure Ball = Bouncing Seizure Muffin

Next steps:

1. Get rid of that stupid line created by the overlap of the two rectangles

2. Get the muffin to bounce when its edge hits a side, as opposed to the x1 & y1 coordinates

3. Give the muffin the eyes, eyebrows, and wrapper that it usually sports

muffin

float multiplier;
float rectHeight;
float rectLength;
float thirdIndent;
float bigDiameter;
float smallDiameter;
float firstTier;
float secondTier;
float thirdTier;
float secondIndent;
float x1 = 200;
float y1 = 200;
float xspeed=random(10);
float yspeed=random(10);

void setup() {
size(800,800);
background(0);
}

void draw (){
  drawMuffin();
  moveMuffin();
  edgeCheck();
}

void drawMuffin () {
 rectHeight = multiplier*12;
 rectLength = multiplier*4;
 thirdIndent = rectLength*1.5;
 bigDiameter = multiplier*6.5;
 smallDiameter = multiplier*6;
 firstTier = rectHeight/5;
 secondTier = rectHeight/2;
 thirdTier = rectHeight/1.5;
 secondIndent = rectLength/2.25;
  background(0);
  fill(random (255),random (255),random (255),255);
  noStroke();
  //components of muffin, relatively defined
  rect(x1,y1,rectHeight,rectLength);
  ellipse(x1,y1-firstTier,bigDiameter,bigDiameter);
  ellipse(x1+rectHeight,y1-firstTier,bigDiameter,bigDiameter);
  ellipse(x1+secondIndent,y1-secondTier,smallDiameter,smallDiameter);
  ellipse(x1+rectHeight-secondIndent,y1-secondTier,smallDiameter,smallDiameter);
  ellipse(x1+thirdIndent,y1-thirdTier,smallDiameter,smallDiameter);
  rect(x1+secondIndent,y1-secondTier,thirdTier,secondTier);
}

void moveMuffin () {
  x1=x1+xspeed;
  y1=y1+yspeed;
}

void edgeCheck () {
  if(x1>=width||x1<=0){
    xspeed=xspeed*-1;
    multiplier = random(1,25); 
   };
  if (y1>=height||y1<=0){
    yspeed=yspeed*-1;
    multiplier = random(1,25);
   };
}

 

 

 

 

Bouncing mini seizure

With some help from the very animated video teacher and Anna, I figured out the basics of the direction changes via if statements. After getting the bare bones, I added some elements of randomness to the color, size, and speed of the ball for a slightly-more exciting bouncing mini-seizure.

Here is the .pde file

Just for fun, here is the .pde file of the interactive drawing I made in class

Seizureball

Code:

float xpos;
float ypos;
float xspeed=random(10);
float yspeed=random(10);
float circlesize = random(30,40);

void setup() {
size(700,700);
background(88,30,106,1);

}

void draw() {
  float t = random(255);
  float r = random (255);
  float g = random (255);
  float b = random (255);
  background(88,30,106,1);
  fill(r,g,b,t);
  ellipse(xpos,ypos,circlesize,circlesize);
  xpos=xpos+xspeed;
  ypos=ypos+yspeed;
  if(xpos>=width||xpos<=0){
    xspeed=xspeed*-1;
    circlesize = random(20,50); 
  }
  if (ypos>=height||ypos<=0){
    yspeed=yspeed*-1;
    circlesize = random(20,50);
  }
}

 

Truco estúpido de la mascota

My stupid pet trick used the photosensor to determine how many LED’s should be lit. Pretty simple concept, but I’m proud of myself for figuring out how to code it into the Arduino. Check out the video.

IMG_0076

Though I’m not sure how practical something like this is, I imagine we can come up with some cool ideas on how to extend this project in class. I was thinking:

-Auto-adjustment for darkness of an environment (think about how an iPhone can auto-adjust its brightness)

-LED variation based on a different input e.g. sound, number of tweets, weight in an elevator (this how amplifiers/receivers have LEDs that indicate decibel output of different parts of a sound)

Here is the nesty code:

int brightness;

void setup(){
  Serial.begin(9600);
  pinMode(11,OUTPUT);
  pinMode(10,OUTPUT);
  pinMode(9,OUTPUT);
  pinMode(6,OUTPUT);
  pinMode(5,OUTPUT);
  pinMode(3,OUTPUT);
}

void loop(){

 brightness = analogRead(A0);
 Serial.println(brightness);
 map(brightness,35,270,0,255);
 if(brightness<255){
   digitalWrite(11,HIGH);}
 if(brightness<205){
   digitalWrite(10,HIGH);}
 if(brightness<180){
   digitalWrite(9,HIGH);}
 if(brightness<160){
   digitalWrite(6,HIGH);}
 if(brightness<120){
   digitalWrite(5,HIGH);}
 if(brightness<100){
   digitalWrite(3,HIGH);}
 if(brightness>100){
    digitalWrite(3,LOW);}
 if(brightness>120){
    digitalWrite(5,LOW);}
 if(brightness>160){
    digitalWrite(6,LOW);}
 if(brightness>180){
    digitalWrite(9,LOW);}
 if(brightness>205){
    digitalWrite(10,LOW);}
 if(brightness>255){
    digitalWrite(11,LOW);}
 }

 

 

Muffin Men 2014

My friends and I -the self proclaimed ‘muffin men’ – draw a muffin whenever we get a chance.

My first experience with drawing with code was in Steinhardt’s Introduction to Digital Art. In that class we didn’t use processing, but did a similar assignment. You can check it out on my website.

Muffin1

I’d like to improve on the muffin through the semester. After drawing a new muffin in the processing environment, I took the first step to making interactive. Using the mouseX and mouseY functions/parameters and an if statement, I made it so the colors of the shapes change based on mouse movement. As we continue to explore mouseX & mouseY, I hope to make the interactiveness more fun and understandable. The code goes:

void setup() {size(800,800);
background(88,30,106,1);
}

void draw(){

//if statement courtesy of Barbara Compagnon via openprocessing
if (mouseX>200 && mouseX < 400 && mouseY > 200 && mouseY < 400){
fill(0);
}
else {fill(88,30,106,1);
}
rect(125,550,550,175);
ellipse(125+75,550-100,250,250);
ellipse(125+550-75,550-100,250,250);
ellipse(125+150,550-225,225,225);
ellipse(125+550-150,550-225,225,225);
ellipse(400,550-300,225,225);
rect(250,250,300,300);

}

 

 

 

 

Double the switches, double the fun

Video

Meet the two switches involved in making this project:

Caleb's first soldered piece, ever
Mr. panic button from last week
Emily's Switch
the well-soldered not-so-panic button

 

…and the full setup:

a tad complicado

 

Using the code below, we made a setup which set off different LED light combinations based on which switches were open and closed. Watch the video to view all of the different LED blinking combinations.

void setup(){
pinMode(7,OUTPUT);
pinMode(10, OUTPUT);
pinMode(8,INPUT);
pinMode(9,INPUT);
}

void loop(){

if (digitalRead(8) == HIGH){
digitalWrite(7,HIGH);
delay(300);
digitalWrite(7,LOW);
delay(300);
}

if (digitalRead(9) == HIGH){
digitalWrite(10,HIGH);
delay(100);
digitalWrite(10,LOW);
delay(100);

}
}

It’s only weird if it doesn’t work

Congratulations to the Seahawks. Anecdotally, its clear that defense wins championships. However, can the ‘hawks really take 100% credit for their victory? I say neigh; instead, the Arduino-powered Seahawks D-fence activation button should receive some of said credit.

IMG_0028

 

Seahawks D Flashing

 

Whenever the Seahawks needed a defense boost, anyone in the room simply needed to push and hold the button in order to activate the boost. Clearly, it worked very well:

Superbowl score

Awesome right? Here’s how I made it…

I called up my best friend from middle school to help me solder and glue the some wires to the button we received in class:

Caleb's first soldered piece, ever
Caleb’s first soldered piece, ever

 

Then, I made a series circuit that flashed blue and green Seahawks colors:

Blue and green LED series circuit

 

Unfortunately, together, the lights were too dim for my intended purposes, so I made a single-LED setup. I found an empty box, cut some holes in it and covered it in a thin wrapping paper, and put the setup inside:

Breadboard in the BoxIMG_0015 IMG_0017

 

See how it works in the video below: