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 primitive shape that we're going to use in Processing is a triangle. And what you see is that the triangle function is very similar to the quadrangle we just did. All it is, is that you specify three sets of X and Y coordinates, one pair for each of the three corners on the triangle. So the first thing I'm going to do is add the name of my file in a comment, and I'll set the size of the window, I'm doing 600 wide 200 tall, turn on the anti-aliasing and then change the background color.
I'm actually going to use a dark gray color for this one. I am using hexadecimal code, you could also use numbers on the 0 to 255 scales for these, but this is just a more compact way of doing it. And then I'm going to give a 5 pixel width to the borders by using the strokeWeight function. And then all I need to do is call triangle, this one has no abbreviation, it's just triangle and I put in three pairs of X, Y coordinates.
So in this case I'll go 150 and 50, 200 and 150, 100, and 150, Save it and Run. And there is my default triangle with the white fill and the black border. All right. Then, again like with quadrangles, there are no special modes for doing this, you always have to specify the three pairs of X, Y coordinates. But you can change strokeWeights, you can change fills and border colors, and so on. So this one, I'm going to turn off the border using noStroke and then I'm going to change the fill, I can use the hex code here again.
It is just going to be 74AD92, it's a greenish color and then I call the triangle function, 250 and 50, 300 and 150, 350 and 50, this will make at upside down triangle compared to the other one. Save it and Run it and there we go. And then, again, to follow along the pattern we had before, I'll just make a third one, this time with noFill, but with a different border.
So I'm going to put on stroke, so this will draw a border, and I'm going to make it sort of an orangish color by using F07F47, those are the RGB, close that one and then I'm going to turn off the fill, then call the triangle function, and put in the 3 coordinates 450 and 50, 500 and 150, 400 and 150. Let's Save it and then Run it.
Now I have my three triangles, so again, this is the final primitive shape that we will be using in Processing, but you can see how it would be useful as a building block in more elaborate and larger scale drawings.
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.