Bubble popping animation

Processing Beginners
20

Thanks a million!!..
This really helped us understand the switch function better :slight_smile:
With the bubble code now working with the “pop” and a small piece falling to the ground and also the reset function working as we want, we started looking at the “explosion” today.

We have now moved on in the “coding train course” on YT to arrays. (We have been waiting to start with that chapter until these other things were solved.)
Of course we got stuck after a couple of hours and I don’t want my teenager son to loose hope I need help on this to.

Our goal on this is to make particles/points appear on the click (case FALL:), (This will look like the ghost of the bubble when it bursts) then quickly dissiperar with a fade.
We have found a way on how to do the fade and we have a point working in a test program.
This point is set to appear at the radius border (hard-coded) of the bubble (a static circle in the test program) and then fade away.

We have made the array and can create many points but we got stuck in how to position them around the bubble.
Now, we need to have them appear all around the circle.

The problems:
Position of point cloud cant follow the dropping part.
Creation of points around where the bubble was when it was clicked. In the real bubble program, we use a variable name “riseStart” as the start point for the bubble and then retract (-) from this to make the bubble rise. The same variable is then reused by the dropping part with a bit of gravity added.
The point cloud we now want should not follow “riseStart” when it appears. The small part drops with this variable but the point cloud should stay!..
Positions of points around the bubble
We got stuck on this and decided to call it a day when we realized this might be including to many new things. On search we found trigonometry and my son haven’t even started on that in school. So, I felt that I need to check with you what the best way to do this is. Maybe there is a simple way that we haven’t found or figured out.

The test program:
In the test program below we use a static circle as bubble but use variables for position of it so we can pretend it could move (as the real bubble)
There is a array of 10 point lining up right now. We cant figure out how to get them to spawn where the circle was and then stop using “riseStart” to stay while fading out. Maybe move a little bit like a implode… hmm…
The code is one tab only.


float col = 255;
boolean boolFade;
boolean bFadeIn;

Matter[] matters = new Matter[10];

void setup() {
  size(200, 200);

  for (int i = 0; i < matters.length; i++) {
    matters[i] = new Matter(50);
  }
}

//
//====================================================
// 
void draw() {
  background(0);

  for (int i =0; i < matters.length; i++) {
    matters[i].lol();
    matters[i].mFade();
  }
}
//
//====================================================
//
void mousePressed() {
  col = 0;
  boolFade = true;
  bFadeIn = !bFadeIn;
}
//
//====================================================
//

class Matter {

  float fade;
  int passedTime;
  int maxTime = 50;
  float rad;
  float riseStart;
  float x;
  float x_;
  float w;
  float h;
  float maxW;

  Matter(float tempSize) {

    rad = tempSize/2;
    riseStart = 100;
    x = 100;
    x_ = random(75,150);
    w = tempSize;
    h = tempSize;
    maxW = w*1.1;
  }
//
//====================================================
//
  void lol() {

    noFill();
    stroke(col);
    strokeWeight(1);
    ellipse(x, riseStart, w, h); // bubbla
    mFade();
  }
//
//====================================================
//
// the void below is from google. It was a rectangle fading in and out on click.
// We just commented out the "else" line in the code, we always want it to fade out. 
//Maybe more things can be cleaned up from this code. We were just glad it worked right now :)
  void mFade() {
    if (boolFade) {
      passedTime++;
      if (bFadeIn) {
        fade = map(maxTime - passedTime, 0, maxTime, 0, 255);
      } else {
        //fade = map(passedTime, 0, maxTime, 0, 255);
      }
      println(bFadeIn + " " + passedTime + " " + fade);
      if (fade > 254 || fade < 1) {
        boolFade = false;
        passedTime = 0;
      }
    }
    noFill();
    stroke(255, fade);
    strokeWeight(1);
    point(x_, riseStart-rad); // the point
  }
}//class
2 Likes