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 allows you to integrate images that have already have been created as, for instance, JPEG or PNG files, in addition to drawing your own shapes. What I want to show you this is two different ways to work with images. The first is how to integrate an existing file that you have on your own hard drive, a local file, and also how to use a web-based file with just a link. So I'm going to start by putting the title of this one as a comment, with a 600 x 200 pixel window, and then what I'm going to do is I'm going to load an image from the hard drive.
Now, I have an image that's available in the Exercise folder. I am going to move this over for just a moment and there you see, I have a spaceinvader picture. Now what I can do is a just grab that and drop it onto here. Now you don't get to see it, but you can see down the bottom it says One file added to the sketch. And if we go to the Sketch here, I now have a data folder, and there's a picture in the data folder. I'll maximize this again. So now I've made that file available to the sketch. What I do is I am going to be using a PImage variable.
That's actually an object, but this is a PImage that's for Processing image. And I am going to just call it spaceInvader. And then what I have to do is I need to load that file into the variable, so I type spaceInvader, because in the last line l just declared it; I didn't initialize it. This is basically initializing. And then I'll use the function loadImage. And then what I need to do is I need to put the name of the image, complete with its extension, in quotes. So I'm going to come into space, and again, you have to get the capitalization exactly how it was in the original.
This one is .jpg. Make sure this not .jpeg, because then it's not literally on the dot. Put that in quotes, put in parentheses, and finish with a semicolon. And so what that does is it loads the image into the variable, so it's basically initializing the variable. And then what I can do is I can place the variable. I use the image function, and I go by the name of the variable that I created, spaceInvader. I am not using the name of the file. And then I put the x and y for it. This is going to be based on the top-left corner.
So for this one, I'll just put it as 00. Now, I should mention that this file is already appropriately sized to be 300 pixels wide and 200 pixels tall. If your file is a different shape or a different size, you have the option of resizing it. And so let me show you what this like if I just press Run. There you go. Now, my spaceInvader, I have already got it on the left half because I'm going to put something else on the right half. It's appropriately sized. If it were a different size, I could change that by adding a fourth and fifth argument to this file right here.
Say I wanted to make it 200 pixels wide and 150 tall. I can do it that way, and it will resize it. It might get distorted in the process, but that's something that Processing is able to do. But mine is appropriately sized already, which is handy, so I'll leave it right like that. Now I want to show you how you can use not just a local file, but you can also use files straight off of the web without first loading them on. This is handy in particular if you're going to be using Processing to build a web page, as long as this is going to be one where you know that image is going to be there for least a little while.
In this case, I just need to declare another key PImage variable. I'm going to call is one of webInvader. And then I have a String here, a string variable that's going to have the URL. I'm actually calling the string URL. You can call whatever you want; you can call it you know webInvader location on the web or whatever. And then we're going to put in quotes the complete URL for just the image. Now I am going to show you, I have the image open on the web here. This is one I got from Creative Commons off of Flickr, so this one is okay to use.
I highlight the entire address and go back to where I was, and I can paste it in. Its long, but that's the whole thing. And then I finish with a semicolon, so that's the URL for the image. Then what I can do is I load that image into the variable. So I go webInvader=loadImage, just like I did up above, except this time all I have do is put URL. And then I can place it the same way I did earlier, image. This was called webInvader. And I am going to move it over to the side.
I am going to move it over 300 pixels and keep it at the top. Now, let me show you, this one actually is a different size. So when I press Run, you see it's actually too big over here, and that's where I can do the manual resizing. What I am going to do right here is tell it that I wanted to be 300 pixels wide and 200 pixels tall. Save that and now they show up side by side. Now, you should know that Processing actually has a lot of functions that allow you not only to place the images, but it allows you to modify them. I am going to show you just two of them really fast, and I am going to let you explore the others.
First one I'll put up here, and I am going to use a filter, and filters give you a lot of different options. I am just going to do one that is kind of fun, and that is I am going to blur it. And when I do that, it's counterintuitive. You put the command after the image, because what it's doing, is it is like superimposing the filter on top of the image. And so because things go in the order on which they are drawn, the filter needs to come after the thing you want it to be on. So now when I draw it, the spaceInvader on the left is blurred, but the one on the right is not, because the filter came before it.
Now I can come down to the bottom, and I am going to put on another filter and because this one is at the bottom, it will affect both of the images. This one, I am going to do a GRAY. And what it's going to do is going to turn both of them into grayscale images. Now, there are a lot of other options here. You can posterize. You can invert the images. There is a ton of stuff you can do. And you can also in fact save the images in their new format. We will cover that in a later movie. But for right now, this gives you an idea of how you can do some work with images 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.