Creating spirals

3m 16s

 Welcome

58s

 What you should know

1m 22s


11m 51s

 Overview of data visualization

11m 51s


11m 53s

 Installing Processing

3m 38s

 Overview of Processing

4m 5s

 Exploring libraries

4m 10s


1h 1m

 Basic setup

7m 31s

 Drawing points

4m 37s

 Drawing lines

5m 6s

 Drawing ellipses and circles

5m 24s

 Drawing arcs

6m 54s

 Drawing quadrangles

3m 25s

 Drawing triangles

2m 55s

 Drawing polygons

3m 37s

 Drawing simple curves

4m 54s

 Drawing complex curves

6m 46s

 Drawing BÃ©zier curves

5m 38s


54m 3s

 Introduction to variables

10m 44s

 Understanding variable scope

6m 53s

 Modifying variables

9m 8s

 Creating arrays

9m 53s

 Modifying arrays

6m 37s

 Creating strings

7m 3s

 Modifying strings

3m 45s


1h 2m

 Incorporating randomness

7m 59s

 Using Perlin noise

4m 24s

 Shuffling with Java

3m 30s

 Changing placement modes

5m 45s

 Exploring color spaces

7m 44s

 Using color palettes

7m 5s

 Transforming the grid

8m 38s


52m 7s

 Building code blocks

5m 57s

 Writing a while loop

3m 52s

 Using for loops

5m 35s

 Creating conditionals

14m 50s

 Working with easing

10m 51s

 Creating spirals

11m 2s


18m 55s

 Mouse tracking

3m 54s

 Hovering and clicking

11m 16s


27m 32s

 Specifying fonts

6m 43s

 Using images

5m 51s

 Playing a video loop

6m 20s

 Exporting video

3m 47s

 Adding sound

4m 51s


20m 49s

 Creating functions

11m 48s


31m 10s

 Using embedded data

5m 26s

 Reading XML data

9m 14s


48m 15s

 Generating dot plots

11m 11s

 Building scatter plots

10m 0s

 Making line plots

9m 53s

 Creating bar charts

9m 12s


20m 57s

24m 46s

 Implementing slicing

6m 47s

 Using rollovers

5m 58s

10m 35s

2m 38s

 Where to go from here

2m 38s

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 opensource 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.
 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 mousebased interactions
 Adding images, video, and sound
 Reading in text or XML data
 Creating plots and charts
 Publishing and sharing your work
 Subjects:
 Developer IT
 Software:
 Processing
 Author:
 Barton Poulson
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 bitbybit 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 antialiasing.
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 builtin 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 recreated 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 > 999and 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.