Join Barton Poulson for an in-depth discussion in this video Drawing arcs, part of Interactive Data Visualization with Processing.
- View Offline
The next primitive shape that we're going to cover in Processing is closely related to the circles and ellipses that we just did, it's arcs or sections of circles. The procedure for doing arcs is very similar to the circles, except we have two extra commands that specify the beginning and the end of the arc. It can get a tiny bit complicated, because of the way this is done, but we will walk you through several different ways of accomplishing this. So, the first thing I'm going to do is I'm going to put a comment with the name of this particular sketch.
And then I'm going to create a window that is 600 x 200 pixels and I'll turn on anti-aliasing. And then I'm going to set a strokeWeight of 5 pixels to use throughout this sketch. Now, the general form for the arc command goes like this, it's arc and then in parenthesis you have the x and the y coordinates for the center of the arc.
Then you have the width and the height and then you have the start and the stop of the arc. Now, the tricky thing about the start and the stop is that they are measured in the radians, not degrees, but, in radians and they also start at 3 o'clock on the circle. It is possible to convert from degrees to radians. I'll show you how to do that. But, truthfully, this is a something that you can get used to in a little bit of time. I'm going to start by drawing a quarter of an arc. All I do is arc and then put 100 pixels over 100 pixels down.
I'll make it 75 pixels tall, 75 pixels wide. And then I'm going to start it at 0, which is right at 3 o'clock and then it goes clockwise around. And now, I'm going to do just a quarter of an arc. Now, if you remember any of your maths classes, you may remember that a circle is two times pi, to go all the way around the circumference of a circle. So, half a circle is pi, and a quarter of a circle, 90 degrees, is one half of pi.
Now pi is a built-in function or it's a built-in variable in Processing. So, you can just write pi and if you want to, you can divide it by 2 like that or you could multiply it times 0.5, or there's even a built-in one that is called - I've got to do it in all capitals, HALF PI, that's another way of doing that. Now, I personally like to do the multiplication, because then it makes it clear what I'm doing, especially if I have several that I'm working on, so, okay.
So, I have got six things here in this function. First, I say arc, the name of the function. Then the x and the y coordinates for the center of the arc that I will be drawing. Then I have the width and the height of the arc, and then I have this start and the stop of the arc. Starting at 3 o'clock and measured in radians and going clockwise to the end, and so, when I do that I can just hit Run and there's my quarter arc. It starts at 3 o'clock, it goes clockwise down to 6 o'clock and it stops.
Now I'm going to do a few more arcs, just to show how this command can work a little better. You saw for instance that the arc had a fill, let me bring it back up. The arc has a white fill, that's by default. But, most of the time when you do an arc, you don't want a fill, and so the easy way to get rid of that is with a special function that is just called noFill. Let's do with lowercase, but with a capital F, the bumpy caps, and then the open and close parenthesis (), because it's a function, it needs to have a place for arguments, but there aren't any arguments in this particular one.
And then we close that with a semicolon (;). Now I'm going to specify another arc. I am going to move this one over, 233 pixels from the left side, down 100 again. It will also be 75 wide and 75 tall. This one I will also start at 0, at 3 o'clock. But, this one I'll wrap half way around. So, I'll go to 9 o'clock and that is pi, halfway through, close the parenthesis, put the semicolon, Save it and Run.
And now, I have my half arc, it goes halfway from 3 o'clock to 9 o'clock. And this one has noFill; you just see the background right through it. Now, let me show you two other things you can do, maybe you want the Fill and you don't want the Outline, in that case we simply flip it around another way. What I'm going to do now is I'm going to specify a color for the Fill. So, I'm going to type in fill and then I'll make it a nice deep sky blue. I'll use 0, 191, 255. I'm not using the hex; I'm just using the RGB on the 0 to 255 scale.
So, there's my sky blue color. Then I'm going to turn off the outline by going noStroke, and then I'll put the arc command in. I'm going to move it over a little further to 367, same height, 100 pixels down, same size, 75 pixels for the width and height of the arc. I'll again start it at 0 at 3 o'clock. And then this one I'm going to show you how you can measure it in degrees. I want it to go all the way around up to 12 o'clock, that's 270 degrees.
And the way you can work with degrees here is you use a function called radians. And it's lower case, and then in parenthesis you put the degrees. And so what this does is it takes that degrees and then turns it into radians. It'll turn into 1.5 radians for us. And then I'm going to put another parenthesis, because the first parenthesis closes the degrees for the radians. One of the things is if you move the cursor, you can see where the adjoining parentheses or bracket is. So, I need 2 parentheses there at the end and I put my semicolon, I Save it and I Run.
And now I have a three quarter arc with no outline. And then let's just do one more, this time I'll set the Stroke back to 0 and leaving the Fill in though, if you don't change an attribute, it just carries down. So, the Fill will be in this one without me having to specify it again. And I'm going to do one more arc, 500 pixels over 100 down like the others, 75 and 75, and this one I'm going to do little differently, because I'm going to start it at 0, but, this time I'm going to go all the way around.
Just for fun I'll use the built-in constant 2 pi and I Save it and I Run it. Now, you see it, because, I went all the way around it would have been easier for me to just use a circle, but I wanted you to see that the arc function can go all the way around to whatever degree or whatever angle you want it to. And so that is the end of the arcs and that part of the primitive function for Processing.
- Exploring the need for creative data visualization
- Drawing basic lines and shapes
- Introducing variables, strings, and arrays
- Modifying drawing attributes such as color
- Making drawings more dynamic with animation loops and spirals
- Creating keyboard- and mouse-based interactions
- Adding images, video, and sound
- Reading in text or XML data
- Creating plots and charts
- Publishing and sharing your work