Bubble popping animation

Hello!

Here is a simple sketch showing the use of cos and sin (taken from this forum).

This way you get a circle around a point.

PointCircle[] points; //might want to use a list (ArrayList)

void setup() {
  size(1300, 600);

  final float RADIUS = 80.8;

  final float ANGLE_INCREMENT = TWO_PI/10; 
  //2PI would only shoot down, PI is up down, 
  //halfPi is in 4 dirs and so on
  //you can also just use some random number like 0.3256
  //but try keeping it within 0-2PI

  points = new PointCircle[0];

  for (int i=0; i<10; i++) {
    float angle=i*ANGLE_INCREMENT; 
    float CENTER_X=width/2;
    float CENTER_Y=height/2;
    // make a new bullet
    PointCircle newBullet = new PointCircle( cos(angle)*RADIUS+CENTER_X, sin(angle)*RADIUS+CENTER_Y);
    // append it to array
    points = (PointCircle[]) append(points, newBullet);
  }
}

void draw() {
  background(255);

  for (int i = 0; i < points.length; i++) {
    points[i].display();
  }//for
}////func

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

class PointCircle { 
  // Bullet

  float posX, posY;

  PointCircle (float x, float y ) {
    posX = x;
    posY = y;
  }

  void display() {
    fill(255, 0, 0); 
    ellipse(posX, posY, 
      3, 3);
  }
  //
}//class
//

Here is another explosion based on the cos sin sketch (also from this forum).
It’s also with fading.


Bullet[] bullets; //might want to use a list (ArrayList)

void setup() {
  size(1300, 600);

  final float RADIUS = 1.8;

  final float ANGLE_INCREMENT = TWO_PI/10; 
  //2PI would only shoot down, PI is up down, 
  //halfPi is in 4 dirs and so on
  //you can also just use some random number like 0.3256
  //but try keeping it within 0-2PI

  bullets = new Bullet[0];

  for (int i=0; i<10; i++) {
    float angle=i*ANGLE_INCREMENT; 
    float CENTER_X=width/2;
    float CENTER_Y=height/2;
    // make a new bullet
    Bullet newBullet = new Bullet(
      cos(angle)*RADIUS+CENTER_X, sin(angle)*RADIUS+CENTER_Y, 
      cos(angle)*0.8, sin(angle)*0.8);
    // append it to array
    bullets = (Bullet[]) append(bullets, newBullet);
  }
}

void draw() {
  background(255);

  for (int i = 0; i < bullets.length; i++) {
    bullets[i].display();
    bullets[i].move();
  }//for
}////func

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

class Bullet { 
  // Bullet

  float posX, posY;
  float dirX;
  float dirY;

  int fade = 255; 

  Bullet (float x, float y, 
    float dx, float dy) {
    posX = x;
    posY = y;
    dirX = dx;
    dirY = dy;
  }

  void display() {
    fill(255, 0, 0, fade); 
    noStroke();
    ellipse(posX, posY, 
      3, 3);
  }

  void move() {
    posX+=dirX;
    posY+=dirY;
    fade--;
  }
  //
}//class
//

Please note, that it has a class Bullet which represents one circle (shrapnel) of the explosion.

On sketch level (outside the class) is an array of that class.

For your sketch that means that when a ball explodes (and there could be multiple balls with multiple explosions) you start a explosion like in this sketch.

So best when each ball has an array bullets inside it.

You then need the class Bullet.


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;

  Bullet[] bullets; //might want to use a list (ArrayList)


  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
      showExplosion();
      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;
    explode();
  }

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

  void showExplosion() {
    for (int i = 0; i < bullets.length; i++) {
      bullets[i].display();
      bullets[i].move();
    }//for
  }

  void explode() {

    final float RADIUS = 1.8;

    final float ANGLE_INCREMENT = TWO_PI/10; 
    //2PI would only shoot down, PI is up down, 
    //halfPi is in 4 dirs and so on
    //you can also just use some random number like 0.3256
    //but try keeping it within 0-2PI

    // full reset 
    bullets = new Bullet[0];

    for (int i=0; i<10; i++) {
      float angle=i*ANGLE_INCREMENT; 
      // make a new bullet at CURRENT POSITION : start, riseStart
      Bullet newBullet = new Bullet(
        cos(angle)*RADIUS+start, sin(angle)*RADIUS+riseStart, 
        cos(angle)*0.8, sin(angle)*0.8);
      // append it to array
      bullets = (Bullet[]) append(bullets, newBullet);
    }
  }
}//class

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

class Bullet { 
  // Bullet

  float posX, posY;
  float dirX;
  float dirY;

  int fade = 255; 

  Bullet (float x, float y, 
    float dx, float dy) {
    posX = x;
    posY = y;
    dirX = dx;
    dirY = dy;
  }

  void display() {
    fill(255, 0, 0, fade); 
    noStroke();
    ellipse(posX, posY, 
      3, 3);
  }

  void move() {
    posX+=dirX;
    posY+=dirY;
    fade-=1;
  }
  //
}//class
//


Chrisir

(I also showed you an explosion above some weeks ago)

2 Likes