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 movie we're going to learn how to draw curves with an indefinite number of points defining them and you see you can get some very complex sometimes amusing, but always interesting results out of this one. Now I do need to mention that what we're drawing are not Bezier curves, that's a whole separate function, and we'll get to it in the next movie, but you do have some interesting things you can do with this one. I'll start by naming the file with the comment, I'm setting the size of the window, turning on the anti-aliasing.
And then I'm going turn off the fill if I leave the fill on it get some unexpected results that we've seen with some of the other once, let's put in a noFill. And then what I'm going to do is I'm going to draw a series of curves that all share points, but to make it little easier I'll draw the points first and then draw the curves underneath them. We already know how to draw points all I need is the point function. What I am going to do is I'm going to call strokeWeight and I get that out to about 5 pixels, I'm also going to make this once a bright red, so what I'm going to do is stroke and then I'll use the RGB here, I am not going to go all the way on that, I'm going at 200, 0, 0.
And then what I'm going to do is I'm just going to go ahead and put point and the coordinates for each one; I have a series of them I'm going to get, so I'm just going to copy and paste this information and move each one of them over. First one is at 100, 100, next one be at 150, 150, next one be at 250 and 50, next one is at 300 and 10, next one will be at 400 and 190. These by the way are arbitrarily chosen there is so meaning to this particular coordinates except they're all in the window.
Last one will be 500 and 100. All right, and if I just draw the points there they they are, scattered around the window I may actually make those slightly larger for this particular exercise, I'll take them up to an eight, there we go. Now what I'm going to do is I'm going to run curves that go through every one of these points. They're going to be open curves are not going to loop back around this is going to be a curvy line that goes through each one of these and I'm going to draw few versions with some different parameters, but let's do the first one.
I'm going to copy this information here, because I'm going to need it again and I want the same coordinates, I'm going to paste it right here. Now like we have done with some of the other ones, because there's an arbitrary number of points that can be included, you need to let it know you're starting and finishing a particular shape. So what I'm going to do is I'm going to come up to the top and by the way I'm going to put this as a little comment here this would be black curve. And so I need to specify that is black by putting stroke for the color and zero for black.
And then I'm going to put the strokeWeight as 3 pixels and then I can beginShape. So I type it, it's all lowercase expect for the S which is a capital in shape that makes a bumpy caps. I have the empty parentheses to indicate that there are no arguments in this particular function, and then finish with the semicolon, and then what I do is instead of having point here I need a whole series of arguments called curveVertex.
So, it's like when we did polygons you can make a polygon by adding one vertex to another. This one, it's a curveVertex indicates it handles it a little bit differently. And I'm just going to copy that and replace each of these points. Now an interesting thing about the way the curveVertexes work is that they need a starting point that separate from the original and one way to do this, or at least it has to be specified separately, is you can just duplicate the beginning and the ending.
So I'm repeating the beginning and the ending coordinates that is one way of specifying where it starts and stops. And then I end with endShape. Now I'll just put this one down here and specify that those are the red dots. Now I'm putting the red dots afterwards because I want them to draw on top of the black curve. Again, the order of drawing matters here in terms of things that come later get drawn on top of things that came earlier. So I'm going to save this and there is my default curve.
Not particularly exciting in and of itself, but you see there's some interesting things that you can do with it. Now what I'm going to do right now is I'm going to add an extra parameter to my drawing right here under strokeWeight I'm going to put in curve tightness, we've seen what this can do with just a simple curves earlier, I'm going to put in a zero which you see doesn't really change it and that serves as a starting point for what we're going to do. But now I'm going to draw all of this over again with just changing some of the parameters.
Now the easiest way to do this for me by the way is to just copy and paste, so I'm going to copy all the code for the black curve and I'm going to bring it down. And I'm going to make a gray curve, and so for that one I'm just going to change the fill to 100 that's a medium gray, I'll change maybe the strokeWeight, I'll leave that where it is. And the curve tightness is interesting, well I'm going to change that to a negative 3. Now I Save it and Run it and you can see that we gotten a much wobblier shape, because of that curve tightness.
I should mention that these all have to do with something called Catmull-Rom Spline and that's a mathematical formula for determining the shape that the things go through that the flatness of each line have to do with the point before and after it. But let's draw one more and just to make things a little more interesting, I'll take the gray curve code paste it down here, I'll draw one more, I'll draw a white curve. So that one need a 255, that's all the way white.
And I'm going to give that one a curve tightness of positive 4. Save that and Run that. And you can see it actually loops around backwards through each one, it gets kind of crazy how it goes through. There's a really fascinating thing you can do in terms of joining elements in a sketch using the curve feature here and playing with the tightness factor. Anyhow this is just another way of connecting elements and drawing shapes and processing one of the more interesting ones.
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.