Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
In this next movie we're going to show you how to draw curves using a series of vertices in Processing this actually allows for some really interesting effects and drawings and it be pretty useful I think. The way this one begins is, we set the drawing up and by doing what I've done in the other ones, I have first put the name of the drawing and I put the size of the window turn on the anti-aliasing, I'm going to set a background color, a rather neutral one C3CCC8.
And if I just check that, there we go a little gray green. Then I'll put in a strokeWeight of 5 pixels, so that make lines and borders 5 pixels thick. Then what I do is I'm going to color the strokes; I'm going to draw three different curves on this one. The first one is going to make a dark brown color and here is how the curve function works. What it is, is it has four pairs of coordinates.
Now the first two are the coordinates for what's called the starting control point and this is something that doesn't draw, it has to do with sort of a lever action on the curve. The second pair of coordinates are for the start of the curve proper; the third pair are for the finish of the curve; and the fourth pair are for the nonprinting invisible control point, again sort of a lever function. And you'll see how these things work. So I'm going to call it curve and then I'm going to type in four sets of coordinates. The first one, the control point would be a 100 and 300.
Then I'll do the beginning of the curve at 100 and 100, then I'll do the end of the curve at 200 and 100 and then the finishing control point will be at 200 and 300. So eight numbers to get four pairs of coordinates. Again, two represent the beginning and the end of the curve and the other two represent the control points which have an influence on the shape of the curve. In fact if I save that and run it, you'll see my curve right there just a little upward curve. You'll also see that it has the default white fill.
Again, like arcs, Processing hesitancy to feel things in even when you didn't expect it to and so you have to deliberately turn off the fill in the curve to get rid of that. The way you do that is by coming down and typing in noFill. So we'll make another curve now and this I will just make a different color, I'll call the stroke and B9961C. And then what I'm also going to do is change something called the curve tightness parameter and this is something that lets you really do some interesting manipulations of the curve separate from the control points.
This is really one that works best to just play around with it for a while and see how it affects the curves that you're making. So I'm giving this one a value of positive 3 that can be positive or negative usually not terribly far from the zero then I'm going to draw the curve; curve 250, 300, 250, 100, 350, 100, 350, 300. And so what you can see is that the coordinates here are the same as the first curve except I've shifted them to the right a 150 pixels, but you'll see because of the curve tightness it gets a very different result.
So I'm going to Save and Run and in fact you see it's flipped around in the other direction and it's starting to curve around itself making an oval. And then I'll make one more curve with a different tightness parameter. I'll just copy all of this; give this one a different color to distinguish it, to 475D1C. And instead of having a curve tightness of positive 3 and I'll give this one a negative 3. Now the default tightness is actually, I believe is one, and so you'll see it's not symmetrical around zero even though I have positive 3, negative 3 the effects are going to be rather different.
And this one I'm just going to move over another 150. So I just take the Xes on each of these and I make them this one to 400, 400, this one will be 500 and so this one you see. So again the coordinates are the same just shift it over 150 pixels to the right I'm going to Save it and Run it and look what we got. Now it's a dramatically different shape, you see for instance that it goes in the opposite direction the sides of it are nearly straight with a very strong peak as opposed to the bowl shaped one that we have in the middle and the default shape meaning default for using the X and Y coordinates of the endpoint and the control points.
And so a lot of interesting things you can do with curves and we will explore some of possibilities later in this course.
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.