Interacting with zooming, rotating, and sliding

When you create a data visualization or any other sketch in Processing, one of the great joys is being able to interact with the sketch and take a look at it personally to explore it, to rotate it, to walk around it, and to see how it looks from different perspectives. And for data visualization this is a critical component. In fact, that's why the course is called Interactive Data Visualization with Processing. And what I want to introduce you to is some of the most fundamental and most important kinds of data visualization interactions that you can have. There are also very simple ones.

In fact, I'm going to show you with a very simple sketch of a few circles, how you can introduce some really easy interaction, but also very productive. Now this one, I just want you to open up the code. I'm going to walk you through it. So this is exercise 13_01, and this is simply to introduce some forms of interaction. The first thing I have at the top is I'm going to be drawing some circles and so I have a variable for their diameter; D is for diameter, the circles are going to be 40 pixels in diameter. Next, what I have are a few variables that are directly relevant to the interaction.

I'm going to be allowing people to shift the sketch around and that could be a form of translation. We've talked about that before. And so what I have here are two versions of the "x" and "y" with the "o" for origins, so the x-origin and the y-origin. Those are variables that can be altered. The next one is for zooming in. That's going to be working on the scale function and transformation, and the default value is 1, the original scale. And then the last one of those four is float and I've got an angle variable here.

And what this is going to do is for rotating, and it's going to start at the default value of zero. So I have variables here that are going to work into zooming, into rotating, into shifting the sketch around. So now what I want to have is a pretty quick setup statement. I have a window that's 600x200 pixels, and I am centering the origin in the middle of the sketch to begin with. So while we're still in setup I'm taking the origin from the top-left and bringing it to the very middle of the sketch.

And the reason I'm doing that is because otherwise that the zoom and the angle do very funny things if you leave the origin off to the sides, so centering it can be really critical for this. Then I have the anti-aliasing turned on with smooth, and I've turned off the outlines for the circles with no stroke. Then we go down to draw, and I have sort of a steel blue background, and then I have the translation variables here again, and the reason they're appearing is because I'm going to make it so that those can change. So they got declared globally at the top.

They got initialized in the setup statement, but here they are made so that they can be dynamic. The same is true for the scaling variable and for the rotating variable. And then what I have is I'm going to draw five circles, five ellipses. They're all 40 pixels in diameter. They're all straight down the middle. They're at just 100 pixels apart from each other. And all I'm doing here is I'm changing the fill slightly. They're going from darker to lighter as they get to the middle, so medium dark, medium light, rather light, and back again.

And then beneath that I have the code that makes the interaction happen. And here's what's going on here. Two of these forms of interaction revolve on key presses. It's a very simple kind of interaction, and first what it means is if a key is pressed then look at this block, and then I have nested if statements. It says an if that key is coded, because if I'm just asking for the 'A' or the 'B' key, those aren't coded, if those are just regular ASCII key and they stand for themselves, but I'm going to be using the arrow keys and those are coded ASCII keys.

And so if a key is pressed and if it's coded, and if the key code is up, and by the way please notice the two equal sides, so we get the equality statement there, and then if it's up then I want you to zoom in just a little bit. Every time you cycle through and the button is held up, I want you to increases the zoom by just .03. You can change that if you want, but I found that one works pretty well. Then I put an "else if". On the other hand, if it's the down one then I want you to zoom back out.

And if it's the right one, I want you to increase the angle and rotate clockwise, and if it's the left arrow I want you to decrease the angle and rotate counterclockwise. So that gets in the shifting to the left and the right, and it gets into the rotating. And then I have another one down below that's included in the key code and that is if key is equal to an empty space, that's the spacebar. What that's going to do is it's going to reset the drawing back to the center on everything. So a spacebar will reset, and then I've got one more little piece of information down here.

We actually have a function we haven't used before. It's called mouseDragged. Really it's just saying, if the mouse is clicked and the mouse is moved then do this, but I wanted to make it so that people could drag the sketch around and that let's them do it. Now you may remember from earlier "xo" and "yo" define the origins in their translated form, and what this does is it let's me click anywhere on the screen and then the origin will follow in the direction that we're clicking. So I don't have to click right on the origin. I can click anywhere and the whole thing will translate however I drag it.

So this is very simple interaction, but it's very effective. I'm just going to scroll back up to the top here. And I'll hit Ctrl+R to run; that's on Windows, Command+R on a Mac, and there is my five dots. Again, a very fundamental one, but let me show what happens. First I'm going to hold the Up key and I'm zooming in, then I will hold the Down key, and I will zoom back out. Turn the right key, rotate clockwise; left key, I can zoom in and do those. It does one at a time.

And then I can also drag with the mouse. I'm going to come over here, I'll click down and I can drag. And now, I've lost the whole thing and I don't know where it is. I can just hit the spacebar and it comes right back to where it was. And so these are very fundamental things, but they really are the basic building blocks of interaction. The ability to zoom, to select, to focus in on what you want including rotation, and above all to be able to reset and get back to where we were. These are critical steps in being able to visualize and these are some of the most important things you can learn in working with data visualization in Processing.