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.
In this movie, I want to show you a little bit more about how you can use the mouse to create the drawings and to interact with your sketch. This one, after I put a little comment in here with the title in it, is a pretty simple sketch. I'm going to first create my setup block. So I put void setup, and then in curly brackets I'm going to put the size of the window. I'm going to turn on anti-aliasing.
I'm also going to change the frame rate, because I don't want this one updating too often. I'm going to slow it down just a little bit; maybe I'll put it to 8 frames. This is frames per second. Processing by default will try to run at 60 frames per second, although there are some sketches where that just won't be possible. And then I'm also going to put the background in, and this one I'm going to give a bright white background. So there's my setup. Then I'm going to create my block for draw, do a void draw.
And what I'm going to do here is I'm going to turn off the stroke. So I don't want any outline on the shapes that I'm going to draw. Then I'm going to give a bright-red fill but still not totally red. I am using the RGB codes 220, 0, 0. And I'm going to draw a circle here. And the circle is going to be at the current position of the mouse. So I just put mouseX and mouseY and I make it 10 pixels in diameter.
So I can show you what this one will look like. There we go. So I've got red dots wherever the mouse is, currently. Then what I'm going to do is I'm going to change the fill to a medium-dark gray. That's 120. And again, the way you can tell it's gray is because I only have a single number here in the fill, whereas for the red I have a three numbers, which means that I'm doing an RGB. And then I'm going to draw the ellipse again, except this time I'm going to use a different thing. I'm going to use pmouse, and that is the position of the mouse in the last frame.
And I am going to do that for pmouseX and pmouseY. And so what this is going to do is the mouseX is going to draw this red dot and then this is going to put a gray dot right on top of it, if that is as an old position. And then I'm going to add a line to connect things. I can use the same medium-dark gray. And I'll just put line, and I'm going to connect mouseX and mousey to pmouseX and pmouseY.
Now, please note, the background statement is in setup, which means that the drawing here will not get erased as it goes through. So you'll be able to see every previous thing. The one interesting thing is that the red dots for the current position will be covered up by the gray dots as soon as those are old positions. Otherwise, nothing gets replaced. I'm going to add just one more line of code here, and in case things get a little busy online, I'm going to put a mousePressed command, because this is all about mouse interaction.
And what this says is if any mouse button gets pressed at any point, execute this code, and this one is going to be really simple. All I'm going to do is I'm going to copy that one, the background statement, bring it down to here. And so what this means is if you press the mouse, erase everything with a bright-white background and then just keep doing what you were doing before. So I'm going to save that now, and we're going to run this one. And you can see how it moves around. I am going to press the mouse button, press the mouse button again, and you can see how it just moves around.
And that is a very simple form of the mouse-based interaction.
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.