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.
Once you've gone through the effort of creating transformations in your drawing by translating the origin or changing the scale of the grid or rotating or you've gone through working on the attribute by changing the color or dimensions or methods of joining objects in your drawing, you want be able to save those things even if you want to temporarily suspend them and bring them back without having to code all over again. Fortunately, Processing gives you an easy way to do this with what's called the pushMatrix and popMatrix commands as well as the pushStyle and popStyle.
And I'll show you how each of those things works in this particular drawing. We are going to start by putting a little comment with the name of the sketch and then I've previously entered a color array. I am just going to paste that in right here and then I'll create a new array of colors that I'll just called palette and copy the one called crowds. This lets me use palette as a generic reference in my drawing. I'm going to have one variable that I use as s for size. It specifies the dimensions of the squares that I'll be drawing in this.
Then I'm going to start going through some of my setup material. I'm going to do size for the window, 600x200. Then I'll be using anti-aliasing. I'm going to turn off the stroke, no border on it for right now and I'm going to put in the background that is the first color in the palette. Now from there I'm going to draw my first rectangle and going to fill palette, and then go in rectangle. I'm going to put it right up in the origin.
The top-left corner will be right at the corner and that's going to be my first rectangle. So it's drawn right up there in the corner. Its top left is 00 and then it is 80 pixels wide and 80 pixels tall. So that's fine. So that's my first one. Then what I'm going to do is I'm going to push the matrix and I'm going to push the style. What this is going to do is going to save the matrix that I have that has no transformations on it.
So the origin still at the top left and the scale is the same, there's no rotations. It's also going to take the fill and the stroke settings that I have so far and save those. It's just pushing them off to the side and then what I can do is that I can start making some transformations. So for instance I'll translate the origin 230 pixels over and 25 down and then I'll rescale things and make them all twice as big by doing scale 2 and then I'll rotate and then I'll do radians function because, I want to do just 45 degrees and this is an easy way to specify it.
Now I'm going to change this stroke to the third color on the palette and I'll change the strokeWeight as well and make it 15 pixels. Previously, I had this stroke turned off entirely. Then I'll change the fill to the second color on the palette and then I'll draw my rectangle and again it will be at 0, 0, S, S. It has the same arguments as one what I had earlier. I could have just copied it and pasted it down here.
I save that and now you see that I have a very different drawing. This rectangle is rotated, it's much larger, it's got a border. It's a different beast than what we had previously. Now here's an interesting thing that I can do is I can actually pop the matrix back to where it was before and what that does is the matrix has do with the translation moving the origin, the scale, changing the size of grid, and the rotation. So now I'm going back to what it was before and it was untransformed. So it's undoing all those things. So now I can do a rectangle.
I'll just copy that information. I'm going change the dimensions a little bit. I'm going to change location manually to 380 pixels over and 20 pixels down and when I run that you see what happens is I've gone back to the same orientation, but you see that the fill and the borders are still the same. Now the borders look smaller, but that's also because the scale is only half as big at this moment. Then I'm going to finish by changing back to what we had with the original styles by using popStyle.
In this case, I'm going to draw one more rectangle and I'm going to specify it a little differently. I want it to be down in the bottom corner so I'm going to do that its top corner is the width-s, that's the size and its height of that. It's going to be the height-s, and I believe that that should do it and get his back to the mirror image of the original rectangle. So what I've done is I created with one set of attributes and the grid in a particular way, I changed its grid, I changed the attributes, and then I was able to restore what I had previously by having used pushMatrix and then popping the matrix back and then pushStyles and popping the style back.
This is one way to save the work that you've done and go into it. Now you can also know that you can nest these. If you want to push the matrix more than once, you can. All you have to remember is it's the last in-first out method that when you reach back in into popMatrix it's going to bring back the matrix it was the last one used. So with these tools, the pushMatrix and popMatrix and the pushStyle and popStyle, you can save a lot of time in setting up your drawings and getting them to be exactly the way that you want them to.
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.