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 next of the primitive shapes in Processing that we're going to do is also a very a basic one. It's just a simple straight line and this is a very simple thing to do in Processing. All you need to do is provide X and Y coordinates for the beginning of the line and the end of the line. I'll show you how it can work here. I'll also show you how you can change the colors and the sizes of the lines and how the drawing order can affect a drawing. The first thing I'm going to do is I'm going to add a comment to give the name of this particular file, you'll see the name up there on the tab.
I do the two slashes (//) Ex03_03, then I'm going to Save it again. And what I'm going to do is I'm going to do my display window, that is 600 x 200 pixels. As that will create the blank window, you can see what it looks like, right there. I'm also going to turn on anti-aliasing, always a good idea. Truthfully, I have to admit I wish this were on by default and I'm also going to change the color of the background of the drawing. I am going to be using the hex code that I have for this particular background, it's a mediumish gray, I put pound (#) sign to indicate that I'm using the hex code.
Again, that's an abbreviated version of the 24-bit, Red, Green, Blue color system, 8-bits for each color. This particular color I'm going to be using is 9F9694, and then I do the closing parenthesis and semicolon (;) to indicate that I'm done with the command. Then what I'm going to do is draw some lines, and I want the lines to be a different color from the background. And lines don't have a Fill, because they're solid objects, but they do have a Stroke that indicates the color of the line.
In this one I'm going to be using a dark Red which is 791F33, and then I start providing the coordinates for each of my lines. What I'm going to do is I simply type line, then in parentheses you give the X and the Y coordinates for one end and the X and Y coordinates for the other one, so I go like this, 100, 50. So the one end of the line will be 100 pixels over, 50 pixels down, 100 and then 150, then I close and if I just hit Run, Ctrl+R on a PC, Cmd+R on a Mac.
You'll see my first line drawn right there. Now there is one other thing I want to make that line a lot thicker. So underneath the Stroke, I'm going to add strokeWeight with the capital W, capitalization matters here, and I'm going to make these 8 pixels thick. So now when I press Run, I have a much thicker line there. Okay, then I'm going to make several other lines. Now I'm going to copy this command and then I'll modify it, and what I'm going to do is I'm going to have the same starting point for each one of these, but I'm going to gradually move over the bottom lines, and then I'm going to have another series of lines and I fan out in a different way.
So I'm going to go start at 200, 300, 400 and then I'll have their other end where they all meet, it'll be 500 and I'll press Save, and now when I run it, I get two sets of fanning lines. Now what's interesting about this is there is a real optical illusion here, where these things do not appear to be lined up, but if you look back at the code, you see that they do have the same coordinates all the way through.
An interesting way to demonstrate this is to add reference lines through them, so I'm going to add two more lines, horizontal lines, one at the top and one at the bottom to show that these are in fact parallel, I'll close the line. Now drawing order here matters, I actually want my reference lines to be underneath these, so in fact, I need to put those earlier in the command and then these are the ones that will be drawn on top of them. So I'm going to come back up here and I want them to be a different color, so I'll go back to Stroke, they also have their own little hex code.
Let's see here, E2E1DC, and then they're going to be lighter weight, so I'm going to put strokeWeight, make these 2 pixels, then I put it in the coordinates for these lines. They start at the same starting point, as the first set of lines, and they just go straight across at the same height and then I draw another line that's at the bottom, it starts at 100, goes down to 150, then to 500 and 150 there.
I Save the sketch and press Run. And now you actually have some verification that all these points are in fact at the same level of each other, despite the overwhelming illusion of curvature. So, this is a quick sketch made with these second of the primitive shapes in Processing, just straight lines and an idea some of the things you can do with it.
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.