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.
One interesting feature of Processing is the ability to play video files. Now, there are actually several things that you can do with these. You can actually create video files, you can bring them in and you can transform them in one way or another, or what I'm going to do in this particular example is you can bring a video and you can just kind of loop it to repeat. To do this though, I first need to import a library that's included with Processing but is not installed by default. So what I need to do is I need to go up to the menu to Sketch, click on that, and then come down to Import Library. And then from over there, you'll see that there is a video halfway down.
I need to come down to video and click on that. Perfect! And it pastes in a small amount of code that says import--that means it's importing our library--and the library is nothing more than a collection of code that we don't actually have to look at. It's now operating in the background. And it's bringing in Processing.video.*, which actually inserts several files, but since they all begin with that, it brings in all of them. So what I'm going to do is I'm actually going to bump that down a little bit, and I'm just going to put my little comment up here. Then I'm going to come down--I'll save this--and I'm going to start typing in some commands.
Now, what we're dealing with here is a little bit complex, because we're actually dealing with classes and objects, in that a movie can be addressed--you can talk about that the way you talk about a variable--but since it actually is composed of a large number of frames and other things, it's more than just, like, a number 12 or something. That's why we're using what's called an object. An object allows you to do package a whole bunch of information and related behaviors into a single thing and treat it like a variable. Now, an object comes from a class. The class is the template for the object, or the object is the instantiation of the class. So what I'm going to do here is instead of typing "int" or "bling" or "float" of variable types, I'm going to type the name of the class, and in this case it's Movie with a capital M.
Remember, Processing this case-specific. Then what I'm going to do is I'm going to name my object, or you can think about it as a variable. I'll go trainMovie. Finish with a semicolon. I'm going to bump down and do a setup block, and in that block I'm going to define the size of my window, 640 x 480. I'm doing this one a little bit differently because that's a common size for a video. I am going to put a black background on there. And then what I'm going to do is I'm going to load my movie file into my trainMovie object.
Now, to do this, you need to actually get the file into the program first, and if you come to the folder, this is the folder for the sketch, but you see right next to it-- it's not in the folder; it's next to it-- I have a small video clip called station, and all you need to do is take that and drag it onto the Processing window. And now you see, near the bottom, in the message area, it says, One file added to the sketch, and in fact, if I click on the final folder right now, I now have a data folder. If I click on that, the station movie has been added into it.
So now I can come back to my sketch, and I'm going to tell it that my trainMovie object, or variable, I need to load in that this is a new instantiation of the class movie, and I want to put in--this is a funny little phrase here, I want to put in "this," and that's referring back to my most recently created object, which is the trainMovie. And I'm going to go station.mov. And remember, you've got to be exact in your spelling. I put that in quotes, I close the parentheses, put a semicolon, and then right after, that I'm going to give it a command.
One of the functions or behaviors that's included in the movie class is the ability to loop, so I'm going to put trainMovie.loop. And what that is is the dot operator is a way of applying a behavior or you can think of it as a function or method, and applying it to a particular object or variable in this case; you can think of it that way. I put the open and close parentheses, and I finish with the semicolon, and that finishes my setup loop. Then I go down and I'm going to type another loop, but it's not drawn yet; instead, it's this curious little thing that has to do with the movie.
I to void and then lowercase movie, capital Event, and then in parentheses I put Movie--that's the name of the class--and I put the name of my object, which is trainMovie, and then I close the parentheses. And then in curly brackets--I'm just going to put one line here-- I'm going to put trainMovie.read, so that's something I need to put in there. Then I'm going to drop down and I'm going to do just a little bit more here. I'm going to do void draw, like we've done a lot of other times, and in the curly brackets here, I'm going to put image.
Now what's interesting here is even though this is a video, we are using the same function that we do for a still image. So I'm putting image and then trainMovie, and then I need to position it by its top-left corner. I want it to fill the screen, so I'm going to do 0, 0. And in effect, I will tell it to fill the entire screen, regardless of the size of the original clip, and so I'm going to put width and height. And once I do that, I can save the whole thing and I can run, and we will get a looping video clip.
Okay, and by the way, the reason it's fuzzy is because the clip is actually smaller than this. This is not its native size. In fact, if I just come back here for a moment and cut that stuff ou, and then run it again, you'll see that it's a lot smaller than that natively. So I've stretched it out. An interesting thing though, is you can run more than one instance of the movie if you want. So for instance, I can put one right here. I can have one running up in the corner and the other one, I'm not quite sure why you would want to do this, but I want you to know that it's available.
Now we have the movie running twice, once up in the corner and once staying on the mouse. And because we're not refreshing the background, every previous version stays there as well. Anyhow, that is one of the things that you can do in Processing that's a really good trick, and that is being able to bring a movie clip into Processing and in this case just using the basic functionality of being able to run a video clip and loop it through, and that opens up a lot of creative potential for you.
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.