Tip:
Highlight text to annotate it
X
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.