• Overview
  • Transcript

3.2 Text and Transparency

With p5 we can draw text as well as shapes. In this lesson I’ll show you how to draw text to say that a bubble has been popped. We’ll also change the opacity of the text over time so that it fades away.

Related Links

3.2 Text and Transparency

Now that can detect when a bubble has been clicked on, we need to decide how we best represent them being popped. First things first, the bubbles should probably disappear. So what's the easiest way to make a bubble disappear? Well, by not drawing it in the first place. Let's wrap an f statement around the cord which draws the bubble. We'll say if the bubble has been popped then do nothing. Else, draw the bubble as usual. Let's have a look. Excellent. The bubbles are now not joined when I click them. Now why don't we try something more interesting? Why not have the word pop appear when the bubble has been clicked on? One of the great benefits of P5 is that it allows us to draw text onto a canvas as well as shapes. Inside our f statement we'll want text appear if the bubble has been popped. So in here. First we want to set the size of our text which we do by saying text size 24. Where 24 is the font size in pixels. We want our text to be centered or justified meaning the text will be placed directly in the center of where we chose. We use the p five constant center and in upper case here. Let's make the text black. And finally, we need to specify what the text should say and where it should be displayed. We do this by saying text, then the string we want to display. Let's make that pop with a couple of asterisks. And we want it to appear in the center of the bubble which we know is bubble.x and bubble.y. But remember as always bubble.y needs a subset otherwise the text will be stuck down in the bottom off screen. Okay, let's have a look in the browser. Pop, pop, okay that's pretty good, but it's not great. As we know of the word pop being joined constantly. A neat little thing to do would be to have that text gradually fade out and disappear. We do this with opacity. Opacity is basically how see through something is. If our text is at an opacity of one, it would mean that you couldn't see through it. It would be completely opaque. if you had done an opacity of zero on the other hand, then it would be completely see through. You wouldn't even see the text. So what we want to do is gradually change the opacity from one to zero over the course of a couple of seconds. To keep track of our opacities let's add a text to opacity attribute to our bubble object. We'll set it to be completely opaque to begin with. Then in our draw function, we'll want to use this opacity in our text. We do this by instead of specifying a solid color for a full color, in this case black. We use the RGBA equivalent. RGBA is a way of representing colors not by name but by the amount of red, green, and blue the color has in it. Black has no red, green, or blue in it, so we say rgba 0, 0, 0. Then the fourth argument here is the alpha channel which represents capacity. So we need to concatenate our text opacity to the string and put it here. So now our text is using our opacity, all we need to do now is decrease the level of opacity over time. That means that in each draw loop we'll just take a small amount off the opacity. We'll do this after the text has been drawn. So that the next time the loop comes around the value will be a little bit less. Let's write, bubble.textopacity = bubble.textopacity minus 0.01. This will keep going until opacity will be zero, and you can't see it anymore. Let's save then, and have a look. Okay, so this is weird. When we pop a bubble it seems to fade out quickly. But then reappears all white. Why is this happening? Well it's because when we take a small amount off that opacity each time it eventually gets down to zero and disappears. But then it keeps going, passing zero into negative values. And once it hits a negative value P5 isn't sure what to do. So it ends up getting split again. To fix this we'll write a simple catch. We'll say if the bubble.textOpacity > 0.01 then keep decreasing the opacity. If it's not, simply set the opacity to zero. This means that we will never get a negative capacity and therefore detects should fade correctly. Let's have another look. Works perfectly and looks pretty good too I think. We've covered a lot in this course so let's wrap things up.

Back to the top