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 primitive shape that we're going to use in Processing, not a very common one, is the quadrangle, and the idea here as you can draw four-sided shapes that are not rectangle or squares, for instance. In this example I'll use diamonds. The first thing I'm going to do is put a comment with the name of this file and then I'm going to put the size of the window, turn on anti-aliasing, then I'm going to give it a nice dark blue background, I'm going to use hex codes for this, and let's Save it and make sure that gets where we want, there we go.
Also, I'm going to thicken up the outlines of these things by taking strokeWeight and change it into 5 pixels. Then I'm going to start drawing my diamonds with a quadrangle function. Now there are a lot of arguments to it, but it's very simple, all it is is four pairs of X and Y coordinates, one pair for each point or each corner on the quadrangle. The function is called quad and then you start putting in the X and Y coordinates. In this one, I'm giving 150 and 50, 200 and 100, the third point will be at 150 and 150 and the last point will be at 100 and 100, and that's over to the right and then down for each one, finish with the semicolon (;) and press Run and there we have our initial quadrangle, the diamond, just a short square one with the default white fill and black border.
Now just for fun, I'm going to draw two other quadrangles, unlike ellipses and rectangles we don't have different modes for positioning these, because you simply have to give the coordinates for each corner every time, but I can always make them look different. The second one I'm going to turnoff the outline with noStroke and I'm going to change the color of the fill to a light blue A3DOC1, and then I call the quad function and put the coordinates, and again, the first point will be 300 pixels over and 50 down.
The next one will be 350 over, 100 down, 300, 150, 250, 100, Save and press Run and there's my second diamond. This time with noStroke no outline and it has a different color Fill. I'm going to draw the third one, and just for symmetry sake this one will have a stroke, but no fill. So I go back, I call the stroke function again, but I don't want to use the default, I'm going to call different color, which actually is very light one FDF6DD and then I'm going to turn off this fill, with noFill, call the quadrangle function that's quad, and then give it to four sets of X, Y coordinates for each of the points, 450, 500 and 100, 450 and 150, and then 400 and 100, Save and Run and there I have my third quadrangle.
Not a very common shape, but it is one of the built-in primitive shapes in Processing and I can imagine there are situations where being able to draw a diamond or a trapezoid would be useful, it's nice to have that in our toolbox in Processing.
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.