Bubble popping animation

Now I look at your draw and it’s a little confusing because a lot of ifs:

  if (mousePressed) {
    click = true;
  }

  if (click) {
    upspeed = upspeed - gravity;
    ellipse(x, riseStart, bsize2, bsize2); // new small ball created
    bsize1 = 0;    //The original ball size changet to 0 = invisible. Still follows "riseStart"
  }

//Tried to reset riseStart when the small ball exits the window to spawn a new ball.
  if (riseStart > height+bsize2) {

We can use state and switch() to make it better readable.

//Gravity test by Teljemo and son - NOW with states 
//Click anywhere to pop the ball and see the reaminting matter fall to the ground.
//To do: 
//Respawn ball when matter exits window.
//Change to states. Done. 

// constants: these are values that state can have (must be unique (0,1,2...))
final int RISE    = 0;   // the word final makes them constants 
final int FALL    = 1; 
final int RESTART = 2; 
// variable: current value of the state
int state=RISE;  // not a state of the program, but the state of the ball

float gravity;      //Gravity variable
float x;            //Startpoint for ball in X
float upspeed;      //The speed of the ball rising.
float riseStart;    //Start point of the ball and position of ball (follows the ball)

float bsize1;      //original size of ball
float bsize2;      //Size of dropping small ball

// ----------------------------------------------------------------------------------------

void setup() {
  size(640, 360);

  x = width/2;    //Ball rise from middle of window
  riseStart = height+bsize2;      //Ball starts from its own size below window
  bsize1 = 20;
  bsize2 = 3;
  upspeed = 5;
  gravity = 0.5;
} //function

void draw() {
  background(0);

  switch(state) {

  case RISE: 
    noFill();
    stroke(255);
    ellipse(x, riseStart, 
      bsize1, bsize1);  //Ball with size1 as 20
    riseStart = riseStart - upspeed;
    println("rS", riseStart);
    if (riseStart < bsize2) { // upper screen border 
      state = RESTART;
    }
    break; 

  case FALL: 
    upspeed = upspeed - gravity;
    riseStart = riseStart - upspeed;
    ellipse(x, riseStart, 
      bsize2, bsize2); // new small ball created
    if (riseStart>height+133) {  // lower screen border
      state = RESTART;
      upspeed = 5;
    }
    break; 

  case RESTART: 
    // restart 
    riseStart = height+bsize2+random(33, 333);
    state = RISE; 
    break;

  default:
    // Error 
    println("Error. Unknown state ");
    exit();    
    break; 
    //
  }//switch 
  //
}//draw

// ----------------------------------------------------------------------------------------

void mousePressed() {
  state = FALL;
}//function 
//

Now I look at your sketch from Nov 30th

First, you had your variables outside the class.

They must be inside the class (it’s not enough to have it in the same tab. It’s still seen as global variables which is bad. It’s bad when you want to use multiple different bubbles)


  float tempSize;
  float w;
  float h;
  boolean move = true;
  float maxW;
  float maxH;
  float minW;
  float minH;
  float wspeed;
  float hspeed;
  float riseY = random(0.5, 2);
  float riseStart;
  float start = random(0, 640);
  float mX;
  float mY;

Now, in the previous sketch without the class I used state.
Putting it together
Sketch with state inside the class


Bubble b1;

void setup() {
  size(640, 360);
  b1 = new Bubble(50);
}

void draw() {
  background(0);
  b1.all();
}

void mousePressed() {
  if (b1.over()) {
    b1.fall();
  }
}

//====================================================
//Bubble class tab

class Bubble {

  // constants: these are values that state can have (must be unique (0,1,2...))
  final int RISE    = 0;   // the word final makes them constants 
  final int FALL    = 1; 
  final int RESTART = 2; 
  // variable: current value of the state
  int state=RISE;  // not a state of the program, but the state of the ball

  float tempSize;
  float w;
  float h;
  boolean move = true;
  float maxW;
  float maxH;
  float minW;
  float minH;
  float wspeed;
  float hspeed;
  float riseY = random(0.5, 2);
  float riseStart;
  float start = random(0, 640);
  float gravity = 0.5;

  Bubble(float tempSize) {
    w = tempSize;
    h = tempSize;
    riseStart = tempSize + height;

    maxW = w*1.1+random(0, maxW/2);
    maxH = h*1.1+random(0, maxH/1);
    minW = w/1.1;
    minH = h/1.1;
    wspeed = w/100;
    hspeed = h/75;
  }

  void all() {
    // all (or script()) 

    print("Y ", mouseY);
    print("  RS ", b1.riseStart);
    print("  X ", mouseX);
    println("  Start", b1.start);

    switch(state) {

    case RISE: 
      show(); 
      move();
      top(); 
      break; 

    case FALL: 
      riseY = riseY - gravity;
      riseStart = riseStart - riseY;
      ellipse(start, riseStart, 
        3, 3); // new small ball 
      if (riseStart>height+133) {  // lower screen border
        state = RESTART;
        riseY = 5;
      }
      break; 

    case RESTART: 
      // restart 
      state = RISE; 
      riseStart = tempSize + height+100;
      start = random(w, width-w);
      break;

    default:
      // Error 
      println("Error. Unknown state ");
      exit();    
      break; 
      //
    }//switch 
    //
  } // method 

  void show() {
    //noFill();
    //stroke(255);
    fill(255, 0, 0); // RED 
    noStroke(); 
    strokeWeight(2);
    ellipse (start, riseStart, 
      w, h);

    if (move) {
      w = w + wspeed;

      if ((w > maxW) || (w < minW)) { // Makes bubble wobble.
        wspeed = wspeed * -1;
      }

      if (move) {
        h = h + hspeed;
      }
      if ((h > maxH) || (h < minH)) { // Makes bubble wobble.
        hspeed = hspeed * -1;
      }
    }
  }

  void move() {
    riseStart = riseStart - riseY;
  }

  void top() {
    if (riseStart < tempSize - tempSize -100) { 
      state=RESTART;
    }
  }

  void fall() {
    state=FALL;
  }

  boolean over() {
    // returns true or false; true when mouse is on balloon.
    // You had this in mousePressed before. 
    return 
      (mouseX < start + w/2) && 
      (mouseX > start - w/2) &&
      (mouseY < riseStart + h/2) && 
      (mouseY > riseStart - h/2);
  }
  //
}//class
//

Remember you can use ctrl-t for auto-format your sketch in processing.

Chrisir

2 Likes