Category Archives: Animation

Miracle Flower – Make it Grow!

This simple game revolves around protecting the miracle tulip that is struggling to grow and flourish in this otherwise barren stretch of land. The player must water the plant from the very obliging and cheerful rain cloud (mouse press over the cloud) while preventing the pesky deer from nibbling on miracle plant.

Let it growwww, let it growww

(Frozen, anyone? - just kidding, we want want warm weather)

In order to play the game properly, all the images and font set must be downloaded as well. They can be downloaded: here

Here is all the code:

Flower flower;
int [] flower_width = {
  32, 43, 57, 88, 95, 94, 122, 122
};
int[] flower_height = {
  60, 80, 100, 120, 140, 160, 180, 200
};

Rain rain;

Deer deer;
int deer_direction = 0;
PFont deerCollide;
PImage dead_Flower;
Sun sun;

Thunder thunder;
PImage lightening_bolt;
//Clicking cloud: 
boolean overCloud = false;
boolean locked = false;
int rain_click = 0;

void setup() {
  size(700, 450);
  flower = new Flower("1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png");
  rain = new Rain("Cloud3.png");
  thunder = new Thunder("Thunder3.png");
  lightening_bolt = loadImage("Lightening.png");

  //FOR DEER: (String filename1, String filename2, int _x, int _y, int _velocity)
  deer = new Deer("DeerLeft.png", "DeerRight.png", -5, 1);
  deerCollide = loadFont ("ArialMT-16.vlw");
  dead_Flower = loadImage("skull.png");

  sun = new Sun("Sun.png");
}

void draw () {
  //Background and Soil
  fill(139, 69, 19);
  rect(0, 425, width, 70);
  fill(179, 232, 255);
  rect(0, 0, width, 425);

  //Use counter variable each time a certain button is pressed --> use if statement and increment array

  thunder.thunder_Draw(75, 100);

  sun.sun_Draw(620, -45);

  //SWITCH DEER ORIENTATION
  deer.deer_Move(deer_direction);

  rain.rain_Draw(350 - (111/2), 100);
  fill(00, 00, 255, 50);
  //CLICKABLE AREA for RAIN CLOUD
  if (mouseX >= 295 && mouseX <=495 &&
    mouseY >= 100 && mouseY <= 311) {
    overCloud = true;
  }
  else {
    overCloud = false;
  }

  if (rain_click <= 10){
    flower.flower_Draw(350, (height-(flower_height[0]+18)), 1);
  }

  if (rain_click <= 20 && rain_click > 10){
    flower.flower_Draw(350, (height-(flower_height[1]+18)), 2);
  }

  if (rain_click <= 30 && rain_click > 20){
    flower.flower_Draw(350, (height-(flower_height[2]+18)), 3);
  }

  if (rain_click <= 40 && rain_click > 30){
    flower.flower_Draw(350, (height-(flower_height[3]+18)), 4);
  }

  if (rain_click <= 50 && rain_click > 40){
    flower.flower_Draw(350, (height-(flower_height[4]+18)), 5);
  }

  if (rain_click <= 60 && rain_click > 50){
    flower.flower_Draw(350, (height-(flower_height[5]+18)), 6);
  }

  if (rain_click <= 70 && rain_click > 6){
    flower.flower_Draw(350, (height-(flower_height[6]+18)), 7);
  }

  if (rain_click >= 80){
    flower.flower_Draw(350, (height-(flower_height[7]+18)), 8);
  }

  textFont(deerCollide, 16);
  fill(0);
  deer.check_collision();
} // END OF DRAW 

//Flower Class
class Flower {
  PImage flower1;
  PImage flower2;
  PImage flower3;
  PImage flower4;
  PImage flower5;
  PImage flower6;
  PImage flower7;
  PImage flower8;

  int x;
  int y;
  //Constructor
  Flower(String filename1, String filename2, String filename3, String filename4, String filename5, String filename6, String filename7, String filename8) {
    flower1 = loadImage (filename1);
    flower2 = loadImage (filename2);
    flower3 = loadImage (filename3);
    flower4 = loadImage (filename4);
    flower5 = loadImage (filename5);
    flower6 = loadImage (filename6);
    flower7 = loadImage (filename7);
    flower8 = loadImage (filename8);
  } 
  void flower_Draw(float x, float y, int flower_type) {
    switch (flower_type) {
    case 0:
      image(flower1, x, y);
      break;
    case 1:
      image(flower2, x, y);
      break;
    case 2:
      image(flower3, x, y);
      break;
    case 3:
      image(flower5, x, y);
      break;
    case 4:
      image(flower6, x, y);
      break;
    case 5:
      image(flower7, x, y);
      break;
    case 6:
      image(flower8, x, y);
    }
  }
  //End of Flower Class
}

//Sun class
class Sun {
  PImage sun_ball;
  int x;
  int y;

  //Sun constructor
  Sun(String filename1) {
    sun_ball = loadImage(filename1);
  }

  void sun_Draw(int x, int y) {
    image(sun_ball, x, y);
  }
}
//End of Sun class

//Rain class
class Rain {
  PImage cloud;
  int cloud_x;
  int cloud_y;

  //Cloud constructor
  Rain(String filename) {
    cloud = loadImage(filename);
  }

  void rain_Draw(float x, float y) {
    image(cloud, x, y);
  }
}
//End of Rain class

//Thunder class
class Thunder {
  PImage lightening;
  int cloud_x;
  int cloud_y;

  //Cloud constructor
  Thunder(String filename) {
    lightening = loadImage(filename);
  }

  void thunder_Draw(int x, int y) {
    image(lightening, x, y);
  }
}//End of THUNDER class

//Deer class
class Deer {

  PImage predator1;
  PImage predator2;
  int x;
  int y;
  float velocity;

  //Deer constructor
  Deer(String filename1, String filename2, int _x, float _velocity) {
    predator1 = loadImage(filename1);
    predator2 = loadImage(filename2);

    x = _x;
    velocity = _velocity;
  }

  void deer_Draw(int x, int deer_direction) {
    y = 340;
    switch (deer_direction) {
    case 0:
      image(predator1, x, y);
      break;
    case 1:
      image(predator2, x, y);
      break;
    }
  }
  //Move deer
  int get_x () {
    return x;
  }

  //Get direction: 
  int get_direction() {
    return deer_direction;
  }

  float get_velocity() {
    return velocity;
  }
  void deer_Move(int deer_direction) {
    x += velocity;
    this.deer_Draw(x, deer_direction);
  }

  void deer_Reset() {
    int side = (int) random(1, 3);
    if (side ==1 ) {
      x = -100;
      velocity = 2;
      deer_direction = 0;
    }
    else {
      x = width+50;
      velocity = -2;
      deer_direction = 1;
    }
  }

  boolean check_collision() {
    boolean signal = false;
    if (deer_direction == 0) {
      if (((x + 100) > 350) && (x) < 475) { 
        image(dead_Flower, 310, 255);
        signal = true;
        rain_click = 0;
      }
    }

    else if (deer_direction == 1) {
      if ((x) < 350) {
        image(dead_Flower, 310, 255);
        signal = true;
        rain_click= 0;
      }
    }

    return signal;
  }
}// End of Deer class

void keyPressed () {
  deer.deer_Reset();
  image(lightening_bolt, 150, 205);
  textFont(deerCollide, 16);
  fill(255, 255, 102);
  text ("ZAP", 100, 250);
  text ("ZAP", 225, 250);
}

void mousePressed() {
  if (overCloud) {
    textFont(deerCollide, 16);
    fill(0, 0, 255);
    text ("Whee water!", 299, 100);
    draw_rain();
    rain_click += 1;
  }
  else {
    locked = false;
  }
}

void draw_rain() {
  float x = 0;
  x = (random(294, 800));
  System.out.println(x);
  float y = 0;
  int velocity_y = 3;
  for (int i = 0; i < 40; i++) {
    x = (random(294, 400));
    y = random(220, height);
    y+= velocity_y;
    fill(00, 00, 255);
    ellipse(x, y, 4, 7);
  }
}

 

PS. (Disclaimer): Sorry I meant to post this a while ago but after actual presentation day when this project was due, but I had no internet that day (which is why I used a USB to present) and I delayed in posting it out of sheer forgetfulness…Awkward: I think after that delay I think I prematurely saved the draft and quit before actually posting (apologies!!)

Omnipotent Creepy Clown

For this little exercise, my idea was to have a circus tent in the background with a clown that appears. However, the result is a massive clown that bounces around the screen. His movement is programmed, but can be manipulated by the placement of the mouse. One of the things I’d like to change is the size of the clown. I’d also like to learn how to make him multiply with a mouseClick.

Here’s my code:

PImage clown;

float size = 10;
float posX = 10;
float posY = 20;
float speedX = 3;
float speedY = 3;
void setup(){
size(600,400);
clown = loadImage(“circus-clown.jpeg”);

}

void draw(){
background(loadImage(“3_circus_tent_8x12.jpg”));
posX = posX + speedX;
posY = mouseY + speedY;

if(posX > width ||posX < 0){
speedX = speedX * -1;
}
if(posY > height ||posY < 0){
speedY = speedY * -1;

}
image(clown, posX-40, posY-20);

}

Moving Circles

For this project I wanted to do something with many moving parts. I got the circles to work!

 

 

Screen Shot 2014-03-03 at 2.31.34 PM

float circle1;
float circle2;
float circle3;
float circle4;
float circle5;
float circle1y;
float circle2y;
float circle3y;
float circle4y;
float circle5y;
float linehorizontal;
float linevertical;

float linepoint;
float linepoint1;

float speed;
float speed2;

//float circle1Xsize;
//float circle2size;
//float circle3size;
//float circle4size;

float circlesize5x;
float circlesize5y;

void setup(){
  size(800,600);
  smooth();

  circle1=200;
  circle2=200;
  circle3=200;
  circle4=200;
  circle5=200;
  //CIRCLE X values

  circle1y=200;
  circle2y=200;
  circle3y=200;
  circle4y=200;
  circle5y=200;
  //CIRCLE Y values

  circlesize5x=200;
  circlesize5y=200;
  //CIRCLE SIZE

  linehorizontal=300;
  linevertical=200;

  linepoint=.1;
  linepoint1=.1;  

  speed=.5;
  speed2=-.5;

}

void draw(){
  background (random(255,0));

//circles
ellipseMode(CENTER);
ellipse(circle1,circle1y,252,252);
ellipseMode(CENTER);
ellipse(circle2,circle2y,250,250);
ellipseMode(CENTER);
ellipse(circle3,circle3y,240,240);
ellipseMode(CENTER);
ellipse(circle4,circle4y,220,220);
ellipseMode(CENTER);
ellipse(circle5,circle5y,circlesize5x=circlesize5x+1, circlesize5y=circlesize5y+1);

 circle1=circle1+1;
 circle2=circle2-1;
 circle3y=circle3y+1;
 circle4y=circle4y-1;

line(200,100,200,300); //vertical cross
line(100,200,300,200); //horizontal cross

line(200,190,190,200); //upper left
line(200,190,210,200);  //upper right
line(190,200,200,210); //lower left
line(200,210,210,200);  //lower right

//lower left
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,220);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,240);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,260);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,280);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,281);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,282);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,283);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,190,200,200,283);

//lower right
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,220);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,220);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,240);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,260);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,280);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,281);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,282);
line(linepoint1=linepoint1+speed,linepoint=linepoint+speed,200,283);

//upper right
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,180);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,160);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,140);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,120);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,119);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,118);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,117);

//upper left
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,180);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,160);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,140);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,120);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,119);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,118);
line(linepoint1=linepoint1+.5,linepoint=linepoint+.5,200,117);

line(linepoint1=linepoint1+speed2,linepoint=linepoint-.5,190,200);
line(linepoint1=linepoint+speed2,linepoint=linepoint-.5,180,200);
line(linepoint1=linepoint+speed2,linepoint=linepoint-.5,170,200);
line(linepoint1=linepoint1+speed2,linepoint=linepoint-.5,160,200);
line(linepoint1=linepoint1+speed2,linepoint=linepoint-.5,150,200);
line(linepoint1=linepoint1+speed2,linepoint=linepoint-.5,140,200);

line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,220,200);
line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,230,200);
line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,240,200);
line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,250,200);
line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,260,200);
line(linepoint1=linepoint1+.5,linepoint=linepoint-.5,270,200);

line(linepoint=linepoint-.5,linepoint1=linepoint1+.5,200,100,300,200);
line(linepoint=linepoint-.5,linepoint1=linepoint1+.5,200,200,200,300);
line(linepoint=linepoint-.5,linepoint1=linepoint1+.5,200,300,100,200);
line(linepoint=linepoint-.5,linepoint1=linepoint1+.5,200,200,200,100);

if (linepoint>600) {speed= speed * -1;}

}

 

Help Pacman!

pacman

Look at how lonely and hungry he is. Won’t you help? My plan was to make Pacman (which I did!) and have it gobble up bouncing balls (which I didn’t do).

Things I have trouble with: multiple classes/variables(?) in Processing

If any of you can help, add some wizardry/magic to it, that’d be very cool. Code below!

 

float pacX=mouseX;
    float pacY=350;
    float count=0;
    float pacsize=20;

    void setup() {
      size(600, 400);
      background(0);
      smooth();
      noCursor(); 
    }

    void draw() {
        pacman();

    }

    void pacman() // Hey look it's Pacman!
    {
      background(0);
      fill(250, 250, 40); //classic yellow color
      arc(pacX, pacY, 50, 50, PI/4, 7*PI/4);
      pacX=mouseX;
      pacY=350;
    }

 

 

 

Confetti-eating clouds

I was trying to create a game with Kat’s code of falling glitter (something like Catch the Falling Glitter with the Bucket) but I didn’t know how to make the glitter disappear into the bucket.

For now, here’s a very simple screensaver inspired by Kat’s random color variable. I had a lot of fun playing with this.

The code:

//DECLARING VARIABLE
float cloudX;
float cloudY;
//float sizeX;

//INITIALIZE VARIABLE
void setup(){
size(800,800);
background(255);
//cloudX = width/2;
//cloudY = height/2;
}

//USE VARIABLE
void draw(){
cloudX = random(width);
cloudY = random(height);
//sizeX = random(width);
//background(255);
stroke(135,206,235,20);
fill(135,206,235,70);
ellipse(cloudX,cloudY,200,100);

if (mousePressed) {
float r = random(0,255);
float g = random(0,255);
float b = random(0,255);
float a = random(0,255);
fill(r,g,b,a);
ellipse(mouseX,mouseY,30,30);
}

}

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);
  }
}

 

bouncing travolta

 

Screen Shot 2014-03-03 at 2.11.23 PM

Last night I was watching the Oscars and John Travolta (for some reason) presented the singer of the song for Frozen. Word on the street is that he butchered the singers name. Regardless, his appearance inspired me to create an animation. Here is the John Travolta bouncing ball. Pretty hypnotizing, huh?

PImage travolta;

float siz = 30;
float posX = 60; 
float posY = 100;
float speedX = 6; 
float speedY = 6;

void setup(){
  size(600,400);
  travolta = loadImage("travoltaball.png"); 

}

void draw(){
  background(110);
  posX = posX + speedX; 
  posY = posY + speedY;

  if(posX > width ||posX < 0){
    speedX = speedX * -1;
  }
  if(posY > height ||posY < 0){
    speedY = speedY * -1;

  }

image(travolta, posX-40, posY-20);

}

 

 

 

Animated Eyes

I wanted to make something interactive, so I made eyes that blink with the mouse movement. I dunno, it got a little weird. You can see it here.

 

float rectX;
float xspeed = 10;
float rectY;
float yspeed = 10;

void setup(){
  size(720, 480);
  smooth();
  rectY = 0;
}

void draw(){
  background(255, 230, 240);
  stroke(0);
  fill(255);

 //eyeball
  fill(random(230,255), random(100, 230), random(200, 255));
  rect(200, 125, 100, 200);
  rect(400, 125, 100, 200);

 //pupil
 if (mouseY < 125){
  noStroke();
  fill(mouseY, 230, mouseX);
  ellipse(260, 250, 75, 130);
  ellipse(460, 250, 75, 130);
 }

 else if ((mouseY > 125) && (mouseY < 250)){
  noStroke();
  fill(mouseY, 230, mouseX);
  ellipse(250, 250, 75, 130);
  ellipse(450, 250, 75, 130);
 }

 else if (mouseY > 250){
  noStroke();
  fill(mouseY, 230, mouseX);
  ellipse(240, 250, 75, 130);
  ellipse(440, 250, 75, 130);
 }

 //eyelid
  if ((mouseY > 125) && (mouseY < 325)){
    fill(255, 230, 240);
    noStroke();
    rect(195, mouseY-250, 110, 250);
    rect(395, mouseY-250, 505, 250);
    stroke(0);
    line(180, mouseY, 320, mouseY); 
    line(380, mouseY, 520, mouseY);
  }

  else if (mouseY >= 325){
    noStroke();
    fill(255, 230, 240);
    rect(195, 120, 320, 325);
    rect(395, 120, 520, 325);
    stroke(0);
    line(180, 325, 320, 325);
    line(380, 325, 520, 325);
  }

  else if (mouseY <= 125){
    stroke(0);
    line(180, 125, 320, 125);
    line(380, 125, 520, 125);
  }

  if (keyPressed){
   if (key == 'a'){
    noStroke();
    fill(255, 230, 240);
    rect(180, 120, 150, 325);
    stroke(0);
    line(180, 325, 320, 325);
   }
  }

  //bouncing bar
  fill(random(230,255), random(100, 230), random(200, 255));
  noStroke();
  rect(rectX, random(rectY), 30, 30);
  rect(random(rectX), rectY, 30, 30);
   rectX = rectX + xspeed;
   rectY = rectY + yspeed;

if((rectX > width) || (rectX < 0)){
    xspeed = xspeed * -1;
  }

if((rectY > height) || (rectY < 0)){
    yspeed = yspeed * -1;
  }

}

 

When It All Falls Down

Screen Shot 2014-03-03 at 12.47.32 PM

For this project I wanted to create more than one circle and have them almost fall down the screen. I had to create a circle object to do this for more than one circle to appear.

Here is a link to the video of the output

float transparency = random(80, 100);
int count = 600;
Circle [] circles;
float x,y;

void setup(){
  size (600,600);
  circles = new Circle[count];
  for (int k = 0; k < count; k++) {
      circles[k] = new Circle(x, y);
    }

}//setup

void draw(){

   background(255);
   for (int i =0; i<count; i++){
      circles[i].rainCircles();
      circles[i].draw();
     }

}//draw

class Circle {
  float x = random(0,width);
  float y;
  float radius = random(1,30);
  float speed = random (0.5, 4.0);

  // Contructor
  Circle(float x,float y) {
    x --;

  }
  void rainCircles(){
     if (y < 600 || y >=  0) {
        y+=speed;
      }
    }

  void draw() {
    float r = random(0,255);
    float g = random(0,255);
    float b = random(0,255);
    fill(r,g,b,transparency);
    noStroke();  
    ellipse(x, y, radius, radius);  
  }

}

 

 

The Big Cheese

I made a really simple animation with a bouncing ball and the image of a mouse.  The mouse follows your computer mouse. I would have liked to have the ball disappear when the mouse goes over the cheese ball, but I wasn’t sure how to do that.

Screenshot 2014-03-03 12.27.08

mouse and cheese

float circleX;
float xspeed = 1;
void setup (){
  loadPixels ();
  size(1000,1000);
  circleX = 5;
}

void draw (){

background (255,15,155);
 fill (255,196,105);
 stroke (255);
   float h = random (0,1000);
 ellipse (circleX,h,200,200);

 image( loadImage("mouse_icon.png"),mouseX,mouseY);

  circleX = circleX + xspeed;

if (circleX > width || circleX < 0) {
    //turn around

 xspeed  = xspeed + -1.1;
}

}

 

 

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);
  }
}

 

Sorry Leo

Last week’s been crazy and I’ve missed the Oscars because I was on the plane. So I made this to let out my anger and despair.

屏幕快照 2014-03-03 7.24.36 AM

here’s the video for it :3.

bounce oscar

The result turned out a bit too simplistic. I was trying to make the letters stay on the screen for a bit, and when you move the cursor over the letters would start to wiggle, and when you click your mouse, it triggers the movement. But somehow I couldn’t manage for it to work. Anyways, here it is.

It’s alright, next year, Leo.

String message = "Oscar";
PImage bg;
PImage bg1;
PImage bg2;

float x;
float y;     

float hr;  //horizontal radius
float vr;// vertical radius

float xspeed = 4; 
float yspeed = 5;  

int xdirection = 1; 
int ydirection = 1;  

void setup() 
{
  size(600, 372);
  bg = loadImage("http://moviesofhollywood.com/wp-content/uploads/2013/11/leonardo-dicaprio-the-wolf-of-wall-street-photo-600x372.jpg");
  textFont(createFont("Georgia", 36));

  textAlign(CENTER, CENTER);

  background(bg);

  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() 
{

  background(bg);

    x = x + ( xspeed * xdirection );
    y = y + ( yspeed * ydirection );

  //flash

    if (x > width-hr || x < hr) {
      xdirection *= -1; 
    }
    if (y > height-vr || y < vr) {
      ydirection *= -1;

    }

    //wanted to try make it wiggle

      if (dist(mouseX, mouseY, x, y) < hr) {

        //if (abs(mouseX - x) < hr &&
        // abs(mouseY - y) < vr) {
        x += random(-50, 50);
        y += random(-50, 50);
      }
        // the actual text
    fill(253, 219, 0);
    text("Oscar", x, y);
  }

 void mousePressed() {
  noStroke();
  fill(255, 0, 255);
  rectMode(CENTER);
  rect(mouseX,mouseY,16,16);
}

//after the oscar is outside of the screen, change background

 

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;
  }

 

The Remix to Ignition

Screen Shot 2014-03-03 at 2.02.28 PM

For my bounce project, I decided to incorporate R. Kelly’s lovely jam: “Ignition (Remix)”

I tried to make the edges solid by having it bounce off of the diameter, rather than the center, but I encountered some difficulties with making it work on the 0 X and 0 Y axis. Maybe you guys could tell me why.

The ball is programmed to cycle through a random rainbow of colors while bouncing faster and faster (as it gets more and more excited by the smoothness of the tunes) until it is eventually moving too fast for us to see.

kellybounce

Here is a video of my program running, followed by the code. The screencap quality isn’t the best, so I apologize for the jumpiness.

PImage photo;
float circleX;
float circleY;
float xspeed = 10;
float yspeed = 10;
float diameter;

void setup() {
  size (944, 700);
  photo = loadImage ("rkelly.jpeg");
  smooth ();
  circleX = 0;
  circleY = 0; 
  diameter = 100;
}

void draw() {
  image(photo, 0, 0);
  //background(51);
  //fill (100,0,100);
  noStroke ();
  ellipse (circleX, circleY, diameter, diameter);

  circleX = circleX + xspeed;
  circleY = circleY + yspeed;

  if (circleX >= width || circleX <= 0) {
    xspeed = xspeed * -1.5;
    println("Runnin' her hands through my 'fro");
    fill(random (255), random (255), random (255));
  }

  if (circleY >= height || circleY <= 0) { // had + diameter / 2, but it didnt work on the 0 axis
    yspeed = yspeed * -1.12;
    println("Bouncin' on 24's");
    fill(random (255), random (255), random (255));
  }
}

With Caleb’s help, I fixed the aforementioned bugs, making my edges solid. Not as concise, I could combine the X and the Y into || statements, but I may want to insert a random change depending on the wall that the ball hits,  so I will leave it as is. I also added a random speed change when the mouse is pressed and took out the auto acceleration. Here is my new code and a video:

bounce 2

PImage photo;
float circleX = 300;
float circleY = 300;
float xspeed = 2;
float yspeed = 2;
float diameter = 100;

void setup() {
  size (930, 700); //x,y
  photo = loadImage ("rkelly.jpeg");
  smooth ();
 // circleX = 0;
 // circleY = 0; 
}

void draw() {
  image(photo, 0, 0);
  //background(51);
  //fill (100,0,100);
  noStroke ();
  ellipse (circleX, circleY, diameter, diameter);

  circleX = circleX + xspeed;
  circleY = circleY + yspeed;

  if (circleX + diameter / 2 >= 930) {
    xspeed = xspeed * -1;
    println("Runnin' her hands through my 'fro");
    fill(random (255), random (255), random (255));
  }

  if (circleX <= diameter / 2) {
    xspeed = xspeed * -1;
    println("Bouncin' on 24's");
    fill(random (255), random (255), random (255));
  }

  if (circleY + diameter / 2 >= 700) {
    yspeed = yspeed * -1;
    println("Runnin' her hands through my 'fro");
    fill(random (255), random (255), random (255));
  }

  if (circleY <= diameter / 2) { // had + diameter / 2, but it didnt work on the 0 axis
    yspeed = yspeed * -1;
    println("Bouncin' on 24's");
    fill(random (255), random (255), random (255));
  }
}

void mousePressed (){
  xspeed = random (0,100);
  yspeed = random (0,100);
}

 

 

dem bouncy linez

float lineX = 0;
float lineY = 0;
float xspeed = 10;
float rotation = 0;
float square1; 
float x = 0;

void setup() {
  x = 50;
  background (255);
  size(1000, 800);
  square1 = x;
}

void draw() {

  // cyan line bounce
  stroke(7, 221, 218, random(255));
  line(lineX, height, 1, 1);

  lineX = lineX + xspeed;

  if (lineX > 1000) {
    xspeed = -5;
  }

  if (lineX < 0) {
    xspeed = 5;
  }  

  // magenta line bounce
  stroke(241, 76, 119, random(255));
  line(width, lineY, 1, 1);
  lineY = lineY + xspeed;
  if (lineY > 1000) {
    xspeed = -5;
  }

  if (lineY < 0) {
    xspeed = 5;
  }

  rotation=rotation+0.06;
  fill(255, 255, 255, 100);
  noStroke();
  translate(500,400);
  rotate(rotation);
  ellipse(50, 50, 10, 10);

  rotation=rotation+0.06;
  fill(255, 255, 255, 100);
  noStroke();
  rotate(rotation);
  ellipse(100, 100, 10, 10);

  rotation=rotation+0.06;
  fill(255, 255, 255, 100);
  noStroke();
  rotate(rotation);
  ellipse(200, 200, 10, 10);

  rotation=rotation+0.06;
  fill(255, 255, 255, 100);
  noStroke();
  rotate(rotation);
  ellipse(300, 300, 10, 10);

  rotation=rotation+0.06;
  fill(255, 255, 255, 100);
  noStroke();
  rotate(rotation);
  ellipse(300, 300, 10, 10);
}

 

I made a screensaver type animation with bouncing lines with random opacity and a bullseye pattern in the corner to play with the rotate function.

Here is a sketch. 

 

The Impossible Game!

A simple game where the player tries to stop the moving square inside one of the grid boxes. To stop the square, press ‘g’. Try to get the square to fit inside a box before it turns red green! The game is (almost) impossible because depending on the screen size the square and the box might not align, and the rotation of the square might also throw off the alignment! Muahaha…

Preview

 

float squareX=0;
float squareY=0;
float xspeed=2;
float yspeed=2;
float s=50;
float k=0;
float rotation;
float colour;

void setup() {
  size(600, 400);
  smooth();
  println("the impossible game");
}

void draw() {
  background(255);
  grid();

  squareX=squareX+xspeed;
  squareY=squareY+yspeed;
  rotation = rotation+0.1;
  colour = colour+squareX/100;

  if (squareX>width-s/2||squareX<0) {
    xspeed = -xspeed;
    colour = -colour;
  }
  if (squareY>height-s/2||squareY<0) {
    yspeed = -yspeed;
    colour = -colour;
  }
  translate(squareX, squareY);
  rotate(rotation);
  rectMode(CENTER);
  fill(0, colour, 0);
  rect(0, 0, s, s);
}

void keyPressed() {
  if (key =='g') {
    delay(300);
  }
}

void grid() {
  for (k=0;k<width/s;k++) {
    stroke(0);
    line(k*s, 0, k*s, height);
    line(0, k*s, width, k*s);
  }
}