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

Creating spirals

From: Interactive Data Visualization with Processing

Video: Creating spirals

One interesting shape that shows up in a number of sketches in Processing and in data visualizations is a spiral. Now unfortunately, there is no built- in function for spirals in Processing, so we actually have to get down to some bit-by-bit coding. But it turns out it gives you some extra flexibility, and there's a lot of fun that could be had with this. Let me start by simply putting a comment with the file name, and then let me insert a color palette. I'm going to use this one up here, from the palettes text file that's in the exercise files. I'll paste that in, and there we have that.

Creating spirals

One interesting shape that shows up in a number of sketches in Processing and in data visualizations is a spiral. Now unfortunately, there is no built- in function for spirals in Processing, so we actually have to get down to some bit-by-bit coding. But it turns out it gives you some extra flexibility, and there's a lot of fun that could be had with this. Let me start by simply putting a comment with the file name, and then let me insert a color palette. I'm going to use this one up here, from the palettes text file that's in the exercise files. I'll paste that in, and there we have that.

So we have our palette all determined. I need to create a couple of variables to make this work. The first thing I need to do is I actually need to show how to draw a circle without using the ellipse function. What I'm going to do is I'm going to draw-- I need x and y coordinates and I need a variable to indicate the radius of the circle. I'm going to put 100, and now I'll draw the box. And this particular one I'm going to be using a square.

I'm going to be using a square window, even though I've used rectangular in all the others. It's going to be 400 x 400. And what I'm going to do is I'm going to move the origin right to the middle of the box. So the 00 will be right there, because I'm going to be using some trigonometry, and it's a whole lot easier when it starts in the middle. Then what I'm going to be is I'll just set the background color to the palette, the first color in the palette, and I'll turn on the anti-aliasing.

Okay, now if I press this, I'll just get a square that pops up. There we go. The first thing I'm going to do is I'm going to draw a circle, just using the standard ellipse command. However, I do need to switch it over to the radius mode. So I do ellipsemode, then RADIUS, because I'm going to be using the RADIUS for everything else I'm doing. I'm going to give this one a stroke, a color from the palette.

I'll just give it the first index number. I'll turn off the fill, and then I'm going to draw my ellipse. It's going to go 0, 0. I've moved the origin to the center of the window so I can center this right there, and then I'm going to use this radius circle. I'm just going to copy that, bring it down, and that's my radius. And when I do that I should get a nice smooth circle right there in the middle. Okay, so that's sort of a reference point, a starting point, that's using the built-in ellipse function.

However, now for the spiral we're not able to use the ellipse function, and so I want to show that you can actually draw a circle by using a little trigonometry to calculate each point on it, and then we're going to go back through and modify it to get to a spiral pattern. Okay, so I'm going to put here, draw a circle with points. Okay, now to do this one, I'm first going just change the color of the dots. I'm going to go to the last color in the palette, and since I'm drawing points, I want to fluffen them up enough so you can actually see them.

So let me go to 5 pixels, and then I need to introduce a for loop that does a little bit of trigonometry. Now you may or may not recall the sine and cosine functions from trigonometry. These come in, in terms of trying to draw a circle of a given radius with x and y coordinates. Don't worry about it. I'm actually going to show you the functions and you'll be able to see how they work. What I do is I'm going to create a new variable, a float variable called angle, because we are going to be angling, we're going to be cycling through this.

We're going to start 0 and then angle is going, as long as it is less than 2*PI, because that would be an entire trip round the circle and anything after that's redundant. And the, we are going to update the angle just a small amount, incrementing it .1. By the way, this is in radians. We've been dealing with radians before. And the radians start at 3 o'clock and they go clockwise around, until we come back up to 3 o'clock point. So this is my trigonometry function. I'm going to put on my curly brackets and in them, I'm going to put that x-- actually, I'll just let you know right here.

Here's what I'm doing. I'm going to be drawing points at x and y. But what I need to do is get the points so that they form a circle. And I'm kind of be basing these on the angle, as I go through, as I rotate through, in radians. So what I do is I take x and I get the cosine of the angle. By the way, one of the reasons to work in radians is because this is an easier function if I use radians; otherwise there are some transformations that have to be done. And then I just copy this one, the radius of the circle.

If I want a bigger circle then that'll make it a bigger on the outside. And then I do a similar function for the y, except this time instead of the cosine, I use the sine. And between the two of those I can get a circle, and you'll see how it works right here. You see that my gray dots now fall exactly on the ellipse as they go around. I have re-created the essential shape of a circle by using points and using the sine and cosign functions as they relate to radians, as we go around the circle. I know it's technical, but here you see, it makes a pretty picture.

What I'm going to do now is show that we can take those dots and instead of having them be exactly on the circle, we can have them go out into a spiral. So the first thing I'm going to do, by the way, is I don't want to draw those particular points anymore, so I'm going to comment those out for right now, and I'm going to come down to a spiral pattern. Now, I need to copy those, draw dots in a spiral. That's what we are going to do now. I'm going to paste that in there, and I'll take the comments of off this one. And I'm just going to modify this.

Now I do need a new variable here. What I'm going to do is I'm going to come in and create float and then radiusSpiralDots. And this is going to give the radius that I start off with for the spiral. Now this one is important because the radius changes over time, so I go to 10. That's just 10 pixels out. And then the stroke, I'm going to change to a just a different color. And then from there, I need to use a different function. I can leave the strokeWeight right there, and that's fine.

And the float I started angle of 0, but instead of going to angle of 2 PI, which is one trip around, I'm actually going to have it go four times around. So I do 8 PI. And then I increment at .1, but then I have to add another thing right here. The radius needs to increase continually as we go through. And I'm going to increase it just a small amount, of 0.5 pixels at each step. And then I copy the radiusSpiralDots and place the functions right here.

And if press Run, that should give us a spiral. I've left the circle on as a reference point underneath, but you can see how it circles around now, and there's a lot of things that you can do with that shape. Now, one of the things I'm going to do here is I'm now going to turn off the original circle. I've just got to find the code first. There we go. I'm going to comment that out, and I'm going to one more modification. Just to make things slightly more complicated, but to get us closer to what you probably want to do, you probably weren't looking to draw a spiral with dots, but really just wanted a line to go around. Draw a spiral line.

Now, unfortunately, the way we have to do this is by using the dots and simply connecting the dots, but we have to include a few extra things. We are going to have to create a variable for the current positions of x and y, but also the previous positions of x and y, because then we draw very short lines to connect those. We are going to need, however, to create some new variables for the previous versions now. What we can do is I'm going to create impossible values for these. I'm just going to put 999 so they're about a mile off of the sketch, and it's just going to ignore those.

So that's going to be for px. That's for previous value of x. And then I'm going to do another one for the previous value of y. Then I'm going to change this one to radiusSpiralLine, and I'm going to copy that and paste it through, right here and right here and right here, so that's consistent all the way through. And I've got the 10 here. I'm going to change my palette to a slightly different color. And now I'm going to change the strokeWeight to a much smaller one. Because I'm drawing a line, I want it to be smoother.

What I'm doing now is I'm actually going to take the angle and I'm going to make the change in the angle smaller as we go through, and then I'm going to make the corresponding change in the spiral line half as big as well. Then we have the x and y in then cosines. But before we draw the points, I'm going to need to add a little if statement. I'm going to say if px is > -999--and what that means is it won't do this the first time it goes through, which is good because we don't have a previous value that would work for anything.

I'm just going to put this one right here, bump this one over a little bit. I'm going to say if that happens then don't draw a point; draw a small line that connects the current x and y at one end of the line and the previous x and y at the other point of the line. And then when you are done with that, we're going to update so that the previous x and y take on the values of the current. That way we can keep cycling through and connecting the old ones. And so I'm going to save this one and run it, and now you see that we have a red spiral on top of the white dots. In fact, I'm going to run it one more time without the white dots.

All you really have to do is comment out that one. And then I have a spiral. And so it's a little rough, but if you use smaller increments, you can make it a smoother shape as you go through. But again, a spiral is a shape that's been showing up more and more in data visualizations and more and more in generative art, and you simply have to have a little bit of code and a little bit of trigonometry to make this work, and you can come up with some very interesting and compelling designs.

Show transcript

This video is part of

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

72 video lessons · 12518 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.