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 step in Processing is to learn how to draw polygons or irregular shapes, this is still with flat sides, but you can have however many corners you want. And you can have whatever relationship between them that you want. This one is also a little bit different, because it has several different lines of code. And let me show you how this works by creating a new sketch right here. What I'm going to do is begin by putting in the name of the sketch. Now I will put in the size of the window, turn on anti-aliasing make things smoother, I'll give it a background color.
I'm going to use a hex code and that's going to be D9C6B0 kind of a tan color, there we go right there. Then I am going to put in a strokeWeight for the borders of these of 5 pixels, Save all that. Now to be able to draw an irregular polygon, you need several lines. The first thing it need to do is you have to have a command that says beginShape and that's all there is to that one.
Then what you do is you have to give a separate line for each of the corners or vertices in this, so you type vertex and you gave the x and y coordinates for each of the vertices. So in this case, I'm going to go 200 and 150, then just keep typing, I'm going to draw a hexagon, so I've six of these. 150 and 125 and 150 and 75, so that's number five and then the last one, let's say 250 and 125.
Then I began with beginShape, I need to finish it off with endShape, so Processing knows I'm done adding corners. And when I do that I can Save it and I can Run it and there you have it. Now you notice a couple of interesting things, aside from the default white fill and black border, you see also that at the bottom right, I don't have a black line, there's an open space there. That's because Processing doesn't close polygons unless you specifically ask it to. So let me show you two things.
Number one, I actually, I am going to change the color of that by going to stroke, 314650; And all you have to do is come down to the bottom to endShape and type in, in all capitals, the word CLOSE and that tells it that they you want to go back to the first point. Press Save and Run and now I have a closed shape. Now I'm just going to add one more shape, because I can, and to make my life easy, I'm going to copy this and paste it down here.
And it changed the color a little bit to 45718C and then I'm just moving everything over about 200 pixels. So I go to 400, to 350, to 350, to 400, 450, and 450. This one will also be closed. I Save it and I Run it. And now I have my two hexagons, if I wanted to make a shape with more sides, say for instance 20 sides or 30 sides, I could do that.
I would just need to have one line of code to give the x and y coordinates for every corner in the shape. And that's how we draw a polygon 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.
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.