Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Drawing arcs

From: Interactive Data Visualization with Processing

Video: Drawing arcs

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.

Drawing arcs

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.

Show transcript

This video is part of

Image for Interactive Data Visualization with Processing
Interactive Data Visualization with Processing

72 video lessons · 12124 viewers

Barton Poulson
Author

 
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
      58s
    2. What you should know
      1m 22s
    3. Using the exercise files
      56s
  2. 11m 51s
    1. Overview of data visualization
      11m 51s
  3. 11m 53s
    1. Installing Processing
      3m 38s
    2. Overview of Processing
      4m 5s
    3. Exploring libraries
      4m 10s
  4. 1h 1m
    1. Basic setup
      7m 31s
    2. Drawing points
      4m 37s
    3. Drawing lines
      5m 6s
    4. Drawing ellipses and circles
      5m 24s
    5. Drawing arcs
      6m 54s
    6. Drawing rectangles and squares
      4m 58s
    7. Drawing quadrangles
      3m 25s
    8. Drawing triangles
      2m 55s
    9. Drawing polygons
      3m 37s
    10. Drawing simple curves
      4m 54s
    11. Drawing complex curves
      6m 46s
    12. Drawing Bézier curves
      5m 38s
  5. 54m 3s
    1. Introduction to variables
      10m 44s
    2. Understanding variable scope
      6m 53s
    3. Modifying variables
      9m 8s
    4. Creating arrays
      9m 53s
    5. Modifying arrays
      6m 37s
    6. Creating strings
      7m 3s
    7. Modifying strings
      3m 45s
  6. 1h 2m
    1. Incorporating randomness
      7m 59s
    2. Using Perlin noise
      4m 24s
    3. Shuffling with Java
      3m 30s
    4. Specifying line attributes
      8m 2s
    5. Changing placement modes
      5m 45s
    6. Understanding color attributes and functions
      4m 16s
    7. Exploring color spaces
      7m 44s
    8. Using color palettes
      7m 5s
    9. Transforming the grid
      8m 38s
    10. Exploring the attribute matrix
      5m 33s
  7. 52m 7s
    1. Building code blocks
      5m 57s
    2. Writing a while loop
      3m 52s
    3. Using for loops
      5m 35s
    4. Creating conditionals
      14m 50s
    5. Working with easing
      10m 51s
    6. Creating spirals
      11m 2s
  8. 18m 55s
    1. Mouse tracking
      3m 54s
    2. Hovering and clicking
      11m 16s
    3. Understanding keyboard interaction
      3m 45s
  9. 27m 32s
    1. Specifying fonts
      6m 43s
    2. Using images
      5m 51s
    3. Playing a video loop
      6m 20s
    4. Exporting video
      3m 47s
    5. Adding sound
      4m 51s
  10. 20m 49s
    1. Creating functions
      11m 48s
    2. Creating classes and objects
      9m 1s
  11. 31m 10s
    1. Using embedded data
      5m 26s
    2. Working with appended text data
      6m 4s
    3. Working with appended tabular data
      10m 26s
    4. Reading XML data
      9m 14s
  12. 48m 17s
    1. Generating dot plots
      11m 11s
    2. Building scatter plots
      10m 0s
    3. Making line plots
      9m 55s
    4. Creating bar charts
      9m 12s
    5. Checking out examples of maps, hierarchies, and networks
      7m 59s
  13. 20m 57s
    1. Introducing some principles of 2D design
      13m 44s
    2. Understanding color theory
      7m 13s
  14. 24m 46s
    1. Interacting with zooming, rotating, and sliding
      6m 26s
    2. Implementing slicing
      6m 47s
    3. Using rollovers
      5m 58s
    4. Introducing the GUI libraries
      5m 35s
  15. 10m 35s
    1. Sharing via OpenProcessing and other sites
      3m 19s
    2. Saving as a desktop application
      2m 42s
    3. Saving as JavaScript
      1m 47s
    4. Saving as an Android application
      2m 47s
  16. 2m 38s
    1. Where to go from here
      2m 38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Interactive Data Visualization with Processing.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.