Tag Archives: Animation

It’s Raining, It’s Pouring (Brain Tracking)

So I was busy and just kept my program simple. I just took the color tracking program, made the ellipse into a bucket, and added falling raindrops. If you catch 20 raindrops “Winner!” shows up on the screen. I tried to add sound but I kept getting a NullPointerException so I just am using external sound. I also tried to have an image appear that said “Winner!” instead of just text but it gave the same error. As for the brain, well I just had it laying around and needed something colorful.

Here is the program in action.
Here is the program in action.

And here’s the code, I didn’t clean it up because I was busy, but it works!

//tracking the average pixel makes it shake less
//Sound and winning sign I wanted not working.
import processing.video.Capture;
Capture cam;// regular processing libary
int threshold = 20; //255 is white, 0 is black
int aveX, aveY; //this is what we are trying to find
float objectR =255;
float objectG = 0;
float objectB = 0;
boolean debug = true;
int lastTime, ellapsedTime; //for checking performance
//import ddf.minim.*;
//Minim m;
//AudioPlayer raindropFalling;
//PImage winning;

Raindrop[] rain = new Raindrop[20];
int howManyCaught = 0;
void setup() {
  size(640, 480);
  println(Capture.list());
  cam = new Capture(this, width, height);
  cam.start();

  //m = new Minim(this);
  //raindropFalling = m.loadFile("raindrops-processing.wav",1024);

  for (int i = 0; i<20; i++) {
    rain[i] = new Raindrop();
  }
  //winning = loadImage("http://bbsimg.ngfiles.com/1/24409000/ngbbs50e4c4e6e051d.jpg");
}
void draw() {
  //raindropFalling.play();
  //raindropFalling.rewind();
  if (cam.available()) {
    ellapsedTime = millis() - lastTime;  //find time since last time, only print it out if you press "t"
    lastTime = millis();  //reset timer for checking time next fram
    cam.read();
    int totalFoundPixels= 0;  //we are going to find the average location of change pixes so
    int sumX = 0;  //we will need the sum of all the x find, the sum of all the y find and the total finds
    int sumY = 0;
    //enter into the classic nested for statements of computer vision
    for (int row = 0; row < cam.height; row++) {
      for (int col = 0; col < cam.width; col++) {
        //the pixels file into the room long line you use this simple formula to find what row and column the sit in 

        int offset = row * cam.width + col;
        //pull out the same pixel from the current frame 
        int thisColor = cam.pixels[offset];

        //pull out the individual colors for both pixels
        float r = red(thisColor);
        float g = green(thisColor);
        float b = blue(thisColor);

        //in a color "space" you find the distance between color the same whay you would in a cartesian space, phythag or dist in processing
        float diff = dist(r, g, b, objectR, objectG, objectB);

        if (diff < threshold) {  //if it is close enough in size, add it to the average
          sumX = sumX + col;
          sumY= sumY + row;
          totalFoundPixels++;
          if (debug) cam.pixels[offset] = 0xff000000;//debugging
        }
      }
    }
    image(cam, 0, 0);
    if (totalFoundPixels > 0) {
      aveX = sumX/totalFoundPixels;
      aveY = sumY/totalFoundPixels;
      stroke(255);
      fill(100);
      quad(aveX, aveY, aveX+20, aveY+100, aveX+80, aveY+100, aveX+100, aveY);
    }
  }
  for (int i = 0; i<20; i++) {
    rain[i].drop();
    catchdrop(i);
  }
  if (howManyCaught >= 20) {
    textSize(160);
    fill(0,255,0);
    text("Winner!", 50, 200);
    //image(winning, 640, 480);
  }
}

void catchdrop(int tempNum) {
  if ( dist(aveX+55, aveY, rain[tempNum].x, rain[tempNum].y) <= 50) {
    rain[tempNum].y = -20;
    howManyCaught++;
  }
}

/*void stop() {
  raindropFalling.close();
  m.stop();
  super.stop();
}*/

void mousePressed() {
  //if they click, use that picture for the new thing to follow
  int offset = mouseY * cam.width + mouseX;
  //pull out the same pixel from the current frame 
  int thisColor = cam.pixels[offset];

  //pull out the individual colors for both pixels
  objectR = red(thisColor);
  objectG = green(thisColor);
  objectB = blue(thisColor);
  println("Chasing new color  " + objectR + " " + objectG + " " + objectB);
}
void keyPressed() {
  //for adjusting things on the fly
  if (key == '-') {
    threshold--;
    println("Threshold " + threshold);
  } 
  else if (key == '=') {
    threshold++;
    println("Threshold " + threshold);
  }
  else if (key == 'd') {
    background(255);
    debug = !debug;
    println("Debug " + debug);
  }
  else if (key == 't') {
    println("Time Between Frames " + ellapsedTime);
  }
  else if (key == 'r') {
    howManyCaught = 0;
  }
}

 

 

Piggy Bubbles (Popped by hand, wow, so cool, I’m amazing!)

So I had a busy week so I just tried to incorporate telecommunications into last weeks project. So I just used a pressure sensor and when you press the sensor it’s supposed to pop one bubble. However, I cannot get it to pop only one bubble and I keep trying to fix it but it doesn’t end up working. So in reality it’s supposed to only pop one bubble and only play that bubbles sound. I also feel that my code could be made simpler and had I had the time I’m sure I would have figured it out but like I said I was busy but whatever.

Here's a screen cap of the program running.
Here’s a screen cap of the program running.
import processing.serial.*;
Serial myPort;
int shouldPop;
float tempNumNo;
int tempNum;
boolean letItPop = false;
import ddf.minim.*;
Minim m;
//AudioPlayer s0,s1,s2,s3,s4,s5,s6,s7,s8,s9;
AudioPlayer[] sounds;

//background photo
PImage photo;

//creates bubble array
Bubble[] bubbles = new Bubble[10]; 

void setup() {

  printArray(Serial.list());
  String portName = Serial.list()[0];
  myPort = new Serial(this, "COM3", 9600);
  myPort.readStringUntil('\n');  

  size(510, 418);
  for (int i=0; i < bubbles.length; i++) {
    bubbles[i] = new Bubble();
  }

  m = new Minim(this);
  sounds = new AudioPlayer[10];
  sounds[0] = m.loadFile("pop1.wav");
  sounds[1] = m.loadFile("moo.wav");
  sounds[2] = m.loadFile("meow.wav");
  sounds[3] = m.loadFile("fart.wav");
  sounds[4] = m.loadFile("elephant.wav");
  sounds[5] = m.loadFile("pop2.mp3");
  sounds[6] = m.loadFile("splash.wav");
  sounds[7] = m.loadFile("pig.wav");
  sounds[8] = m.loadFile("rubberduck.wav");
  sounds[9] = m.loadFile("belch.wav");

  photo = loadImage("http://www.kimballstock.com/pix/PIG/01/PIG-01-RK0133-01P.JPG");
}

void draw() {
  smooth();
  background(photo);
  for (int i=0; i < bubbles.length; i++) {
    bubbles[i].everything();
  }

  tempNumNo = random(0, 10);
  int tempNumAlmost = int (tempNumNo);
  popPop(tempNumAlmost);
}  

void serialEvent(Serial _port) { 
  if (myPort == null) return;
  String input = myPort.readStringUntil('\n');
  if (input != null) {  
    input = input.trim();  
    shouldPop = int(input);   
    println(shouldPop);
  }
}

void popPop(int tempNum) {
  if (shouldPop > 0 && letItPop == false) {
    letItPop = true;

    if (letItPop == true) {
      float soundTemp = random(0, 9);
      int soundNum = int(soundTemp);
      sounds[tempNum].play();
      sounds[tempNum].rewind();
      bubbles[tempNum].bubbleChange();
      letItPop = false;
    }
  }
}

 

Piggy Bubbles

So I wanted to make something with bubbles just to figure out object oriented programming. But I wanted to take it a step further by adding something with popping. Then I thought… WAIT…. I NEED SOUND! So I decided to add a wide variety of sounds with each bubble corresponding to a different sound.

Here's a screen cap of the program running.
Here’s a screen cap of the program running.

And here is my code, the sound files were taken from freesound.org and I’ll put them on my flashdrive so we can hear them.

 

//imports sounds library and sets up sound
import ddf.minim.*;
Minim m;
AudioPlayer s0,s1,s2,s3,s4,s5,s6,s7,s8,s9;
AudioPlayer[] sounds;

//background photo
PImage photo;

//creates bubble array
Bubble[] bubbles = new Bubble[10];

void setup() {
size(510, 418);
bubbles[0] = new Bubble();
bubbles[1] = new Bubble();
bubbles[2] = new Bubble();
bubbles[3] = new Bubble();
bubbles[4] = new Bubble();
bubbles[5] = new Bubble();
bubbles[6] = new Bubble();
bubbles[7] = new Bubble();
bubbles[8] = new Bubble();
bubbles[9] = new Bubble();

m = new Minim(this);
sounds = new AudioPlayer[10];
sounds[0] = m.loadFile("pop1.wav");
sounds[1] = m.loadFile("moo.wav");
sounds[2] = m.loadFile("meow.wav");
sounds[3] = m.loadFile("fart.wav");
sounds[4] = m.loadFile("elephant.wav");
sounds[5] = m.loadFile("pop2.mp3");
sounds[6] = m.loadFile("splash.wav");
sounds[7] = m.loadFile("pig.wav");
sounds[8] = m.loadFile("rubberduck.wav");
sounds[9] = m.loadFile("belch.wav");

photo = loadImage("http://www.kimballstock.com/pix/PIG/01/PIG-01-RK0133-01P.JPG");
}

void draw() {
smooth();
background(photo);
bubbles[0].everything();
bubbles[1].everything();
bubbles[2].everything();
bubbles[3].everything();
bubbles[4].everything();
bubbles[5].everything();
bubbles[6].everything();
bubbles[7].everything();
bubbles[8].everything();
bubbles[9].everything();

}

void stop() {
s1.close();
m.stop();
super.stop();
}

void mouseClicked() {
popDist(0);
popDist(1);
popDist(2);
popDist(3);
popDist(4);
popDist(5);
popDist(6);
popDist(7);
popDist(8);
popDist(9);
}

void popDist(int tempNum) {
if ( dist(mouseX, mouseY, bubbles[tempNum].x, bubbles[tempNum].y) <= bubbles[tempNum].Size) {
float soundNot = random(0,9);
int soundNum = int(soundNot);
sounds[soundNum].play();
sounds[soundNum].rewind();
bubbles[tempNum].bubbleChange();
}
}

and here is the bubble class with the functions:

class Bubble {
  float x;
  float y;
  float Red=random(1, 255);
  float Green=random(1, 255);
  float Blue=random(1, 255);
  float Opaque=random(75, 200);
  float Size=random(50, 90);

  //creates the bubble location
  Bubble() {
    x = random(width);
    y = height;
  }

  void everything() {
    display();
    ascend();
    top();
  }

  //creates the bubble
  void display() {
    noStroke();
    fill(Red, Green, Blue, Opaque);
    ellipse(x, y, Size, Size);
  }

  //makes the bubble rise
  void ascend() {
    y--;
    x = x +random(-2, 2);
  }

  //checks if the bubble reaches the top
  void top() {
    if (y < 0-Size) {
      bubbleChange();
    }
  }

  //changes bubble properties
  void bubbleChange() {
    y = height+Size;
    x = random(width);
    Red = random(1, 255);
    Green = random(1, 255);
    Blue = random(1, 255);
    Opaque = random(75, 200);
    Size = random(50, 90);
  }

}

 

Interactive Screen Saver: NOW WITH 20% MORE INTERACTIVITY

So I just continued to work on my bouncing ball screen saver thingy but I tried to add a new feature. A “stop sign” where if the mouse is in the stop sign the ball would stop bouncing until you move the mouse off of the sign. I got this to work… kinda… but there is one problem. If the ball is moving in a negative direction when it is stopped, then when it begins moving again it moves in the positive direction. I know why this is; however, I have not been able to figure out how to fix it.

Here is the code:

//going to need another variable to take care of the stop problem I think... maybe a for loop? Always goes positive when stopped
float circlex = 0;
float xSpeed = 2;
float xVelocity = 2;
float circley =0;
float ySpeed = 2;
float yVelocity = 2;
float i = 0;
float red = random(255);
float green = random(255);
float blue = random(255);
void setup() {
  size(1360, 700);
  background (75, 100, 200);
}
void mouseClicked() {

  red = random(255);
  green = random(255);
  blue = random(255);
  background (green, blue, red);
  circley = mouseY;
  circlex = mouseX;
  xreversal();
  yreversal();
}

void draw() {

  StopSign();
  shoulditstop();
  stroke(0);
  fill(red, green, blue);
  ellipse(circlex, circley, 20, 20);
  ballspeed();
  if (circlex > width || circlex <= 0) {
    xreversal();
  }
  if (circley > height || circley <= 0) {
    yreversal();
  }
  i = i+1;
  if (i > 2500) {  
    background (blue, red, green);
    i = i - 2500;
  }
  if (circlex <= 0 || circlex >= width+1 || circley <= 0 || circley >= height+1) {
    red = random(255);
    green = random(255);
    blue = random(255);
  }
}

void xreversal() {
  xSpeed = xSpeed * -1;
}
void yreversal() {
  ySpeed = ySpeed * -1;
}

//stop toggle
// giving me problems, debug it!!!!!!!!
void shoulditstop() {
  if (dist(mouseX, mouseY, 680, 350) < 50) {
    speedstop();
  }
  else if (dist(mouseX,mouseY,680,350) >=50 && xSpeed == 0 && ySpeed == 0 ){

    xSpeed = xVelocity;
    ySpeed = yVelocity;
    ballspeed();
  }
}

//stops the ball
void speedstop() {
  xSpeed = xSpeed * 0;
  ySpeed = ySpeed * 0;
}

//Creates stop button
void StopSign() {
  noStroke();
  fill(0);
  ellipse(680, 350, 50, 50);
}

//starts ball again
void ballspeed(){
  circlex = circlex + xSpeed;
  circley = circley + ySpeed;
}

The problem is that to stop the ball xSpeed and ySpeed go to zero. I tried to work around that with the x and y Velocity variables but that didn’t work because they both are positive… So currently I’m lost. Also I think there may be more instances where I could have used functions but I wasn’t sure how to go about that.

Interactive Screen Saver… what?

So I wanted to make something that would allow the bouncing ball to vary speed, direction, and size. However, once I started I tried messing with speed when I would click, but I could not get the effect I wanted and though I knew why I didn’t know how to fix it. But I was able to change direction and location of the ball. So I made a screensaver that is the stereo typical bouncing ball, but if you were to click on the screen the ball would move to where you clicked and would move in the opposite direction of that which it was bouncing in before. I also wanted it to erase after a while after you let it sit for a while or if you click so that it doesn’t get too crazy.

Here is the code:

float circlex = 0;
float xSpeed = 2;
float circley =0;
float ySpeed = 2;
float i = 0;
void setup() {
  size(600, 370);
  background (75, 100, 200);
}
void mouseClicked() {
  background (75, 100, 200);
  circley = mouseY;
  circlex = mouseX;
  xSpeed = xSpeed *-1;
  ySpeed = ySpeed *-1;

}

void draw() {

  stroke(0);
  fill(200, 40, 10);
  ellipse(circlex, circley, 20, 20);
  circlex = circlex + xSpeed;
  circley = circley + ySpeed;
  if (circlex > width || circlex <= 0) {
    xSpeed = xSpeed * -1;
  }
  if (circley > height || circley <= 0) {
    ySpeed = ySpeed * -1;
  }
  i = i+1;
  if (i > 2500){  
    background (75, 100, 200);
    i = i - 2500;
   }

}

And I made it color-changing too!

float circlex = 0;
float xSpeed = 2;
float circley =0;
float ySpeed = 2;
float i = 0;
float red = random(255);
float green = random(255);
float blue = random(255);
void setup() {
  size(600, 370);
  background (75, 100, 200);
}
void mouseClicked() {

  red = random(255);
  green = random(255);
  blue = random(255);
  background (75, 100, 200);
  circley = mouseY;
  circlex = mouseX;
  xSpeed = xSpeed *-1;
  ySpeed = ySpeed *-1;
}

void draw() {

  stroke(0);
  fill(red, green, blue);
  ellipse(circlex, circley, 20, 20);
  circlex = circlex + xSpeed;
  circley = circley + ySpeed;
  if (circlex > width || circlex <= 0) {
    xSpeed = xSpeed * -1;
  }
  if (circley > height || circley <= 0) {
    ySpeed = ySpeed * -1;
  }
  i = i+1;
  if (i > 2500) {  
    background (75, 100, 200);
    i = i - 2500;
  }
  if (circlex <= 0 || circlex >= width || circley <= 0 || circley >= height) {
    red = random(255);
    green = random(255);
    blue = random(255);
  }
}

 

Multiply the Rainbow

In this animation, a single bubble will bounce around the screen. However, it will spawn itself upon hitting the walls and the colors will eventually cycle through the rainbow.

Something mysterious will happen when the mouse is pressed (and if it’s too much, you can undo the coolness by pressing a key)

Orange is a terrible color
int circleX;
int circleY;
int velocityX;
int velocityY;
int bubblecount;
int bubblecount2;
boolean bubbleadd;

//MousePressed/keyPressed
boolean disco;

//Use arrays to store color values:
int[] red = {255, 255, 255, 0, 0, 75, 143};
int[] green = {0, 127, 255, 255, 0, 0, 0};
int[] blue = {0,0,0,0,255,130,255};
int cycle_color;
int cycle_color2;

//Use arrays to store coordinates of new bubbles
int[] bubbleX = new int[1000];
int[] bubbleY = new int[1000];

//Use arrays to store velocities of new bubbles
int[] bubblevelocityX = new int [1000];
int[] bubblevelocityY = new int [1000];
void setup() {
  strokeWeight(0);
  stroke(100, 0, 150);
  size(800, 600);
  circleX = mouseX;
  circleY = mouseY;
  velocityX = 7;
  velocityY = 7;
  bubblecount = 0;
  bubblecount2 = 0;
  bubbleX[0]=circleX;
  bubbleY[0]=circleY;
  bubblevelocityX[0]=velocityX;
  bubblevelocityY[0]=velocityY;
//colors of background/bubbles 
cycle_color = 0;
cycle_color2 = 1;

//cool effect
disco = true;

}
void draw() {
  background(red[cycle_color],green[cycle_color],blue[cycle_color]);

  bubbleadd = true;
  bubblecount2 = bubblecount;

  //Array is used to store 
  //For loop checks activities of each bubble that is created 
  //Bubblecount2 is used to prevent the for loop from expanding itself during the iteration 
  //Bubblecount is used to refer to the next index where the new bubble would be created 

  for (int i = 0; i <= bubblecount2; i++) {
    if (disco) {
    fill(red[cycle_color2],green[cycle_color2],blue[cycle_color2]);
    }
    else {
          fill(random(255),random(255),random(255));
    }
    bubbleX[i]+= bubblevelocityX[i];
    bubbleY[i]+= bubblevelocityY[i];

    if (bubbleX[i] >= width || bubbleX[i] <= 0) {
      bubblevelocityX[i] *= -1;

      if (bubbleadd) {
        bubblecount += 1;
        bubbleX[bubblecount] = bubbleX[i];
        bubbleY[bubblecount] = bubbleY[i];
        bubblevelocityX[bubblecount] = bubblevelocityX[i];
        bubblevelocityY[bubblecount] = -bubblevelocityY[i]+(int)random(5);
        bubbleadd = false;
      }
    }

    if (bubbleY[i] >= (height) || bubbleY[i] <= 0) {
      bubblevelocityY[i] *= -1;
      if (bubbleadd) {
        bubblecount += 1;
        bubbleX[bubblecount] = bubbleX[i];
        bubbleY[bubblecount] = bubbleY[i];
        bubblevelocityX[bubblecount] =-bubblevelocityX[i]+(int)random(5);
        bubblevelocityY[bubblecount] = bubblevelocityY[i];
        bubbleadd = false;
      }
    }

    //drawing new bubbles
    strokeWeight(0);
    stroke(red[cycle_color2],green[cycle_color2],blue[cycle_color2]);
    ellipse(bubbleX[i], bubbleY[i], 120, 120);
  }

  if (bubblecount2 > 500){
    bubblecount2=0;
    bubblecount=0;
    cycle_color += 1;
      if (cycle_color >= 7)
        cycle_color=0;

    cycle_color2 += 1;
     if (cycle_color2 >= 7)
       cycle_color2=0;
  }

}

//Cool effect (on)
  void mousePressed(){
    disco=false;

  }

//Cool effect (off)
  void keyPressed() {
    disco=true;
  }