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.
Processing also gives you several functions for positioning shapes such as rectangles and ellipses. And in this movie, I want to show you what some of your options are for doing that. I'll begin by simply putting a comment at the top with the name of this video. Then I'm going to create a window that's 600x200 and I'll turn on anti-aliasing. Then I am going to draw a rectangle. I'll go 250 pixels over and then come 50 pixels down then I'll make it 100 wide and 100 tall.
I'll also makes these strokes, strokeWeight of 20 pixels and so there's my default shape right there in the middle, just a default white fill with a black border. Now, note where it is. It's smack in the middle. This is the default positioning. I did this because I knew that it would be 100 pixels wide, and I put the corner it positions by the top left corner 250 pixels over and 50 pixels down.
On the other hand, you have an option of using different placement modes. The one that I just used and by the way they are called rectMode. The one I just used as the default is called corner, uncomment that out, because I don't need that right now but I'll leave it there. Now I'll show you the next one that you're likely to use and that is center. And in this case, for the X and Y coordinates you put this center of the rectangle. So in this case, what I would want to do is I want to do it just like this. In fact, if you want to put it right in the middle of the drawing, width divided by two and height divided by two and it should look exactly the same.
Except now you see, I have different X and Y coordinates. Previously, I provided the coordinates for the top left corner. Now I provided the coordinates for the very middle of it, that's rectMode center. There's a third mode that can come in handy and what that one is, is rectMode corners with an S. It's plural and what you do in this case is, instead of specifying the starting point with X and Y coordinates and then giving the width and height, you simply give the X and Y coordinates for one corner, and then the opposing corner in that case I'll do it like this, 250 and 50.
If I want to make it 100 wide and 100 tall, I'll go like this, so I have the X and the Y for the top left corner and the X and Y for the bottom left corner and again it's going to look exactly the same, but all three of them were drawn with different commands. There are similar commands that can be used with ellipses, I'll close this and I'll comment those out for a moment. If you're drawing an ellipse, the default mode the ellipseMode is center.
However, there are a few other modes, let me just copy this down for a moment. The other choice is corner, corners and finally, radius and that's not really positioning one. I'll explain how each one of these works. I'll come down here, let me comment out the three of these and I'll draw an ellipse and we'll put this one in the middle and I'll do that by going width divided by two, height divided by two and then I specify the diameter and I'll make it a 100 wide and 100 tall, and there we have these circular analogue to the rectangles that we had earlier it's positioned right in the center.
Now I'm going to specify its position with the corners. Now, this is little tricky. When you use a corner, it's not an actual corner of the circle, it's the corner of the bounding box that you could draw around the circle, so if it had a perfect square around it, then you're drawing the top left corner of that square. So I'm going to uncomment out that one and bring this one back in, and to do that maybe I'll bring this up here and leave it right there, and do a similar thing for these ones. Okay I'm just going to make it so they'll have their own commands there and now I'll comment each of those out.
Okay, and this one we're going to specify the same way we did the first rectangle and I'm going to take that and when I go to 250, and then the corner needs to not be in the middle, but it's need to be at 50 pixels and when I run that, we get our circle again, but with the different coordinate system, it's now being positioned by an invisible dot that's on the top left of where the boundary box would be. Okay, the next one is corners and this is just like with the rectangles. This is where you specify the top and the bottom corners.
In fact I'm just going to come up here and I'm going to grab those coordinates right off of there, bring them down to here uncomment that and run it. Again, a very different set of parameters that I put in, but you get the same result. The last one that I'm going to show is the radius function and as you might guess that all that is, is that the same thing. It positions it by the center, but instead of specifying the diameter, you specify a radius.
So I'll turn those off and I'm going to change this one, instead of being 100, 50 to 50 and it's my magical unchanging drawing even though I've changed the modes every time it has come out the same way as long as you make adjustments in the parameters. And so you see that you have several options on how you position and size the shapes and depending on the situation, that you're using, especially with different variables, each one of these will come in useful at different times.
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.