Start communicating ideas and diagramming data in a more interactive way. In this course, author Barton Poulson shows how to read, map, and illustrate data with Processing, an open-source drawing and development environment. On top of a solid introduction to Processing itself, this course investigates methods for obtaining and preparing data, designing for data visualization, and building an interactive experience out of a design. When your visualization is complete, explore the options for sharing your work, whether uploading it to specialized websites, embedding the visualizations in your own web pages, or even creating a desktop or Android app for your work.
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.
There are currently no FAQs about Interactive Data Visualization with Processing.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.