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.
The last shape that we're going to learn to draw is a Bezier curve which is a very common function in computer graphics, because it allows you get to get nice smooth flowing lines that are used in a lot of illustrations. For instance, if you work with Adobe Illustrator, you'd be doing a lot of Bezier curves there as well. The format of the Bezier function and Processing is similar to what we've seen already and that you specify what are called anchor points, those are the beginning and end of the curve and the X and Y coordinates for each of those as well as control points which are not drawn, but influence the shape of what does appear, so let me show you how this works with an example.
First, I'll begin by labeling the drawing, setting the size of the window, turning on anti-aliasing, put in the background color, I'm going to use a relatively neutral color. Let's see what we've got here, okay, pretty neutral gray. Then what I'm going to do. Always, I'm going to turn off the fill, we've seen before leaving that fill on can get some unexpected results. I'm going to draw two curves in this example, so I'll call this one The First Curve and I actually have here The curve itself that'll make sense in the moment.
What I do here is I'm going to change the color that it's draw in. It is kind of a dark red and in this case there is going to be 791F33 and I'm going to give it a strokeWeight of 3 pixels and then the function name is bezier. Now there is technically there's an accent on the first E, but we don't do that here in Processing, so don't insert that, and then I give the coordinates, I gave the X and Y for the first anchor point that's the end of one end of the curve, so this is actually drawn.
In this one, I use 150 as an X and Y coordinates for the first anchor point, then I give the coordinates for the control point associated with it. The control point is not drawn, but it influences the shape. This one I'll give 250 and 50, then we do the control points, which again do not print, don't show, for the second part of the curve this one I'll do 100 and 150; and then I give the coordinates for the end of the curve which is drawn 250, 150; and we save that and run it, I get a nice little S curve in a dark red.
Now it can be helpful to actually see where the control points are and the lines associated with them, so I'm going to add separate code to draw where those lines would be, but normally you wouldn't, but it's helpful for this particular purpose. So I'm going to add it right here under the control points and what I'm going to do there is I'm going to change the color of the stroke to a much lighter color, I am going to make them slightly lighter in weight, so they're going to be only 2 pixels thick and then I'm just going to use the line function, and the first one starts at hundred, so 100 over 50 down and 250 over, 50 down.
The second line that I'm going to draw just moved over slightly. All right, and now when I draw that, and by the way I put them above the curve, because I want them to be drawn underneath it, so I save it and I run that and now you can see where the control points are and how they influence the shape of the curve that they sort of twist it around with a lever. To make this clear, I'm going to now draw a second curve and its control points and I come back here and I'll just copy this information, the Second Curve.
And for the Second Curve, it's control points, I'll leave in the same color in the same weight, they are going to be in different places though, 350 and 75 and then at 500 and 25. The second control line I'm going to have at 350, 125 and then at 500 and down at 175 then the curve I'm going to drawn a slightly different color BA3D49, we'll leave it at three points.
Then it's going to get a different set of coordinates there are 350, 75, 500, 25, 175, oh I've lost something in there 350, 75, 525, oh there we go. I need to have another 500, 175 in there and then I can finish up with 350 and 125.
All right, and then I Save that and Run that and now you see two very different curves and it has a lot to do with the control, you see how the control ones on the second one are pointing in on the same direction and they are twisting it, arching it at in that particular direction. And again this gives you some interesting possibilities for drawing smooth lines and also for being able to move points along lines in later sketches. And so that, the Bezier curve, is the final shape that we're going to cover in our introduction here and how to work with Processing for interactive data visualization.
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.