2.2 Draw a Bubble
1.Introduction2 lessons, 05:16
2.Drawing and Animation4 lessons, 29:33
3.User Interaction2 lessons, 11:19
4.Conclusion1 lesson, 01:35
2.2 Draw a Bubble
So, the change in these drawings are usually little blobs or curved lines. That should be easy enough to do. Let's start by joining another circle in the top right corner of our bubble. We run through circles being in proportion to the bubble meaning that if we want to change the bubble's size then our little circle of change should change as well. This means that rather then use pixel values for the width and height. We should use fractions of the bubbles' size. Because we'll be reusing the width, height, and position of the bubble. Then let's make them into variables so it's easier to see what we're dealing with. Let's create a diameter variable and set that to 100. Then we'll create an x and y variable for our x and y coordinates and set them each to be 50. Then we can replace the values in our call to ellipse function with these values. Great. So let's draw that with a bit of shine. First, we'll draw another circle by using the ellipse function. To start with, we'll just draw it in the middle of our existing circle. To do that we say, ellipse. And x and y. Remember x and y is the midpoint of the circle. Then for the width, we'll use the diameter variable again, but let's make it an eighth of the size of the circle. So just divide it by 8. And we'll do the same for the height. Okay, let's just check this out in the browser. There is. We should make it a solid color though. If we go back to our code, you can see why our smaller circle looks the way it does. Because this fill method is called using the light blue, anything you draw after that will use light blue as its fill color. And that's the same for the stroke color. So just before drawing your second ellipse, we want to change the fill to white. This means that our outer circle will draw correctly, with the light blue fill color. But then anything drawn after here will use white. Let's have a look. Super. Okay, let's put it in the right place. We want our to be in this top right hand corner. So we'll need to figure out our x and y positions. You know the middle point of the circle is the circle's x position, and we also know the diameter of the circle. That means that the x position would be the current x position of the circle plus a fraction of our diameter. I'd say we want it up here, but half way from the center, which would be the center position plus the bubble diameter times a quarter. So let's change the x position to x + diameter times 0.25. Let's put that last bit in parentheses, so it's clear. And switch back to the browser to have a quick look. Okay, great. Now for the y position. You'll just do the exact same thing as before. We want it to appear about a quarter of the diameter from the center point. Let's copy and paste that. The only difference is that instead of adding a quarter to the diameter. We'll take it away, as we want it to be closer to the origin of the y axis. Pretty good, but it's still a bit close to the edge for my liking. Let's bring it in a little bit by tweaking the x position. Try changing it to 0.2 to bring it in a tiny amount. Let's have another look. That's better. That doesn't look quite shiny enough yet, though. Looks too much like just a circle. Now remember that when we drew our smaller circle, because of the order of code, we're drawing over that circle. We're essentially painting on top of it, but we're going to use that to our advantage. If we paint another circle over our smaller circle in a slightly different position, and set the fill color to be the same as the bubble color, then we can essentially carve out a shape from the one behind it. Let me show you what I mean. Okay, let's draw yet another ellipses. This time we want the fill color to be the same as the bubble color. So set that to light blue again. And we don't want the circle to have a border as we don't it to really be seen as a circle. P5 has a special function for this. noStroke, make sense? Then we draw the ellipse. First, we just copy the line, drawing our shine and paste it here. If we were just to leave it like this, it would basically draw over existing white circle. So instead we want to just offset it a little. We wanted to set a little lower and to the left. So to make it set more to the left, we just want multiply the diameter by as much. Let's change this to 0.15. Let's have a quick look in the browser. So you can see the kind of effect we're trying to achieve here. The light blue circle is on top of the white one but if you didn't know how it was made you would just think it's a little moon shape. We'll need to do the same for the y position. Let's take off 0.05 again, and, make this 0.2. I think this looks pretty good. Feel free to experiment with these values, to create your own shine effect. The important thing to remember, is to always use multiples of the size of the bubble. This means that if you want to make your bubble bigger or smaller at a later date, then when you resize it shine will automatically resize correctly too. In the next lesson, we're going to do something pretty exciting, we're gonna make that bubble move.