2.4 Bubbles Everywhere
What’s more fun than a single bubble? Lots of bubbles! In this lesson you’ll learn how to use a loop in order to produce a variety of different bubbles.
1.Introduction2 lessons, 05:16
2.Drawing and Animation4 lessons, 29:33
3.User Interaction2 lessons, 11:19
4.Conclusion1 lesson, 01:35
2.4 Bubbles Everywhere
So what's better than a bubble? Yep, a lot of bubbles. That's what we're going to be doing in this lesson. First things first. We'll need a way to keep track of all our bubbles so we can control them all. The best way of doing this is to use an array which we'll call bubbles and stick out the top here. We also want a way of knowing how many bubbles to draw. So let's carry it available called total bubbles and stick in node m80. We're putting these values at the top of our file so all of our functions have access to them. We want to create all of our bubbles up front, so what better place to do that than in your set up function? We can use a forlip to create one bubble at a time and add it to our bubbles array. So let's say for var i equals 0. I is less than the total amount of bubbles. And we'll actuate i each time. Then we're gonna cut our bubble from out of the top here and paste it inside the for forlip. And instead using the bubble variable, we'll push it onto the bubble array we've created. Now we have an array of 80 identical bubbles. In order to draw all these bubbles, we'll use a for each statement. A for each allows us to edit right over our bubble array and execute a function for each bubble in the array. Inside the draw function, we write bubbles.foreach. Then the function takes que for each bubble. Function and we'll pass in bubble as argument. This is the individual bubble in our array. All you need to do now is move our draw bubble call into the for each function and pass the individual bubble as an argument. Then we'll need to make sure to accept this bubble in the draw bubble function by specifying it as a parameter. The rest of the code doesn't need to change. As you can see, we're already using bubble as the name object we're drawing. Okay, let's see if it's still working. Great. Now not much has changed, well, visually at least. Because we created 80 bubbles, all identical, then they're all getting drawn in the exact same place, and move at the exact same time as each other. Let's fix that. We want to draw our bubbles at various points along the x axis so they're all spread out. In our set up and draw functions, P5 provides us with a random function. This function takes two numbers and returns a random number between these two numbers. Lets use that to generate random x positions for our bubbles. That is how far along the x axis they are. And our bubble object, replace the default exposition with random and the first value is zero, and width. Width is available given to us by P5 automatically, which is the width of our canvas. So what we're seeing here is make the x position of the bubble, a random point between zero and the width of our page. Let's take a look. That's a lot of bubbles. It's a bit strange though, seeing them all moving at the same speed, and being at the same size. Let's see what else we can apply in the random function too. How about the size of the bubble? Let's make the diameter to be somewhere between 50 and 120. Also what about speed? Let's say between 1 and 10. Okay, to the Rosar. That's quite cool. The only sad thing is that we eventually run out of bubbles. Even if we created hundreds of bubbles they would all eventually go to the top of the canvas and disappear. But they wouldn't actually disappear. When they get to the top, they'll go past the top of the y-axis, which is zero at the top of the screen, they would keep going. As the bubbles go higher and higher, the y-axis keeps decreasing, going past zero, and into the minus numbers. A little trick we can do to create the illusion of there being an infinite amount of bubbles to check if a bubble has risen past the top of the page and therefore off screen. If so it changes position back to being the bottom of the screen. To do this we just add a simple check at the start of our draw function. We say, if the bubbles offset, that is the number of pixels it's travelled upwards from, its original starting position, is greater than height of the canvas, then reset its offset to bring it back to where it started. So that's something like. if (bubble.offset > height) where again height is the height of the canvas provided to us by b5. Then bubble.offset = 0. Now this isn't quite correct. Remember we started our bubble 200 pixels off the screen? That means that the offset has hit 200, the detainment is visible. So we need to check if the offset is greater than height of the canvas, plus this 200. That isn't quite right either. This means that soon as the bubble hits the top of the canvas, it will disappear. We want to wait until the full bubble is no longer visible before we position it. So we'll need to add another 200 to the offset to make sure it's definitely gone, that's 400 in total. Okay, great so now, any bubble that goes off the top of the screen will automatically get repositioned to the bottom of the screen. Let's have a look. Lovely. A constant stream of happy bubbles. I'll leave you to stare at your beautiful creation for a while before we learn to destroy it in the next lesson.