Bubble popping animation help

Hi
Me and my son are following Daniel Shiffman’s learn processing guide on YT.
We are on creating objects and are want to make a bubble.
This bubble is wobbling and rising but we also want it to pop when clicked on.
It doesn’t need to be realistic but We are looking for a type of animation we’re the ellipse turns in to a point that falls down. Also a small number of particles “exploding” from the ellipse when it disappears…

Can anyone help us with this code? If so. Please comment in code since we are still learning not everything is logical :blush:

Thx

1 Like

Well, the easiest way to achieve this is probably to reduce the size over time and when the size is 0, have points spawn at the Location and spread away… but that would be easier to explain if i knew what you have so far.

1 Like

here…


// for explosions (these are actually Shrapnels)
ArrayList <Explosion> missiles; 

//
// ---------------------------------------------------------------
//
void setup() {
  // runs only once - init
  size(800, 600); 

  // explosions --------------------------------------
  // Create an empty ArrayList
  missiles = new ArrayList<Explosion>();   
  //
} // func

void draw() {
  // runs again and again

  // delete screen
  background(0, 64, 0);

  // explosions (show moving shrapnels)
  explosionManager();
} // func

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

void mousePressed() {
  explode(); // Init new explosion!!!!
}

void explode() {
  // Init new explosion!!!!
  // explode!
  missiles.clear();
  int maxMissiles = int(random(4, 222));
  for (int i=0; i<maxMissiles; i++) {    
    // this is where explode missile/shrapnel object is created 
    // and added to the missiles arrayList.
    // It is small (4) and life decrease is .72 (how fast it dies), 
    // no Line (false).
    missiles.add( 
      new Explosion(    
      random(mouseX-3, mouseX+3), random(mouseY-9, mouseY+9),   // POS: 
      random(-1.3, 1.3), random(-2.7, .6), 
      4, .72, false)); //
  }
} // method

//--------------------------------------------------------------------------------------------------
// the tab for Explosions and related and the complete class

void explosionManager() {
  // this is a new for loop. 
  // Actually for the Shrapnels.
  for (Explosion m : missiles) {
    m.decreaseLife(); // call the decrease life (for explosion)
    m.fly();          // call the "fly" method of the missile
    m.display();      // call the "display" method of the missile
  }
  //
  // remove dead ones (you need to have a conventional for-loop here) 
  for (int i=missiles.size()-1; i>=0; i--) {
    Explosion m = (Explosion) missiles.get(i);
    if (m.dead) {
      missiles.remove(i);
    }
  }
} // func

// ===============================================================

class Explosion {
  // ONE shrapnel 
  float startlocX, startlocY; // start pos 
  float x, y;          // current pos 
  float xvel, yvel;    // velocity
  float sizeMissile ;  // size for rect
  float life=20;       // how much lifes does it have
  float lifeDecrease;  // remove lifes
  boolean dead=false;  // is it alive? 
  boolean withLine;    // draw line? Explosion has none.
  //
  // contructor
  Explosion(
    float _startlocX, float _startlocY, 
    float _xvel, float _yvel, 
    float _size, float _lifeDecrease, 
    boolean _withLine) 
  {
    startlocX = _startlocX;
    startlocY = _startlocY;    
    x = startlocX;
    y = _startlocY;
    sizeMissile = _size;
    lifeDecrease=_lifeDecrease;
    xvel = _xvel;
    yvel = _yvel;
    withLine=_withLine;
  }  // contructor
  //
  void display() {
    //stroke(255, 2, 2);
    fill(255, 2, 2);
    noStroke();
    if (withLine) {
      line(startlocX, startlocY, x, y);
    }
    sizeMissile-=.07;
    rect(x, y, sizeMissile, sizeMissile);
  } // method
  //
  void fly() {
    x += xvel;
    y += yvel;
  } // method
  //
  void decreaseLife() {
    life-=lifeDecrease;
    if (life<=0 || sizeMissile<=0) {
      dead=true;
    }
  } // method
  //
} // class
//
// ======================================================================
3 Likes

as you see, the new explosion is started in explode()

the position for the explosion is mouse position

grab the color from the bubble that explodes

1 Like

new version with

  • color and also with
  • a bit of falling for the shrapnel’s.
  • ball rising and then shrinking and sinking
// for explosions (these are actually Shrapnels)
ArrayList <Shrapnel> shrapnels; 

// Test bubble
Ball ball1;

//
// ---------------------------------------------------------------
//
void setup() {
  // runs only once - init
  size(800, 600); 

  // explosions 
  // Create an empty ArrayList
  shrapnels = new ArrayList<Shrapnel>();
  ball1 = new Ball(); 
  //
} // func

void draw() {
  // runs again and again

  // delete screen
  background(0, 64, 0);

  // explosions (show moving shrapnels)
  explosionManager();

  // ball display 
  ball1.display();
} // func

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

void mousePressed() {
  // 
  ball1.stateBall=1;
}//func 

//--------------------------------------------------------------------------------------------------
// the tab for Explosions and related and the complete class

void explosionManager() {
  // this is a new for loop. 
  // Actually for the Shrapnels.
  for (Shrapnel m : shrapnels) {
    m.decreaseLife(); // call the decrease life (for explosion)
    m.fly();          // call the "fly" method of the missile
    m.display();      // call the "display" method of the missile
  }
  //
  // remove dead ones (you need to have a conventional for-loop here) 
  for (int i=shrapnels.size()-1; i>=0; i--) {
    Shrapnel m = (Shrapnel) shrapnels.get(i);
    if (m.dead) {
      shrapnels.remove(i);
    }
  }
} // func

// ===============================================================

class Ball {

  color colorBall = color(random(255), random(255), random(255)); 

  float x=random(55, width-55);
  float y=random( height-55, height);

  float yvel=-3; 

  int sizeellipse = 55;

  int stateBall = 0;

  boolean dead = false; 

  // NO constr 

  void display() {

    y+=yvel; 

    switch (stateBall) {
    case 0:
      // wait
      if (!dead) {
        fill(colorBall);
        ellipse(x, y, sizeellipse, sizeellipse);
      }
      break; 

    case 1: 
      // hit - shrink and sink 
      yvel=2; 
      sizeellipse--; 
      if (sizeellipse<=30)
        stateBall=2; 
      fill(colorBall);
      ellipse(x, y, sizeellipse, sizeellipse);
      break; 

    case 2:
      explode(x, y, colorBall); // Init new explosion!!!!
      // reset 
      dead=true; 
      stateBall=0; 
      ball1=new Ball(); 
      break;
    }//switch
  }

  void explode(  float x1, float y1, 
    color colorShrapnel) {
    // Init new explosion!!!!
    // explode!

    // clear old (optional)
    // shrapnels.clear();

    int maxshrapnels = int(random(14, 222));
    //color colorShrapnel = color(random(255), random(255), random(255)); 
    for (int i=0; i<maxshrapnels; i++) {    
      // this is where explode missile/shrapnel object is created 
      // and added to the shrapnels arrayList.
      // It is small (4) and life decrease is .72 (how fast it dies), 
      // no Line (false).
      shrapnels.add( 
        new Shrapnel(    
        random(x1-3, x1+3), random(y1-9, y1+9), // POS: 
        random(-1.3, 1.3), random(-2.7, .6), 
        4, .72, false, 
        colorShrapnel)
        ); //
    }
  } // method
  //
}//class

// ===============================================================

class Shrapnel {
  // ONE shrapnel 
  float startlocX, startlocY; // start pos 
  float x, y;          // current pos 
  float xvel, yvel;    // velocity
  float sizeMissile;   // size for rect
  float life=32;       // how much lifes does it have - e.g. 20 - this is the life span of the shrapnel
  float lifeDecrease;  // remove lifes
  boolean dead=false;  // is it alive? 
  boolean withLine;    // draw line? Explosion has none.

  color colorShrapnel = 0; // color(random(255), random(255), random(255)); 

  float gravity = 0.103;

  // contructor
  Shrapnel( float _startlocX, float _startlocY, 
    float _xvel, float _yvel, 
    float _size, float _lifeDecrease, 
    boolean _withLine, 
    color colorShrapnel_) {
    startlocX = _startlocX;
    startlocY = _startlocY;    
    x = startlocX;
    y = _startlocY;
    sizeMissile = _size;
    lifeDecrease=_lifeDecrease;
    xvel = _xvel;
    yvel = _yvel;
    withLine=_withLine;
    colorShrapnel=colorShrapnel_;
  }  // contructor

  void display() {
    fill(colorShrapnel);
    noStroke();
    if (withLine) {
      line(startlocX, startlocY, x, y);
    }
    sizeMissile-=.07;  // the size shrinks 
    rect(x, y, sizeMissile, sizeMissile);
  } // method

  void fly() {
    x += xvel;
    y += yvel;

    yvel += gravity;
  } // method

  void decreaseLife() {
    life-=lifeDecrease;
    if (life<=0 || sizeMissile<=0) {
      dead=true;
    }
  } // method
  //
} // class
//
// ===================================================
3 Likes

Wow!!
Amazing!

I can really use this example to learn a lot from!..
Thx!
My son will also be really impressed to and inspired!

3 Likes

Nice to hear this and thanks for your words!

Chrisir