P5=1
  • Overview
  • Transcript

2.3 Make That Bubble Move

In this lesson you'll learn about animation in p5.js so that we can make our bubble move.

2.3 Make That Bubble Move

Okay, now that we've got a pretty good bubble, let's get things moving. Now, remember that our draw function here gets called over and over again. So essentially our bubble or three ellipses are getting drawn again and again every single frame basically on top of itself. In order to move the bubble, we need to nudge it along by giving it a slightly different position with each call. Think of animating a flight book where you might make slight changes with each page in order to give the illusion of movement. That's what we're going to do here. Before we start though, let's organize our code a bit better. Our draw function is getting quite big and if someone came along who didn't know what this code was doing, then they'd get quite confused. Let's create and draw a bubble function where we'll put all the code related to our bubble in. We do that by saying function drawBubble, then just cut and paste all the code from our draw function into drawBubble. Then we'll call drawBubble from inside the draw function. This means that our drawBubble function is called every single time draw is called. But now that code is extracted away into it's own function, making the draw call nice and clear. Okay, because we're going to be moving the bubble, we'll need a way to keep track of it's position. The best way to do this is to create a bubble object. Because we want this to be accessed by all our functions, we'll create it right at the top here. This will just be a normal JavaScript object. And we'll put our x and y positions in here, like so. And let's also put our diameter in here too. So that all the information about the bubble is together. Now we've got our bubble object, we have to replace the variables in our drawBubble function in order to use the object values. First we can remove these variables from the top of the function, and everywhere you see the variable used, just stick bubble dot in front of it like so. Okay, let's just check that everything still works. Perfect, right, let's move our bubble to the right. Like I mentioned previously, we want to move our bubble a tiny bit each time the draw function is called. Remember that the draw function gets called automatically as fast as it can. So we need to decide how many pixels to move per frame. The more pixels you move per frame, the faster our bubble will move. Let's call this number of pixels our speed, and add it to our bubble object. Let's move five pixels per frame. So our speed is five. We'll also need to keep track of the number of pixels to offset the bubble, and its shine every frame in order to know where to draw it. Let's call this offset, and add it to our object too. So how do we use this? Well first at the top of the drawBubble function, we need to increment our offset. This offset is essentially a counter. This counter keeps track of the number of pixels our drawing needs to be offset by. So for example, the first time this function is called, the offset is zero. So we draw the bubble just as usual. The next time it's called, then it should be drawn five pixels further along. So the offset is five. The next time it's called after that, it should be drawn ten pixels along. Then 15 pixels along. You get the idea. So this offset is bubble.offset = bubbled.offset + bubble.speed. This is basically saying the bubble's offset is now the value of the previous offset plus 5 because our speed, the to move each frame, is 5. Now we just need to add that offset to each time we draw a shape. So anywhere you see bubble.x, we simple add bubble.offset. That means that every time around this draw loop, the offset gets bigger and bigger and our bubble moves further and further along the x axis. Let's have a look. Whee, watch it go. So there's a couple of obvious things wrong here. The first is that the bubble leaves this trail behind. This happens because we're just drawing bubble after bubble without cleaning up after ourselves. The paints in our canvas from the previous circles doesn't just go away. An easy way to get around this is to paint the entire canvas our background color before we draw each new ellipse. First, let's stick your background color in a variable at the top here, as we'll be using it more than once. Then replace the color in our setup function with this variable. Now we just need to paint our canvas every time the draw function is called. We want to do this in every frame, but we need to do it just before we draw our bubbles. So in our draw function, on the line before we call drawBubble, we'll just write background and then in parenthesis, backgroundColour. This will paint the background of the canvas with our backgroundColour. Let's just check that's working. Great. The second thing you may have noticed is that bubbles don't move side to side, they go up. Let's fix that. You may already have an idea of how to do that. If so, pause the video and have a go yourself. Did you pause, really? Okay, let's see if you did what I'm going to do here. At the moment, we're adding the offset to the x position of our bubble and it's elements. Instead, we want to add this to the y axis. So anywhere we're adding x, we'll remove that and add y instead. Let's have a look. No, our bubble is falling. That's because we're adding to the y position. Remember, y goes from zero at the top to whatever the height of your canvas is at the bottom. So we'll have to subtract the offset from the y position. Minus, minus, minus. Where did it go? Well now that our bubble has learned to float, we need to start it at the bottom of the page. This is easy enough to do. Just head to the top of your code where we have our bubble object and change the starting y position to window.innerheight. This is basically the height of your browser window in pixels. Now remember that the x and y positions are the middle of the circle. So if we use this as is, the circle would still be half visible at the bottom. Let's add a couple of hundred pixels to make sure it's well and truly off the page. Right, to the browser. A floating bubble of fun. In the next lesson, we'll look at programmatically adding a few more bubbles to our canvass.

Back to the top