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 of the great things in programming is the ability to make what happens conditional on user input or some other computer function. In this movie, I want to show you several kinds of conditional statements that you can use in Processing to alter the way that your sketch is executed. Now, what I'm going to do in this one after I put in a little comment here, is I'm going to bring in a number of color palettes so I have choices for these and I'm actually going to do it, I'm going to grab five of them from the palettes.txt document that's in the Exercise folder.
And I'll just paste that in here, then I'm going to delete a little bit of text, I don't need that information or that information or that. I'm just getting down to the list of the colors themselves. And then I'll leave this last one like that. What I'm going to do now is create a number of variables that will be used to help set up some of the conditional statements in the sketch. For instance I'm going to have one here that's call choice, which is going to allow people to choose which palette is used in a particular drawing.
I see I missed one right here, there we go. And if you really want to, you can line things up. By the way, spacing doesn't matter in Processing it doesn't care if you put things on the same line on different lines, as long as you remember use your semicolons and set things apart; otherwise so. But if you need to have things lined up, you can do it like that. So I am going to have a variable, an integer variable for choice to indicate which palette people have chosen for this drawing. I'm also going to have two variables called p1 which I will initially set to 1.
And another called int p2 which I'll set to 2, I'll explain these a little bit later in the drawing. Then I'm going to have a few other coordinates, I'm going to have a float for the x position, and then I'm going to have another float for y then, then I'm going to have another variable of float for d and that's for the diameter of an ellipse I'm going to draw. Then I'll have another one for b, and that's going to be for the size of the border of the ellipse that I'm going to draw. Okay, and with that introductory information in place what I can now do is start the actual sketch.
I'm going to first create the setup block. I'm going to go void setup. The first thing I'm going to do is create the size of the window, size 600x200. So 600 pixels wide 200 pixels tall, I'll turn on the anti-aliasing to make it a little smoother. I'm also going to set initial values for x and y. I'm just going to put x = width/2 and y = height/2.
Okay, then I can go down and setup the draw block. Void draw, again void because there is no return data on this one and then the empty parenthesis because there are no arguments for the draw function, but I do have code inside the block. This is where I put information on the background, which I'll be using from the palette that is selected. Then I'm going to do it couple of other color things.
I'm just going to copy that and paste it. I'm going to make this one the fill and this one the stroke. And now I'll make that index 1, and index 2 in the selected palette. And then stroke weight will be based on the variable b, that I defined up ahead and make it another global variable. And then, finally I'm going to draw an ellipse. I'll center it on the x, y which I defined up above and setup and it will have a diameter of d, that's a global variable I defined up top.
And so we can save this and see if it actually draws something at the moment, there we go. So what I have right now is a static drawing and right now, it has no conditional statements it's not responsive to anything we do. But is based on large series of variables. And what I'm going to do is create a series of statements that allow us to change the way these variables each work. So I'm going to come right back to here. The first thing I'm going to do is right after I have ellipse, I'm going to put an 'if' function.
And if is one of the most common conditional statements. And I'm going to say, if this is the case and then do this. Actually, I'm really going to use an if else. If this is the case then do this otherwise, do this. Now what I'm going to do is I'm going to use the variable mouseX and that is the x-coordinate for the cursor at the moment, so that changes constantly. And we say if mouseX > width/2 so if it's on the right half of the screen, then we're going to execute this particular piece of code and what I'm going to ask you to do is to increase the diameter slightly, just half a pixel every cycle through every time it loops through.
So d += .5 is a way of saying, take d and add .5 onto it, each time I go through. So if it starts at two then it will be 2.5 then it will be 3 then, 3.5 and so on. On the other hand, if the mouse is not on the right side. You don't have other choice that is on the left side. I'm going to put this expression, else. I don't have to say that it's on the right side because, I see no other possibility. In that case let's have d gets smaller with each loop, also by .5.So now, I can run this and you can see that as I move the cursor to the left and the right, the size of the circle changes and there's no dead place, it's going to always be growing or shrinking depending on what I do.
I'll press Escape and quit that. So that is an if statement and then an if else. So the first kind of interaction the condition I have is with the mouse position. Alright, I'm going to do a similar thing for vertical position, changing the width of the border. But I want to show you there's a shortcut kind of statement. Processing simply calls it a conditional with a question mark and then other places call it a ternary statement. And it's a way of writing an entire if else statement in one line.
So it's very compact although it can be a little cryptic. So that's why I did a regular if else statement above. The way a ternary works is I'm going to take b, which is the size of the border, and you say b is equal to and then you put the condition that must be met. And I'm going to put mouseY is a greater than I will put height/2. So that's my conditional statement. And what I am going to say is, if that is then I put a space and a question mark.
So if that is true then do this, b + .1, then I do a space and a colon, not a semicolon, a colon. If that statement is not then do this, b - .1 and finish with a semicolon. So that's an entire if else statement in a single line, you probably wouldn't guess it by looking at it. It is equivalent to what we have above. There is a few things I need to point out. Number one, I have the height/2 in parentheses in this one that appears to be necessary, can't explain that one. But more importantly, you see that where previously ahead d += .5, so that was called an additive increment.
On this one I simply put b + .1. Now if you put the += you get an error message. The ternary statement to conditional was it simply written as b + this, or b - that. Okay, the other thing that we are going to see in this one is that the b could potentially go negative and that would actually be a real problem with this one. Interesting for the ellipse, it's not a problem. But for the stroke it can't go negative. If the ellipse goes negative, it just starts looping around the other way and there's no problem. But the border cannot be negative otherwise, the computer freezes and you'll have to Ctrl+Alt+Delete to quit it or you'll have to do a force quit on a Mac.
The way to deal with that is to put in a constraints statement, I think we've seen this before. And what I am going to say is b is equal to and then the function is constrain and what I'm constraining is the variable b, so I'm constraining itself and I'm going to put it here, that it cannot go less than 0 and it can't go greater than 50. And the reason I can do this afterwards is because the draw looks at the entire code in the draw block before it executes it, it only executes it once each time it runs through. So this is a safe way to do it and this will keep the program from crashing and us having to do a force quit or Ctrl+Alt+Delete to get out.
So now I can save this and run it. And you can see the border gets thicker, when I'm on the bottom. Now it's really thick, now it's thinner. And so just depending on what quadrant I an in, we get different patterns of growth, and let's see what happens when the border is still there but the ellipse can go negative, it just comes around the other way. But the border will stop at 0, because that's the way I have it set up. Okay, great, but now I'm going to show you one other kind of conditional statement.
This one gets a little bit long, but that's because it's four long conditionals and that's what's called the switch statement and it's when you have more than one possible choice here. Now I'm actually going to put this switch statement in a separate block of code. We have a setup block and we have a draw block. I'm also going to add a key pressed block, it works the same way. It's void because it doesn't return a data type. And so I have keyPressed, that's the name of the function, it has no argument so I have the empty parentheses because every function has to have their parenthesis.
Then I'm going to put my curly brackets in their. And then what I'm going to do is you may remember that I've created this variable up top, I am going to go up top to show you. Add these are variables choice p1 and p2, those are going to be useful in my switch statement. And here's what I'm going to do. I'll press it p1, is a random variable random, it's going to randomly select the color from the arrays that I have above. And so what I need is to cast the random, because the random will get me a floating-point number and what I actually needs is an integer to make this work.
But if I do it like that, it will get a random number from 1 to 4.999 it'll chop off the decimals and then it will turn into an integer 1, 2, 3 or 4 and that's perfect for what I need. I'm going to duplicate that for p2. These will determine the fill and the border as we go through. Then, what I'm going to do, is I'm going to create another block, that has to do with the choice variable that I created and the choice variable is going to be based on the key code. I'm going to have people type in a 1, 2, 3, 4, 5 to choose the palette.
Then what I'm going to do is I write a switch block. So I put switch and the thing that drives the switch is the choice which in turn is based on the key. And so I type switch choice and then it gets its own curly brackets because it's a nested code block. And then I want to start putting is I put case, and this is going to say, depending on what the value of choice is, choice is a thing that's driving the switch, now I need to put the actual value. Now it's going to look a little weird, the first choice is 49, that's because the ASCII code for that one key and the numbers across the top is 49, it's not 1, it's 49 that's the ASCII code.
And so I put 49 and then, I put a colon not a semicolon. And what this says is if the person types key number 49 which is the 1, then I want to do two things. I want to put palette =, and let's see what my five choices are here, my first one is rainbow. So I am going to palette = rainbow and that's how I'm going to be switching with this variable. So now I need to tell that I'm done with the stuff when case = 49 and I put break with a semicolon.
Now what I can do is I can repeat this code for the other choices so I'm going to paste that in a couple of times. All right, the ASCII code for the number 2, on the top of the keyboard is 50, for 3 it's 51, for 4 it's 52 and for 5 it's 53. I know this is totally counterintuitive, it's really easy to get an ASCII code chart off the Internet to see what ASCII codes correspond with what keys.
But these are the ones for the first five numbers. and then I just need to switch what the palette is. So the first one I had was rainbow, the second one will be chemistry, the third one will be kitties; the fifth one will be beach. Excuse me, that's the fourth one. And the fifth one will be cottage.
I actually see that I have more than I need up here. So I'm going to comeback in just one second. Well, you know what I'll do, is I'll add a sixth choice here. I'll just make 54, so this will be choice number 6, I'll come back to get Minard. There we go. And then that should be adequate. So what's this is going to do, is I've already set it out so that the size of the ellipse and the size of the border vary according to the mouse position on x and y. I'm also going to set it up so that the palette can be determined by the 1, 2, 3, 4, 5, 6 keys.
I've also made it so that every time you press a key, it will choose randomly within that palette. So this one is going to get a little busy. But here we go, I'm going to press run. And if I press 2, I have a different palette. But look if I just keep pressing the keys, it changes within. So that is my interactive, it's depending on mouse position, on the keys I press and it gives a lot of interaction for this particular drawing. Now this kind of a silly example, but it does give you an idea of the sorts of things that you're able to do in your own work, in your own visualizations at a later point.
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.