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 most important and most useful things that you can learn in programming a computer is how to use variables. A variable is something that can take on different values at different times. If you've had an algebra class you know say, let x=12, x is a variable and we're going to do exactly that here in Processing. Now Processing takes several different kinds of variables, and if you haven't got done computer programming before, there are some things you have to learn about being rather particular when you program. The first thing I am going to do is I am just going to give a little comment up here at the top that repeats the name of the file.
It's not essential to saving it, it's just something that I do to help you think straight in my own mind. The first kind of the variable that we are going to use is what's called an int variable, I-N-T, and that stands for Integer. Integer is a whole number, no decimal places, and these are what I called 32-bit variables so they can go to (+) or (-) two billion, approximately. So they have got a long range, there's a lot you can do with them. The first step when you work with a variable is, you need to declare the variable, and what you do for that is you say what that kind of variable is, the type, this one is an int and then you give it a name, I'm just going to call this one x, finish with a semi colon (;) and I have now Declared x.
The next step is to Initialize the variable, that means to give it its initial or starting value, and I can just go like this x=10, and then I can just say that I've initialized x. If I want to check how things are going, I can do the print line, which is going to take whatever I put here in the middle and print it down in the console, the black area at the bottom. So I'm going to save this, and I'll press Play and an empty display window pops up.
We always get display windows because Processing does graphical output. But you see, I have got 10 there at the bottom. If I want to make it slightly more elaborate, I can copy that and bring it down and I can just add a little bit of text to it in quotes. I can put X= and then I include the space because otherwise it doesn't do it. And if I save that and press Play, now we have x=10 so that's our first integer variable. The second kind of variable that we're going to deal what's called a Float and that stands for floating point.
And basically that just means, it's got decimal places. Integers are whole number, they don't have decimal places, floating-point variables do. And I'm going to do a little differently this time. I'm going to declare my variable, I'll just call it e but I don't have to declare and initialize in two separate steps. I can do them all at once. I can do float e=2.71828 that's the mathematical constant e. Although, we all know it's got more decimal places than that, I finish with the semi colon (;).
And then I am going to do another little print line, I am just going to copy that text and bring it down here and I say this time print e= that. So that part that's in the quotes is the literal text is going to putting out and then the e without quotes is the name of the variable. So I am going to save this, and press run and now you see I have got my display window but in the bottom, I have the 10, I have x=10, and I have e 2.71828. I am going comment this one out by the way. All that means is I am going to come up here and then on the PC, I am going to press Ctrl+/ or on the Mac I press Cmd+/ and then that puts two slashes // in front of that which means the program will now ignore that particular line and it won't print anymore.
The next kind of variable that I'm going to deal with, which comes up less often but still is important as is what's called a boolean and a boolean variable means a variable that is true or false and these-- kind of logical statements come up all the time, although what's funny is lot of the boolean variables and Processing are implied that you don't actually declare them as boolean but they show up as a boolean operators. You will see what that happens more when we deal with what are called 'if' statements. But right now, I'm going to declare a boolean variable and I have to give it its type which is the entire word Boolean, by the way please note that these types are all lower case.
Processing is a case-sensitive language and these commands need to be written exactly as they appear here and boolean needs to be all lower case. And than I am going to create a variable that I call switchVar or switch variable because this is a situation where I would use a Boolean. And it has to be assigned to either true or false so I am just going to put this true at first then what I am going to do is I am going to come down and I am going to copy this a little piece of text right here and copy the name of my variable, put it right there and put it right there, save the whole thing and run it.
And now you see, it says switchVar is true because that's what I've initialized it as. Now one of the cool things about boolean variables is that you can switch them around rather easily. And in fact, all I'm going to do is I am going to copy the name switchVar bring it down here, and now because I've already declared the variable, I don't have to put its type in front of it again. In fact, if I did I would get an error message because it would think I was trying to declare a second variable with the same name. But what I am going to do now is I am going to put switchVar=switchVar, I am going to do one of the modification here.
I am going to come in front of the switch var and put them an exclamation point (!.) and that is the not operator as an opposition to this is not that. And now what you see is if I copy this line right here, and I bring it down, I'll save it and I run it see you see the switchVar is no longer true, it's now false. And this can be something that you can exploit to give you extra power and flexibility in your programming in Processing. Now I've got a couple of other things I want to show you, I want to show you a char variable, it's so funny word.
Char actually means character, a single character like the letter a because you only have this little part that says char, it's usually pronounced char and the type is char and I am going to declare this one, charVar and then I am going to initialize it by giving equals and then a charVar, you're going to put either a number or you're going to put a single character in there. I'm going to put a letter in but you what you have to do is you have to put it in single quotes. I am going to put it in the capital V from my char variable, close the single quotes ('') and then with a semicolon (;).
I am going to come down here. I am going to copy this little text right here and I'm going to modify it. Now when I save and run the whole thing, you can see the charVar is down there again and it tells us that it is equal to v. The next one, which I have to admit I have never used, is a byte variable, b-y-t-e. And a byte variable is an 8-bit number and it goes only down to -128 and up to 127, it can't go lower or higher than that.
But byte variables are used frequently in one context that I know of and that is in communication with serial ports. So for instance if you've ever heard of an Arduino, that's a little micro board controller that you can connect your computer and it hooks up to sensors and actuators out there in the real world. Arduinos communicate with Processing through a serial port and it sends in byte variables and so that is one situation where that's handy to use. Anyhow I'm going to declare my variable by typing byte, and then I am going to call it dozen, and then I am going to make it equal to 12.
That's fair because it's in between the -128 to +127 range. And then I am just going to copy some of this print line text, bring that down and I am going to say that dozen=dozen, I just what to you show you something else that you can do. I have got this little bit of text here, what if I want to put the name of the variable in quotes ("), what I can do is-is I can type, the byte variable and then I am going to call it dozen but if I put quotes in right now, it's going to think I'm done with my string.
You see it turned that off. What I have to do is, I have to make it know that I don't really mean to put quotes in there using what's called an escape and that's the backslash, that's right above the return key. If I hit a backslash (\), I can then put quotes and it knows that those aren't literal quotes, meaning I'm not done with my string, it means I want this to print. And then I have to do it again for the ones at the end. Here we go, and I'll just type some more of this phrase and I will go like that. I'll come up and save this again and press Run and you see there and now it prints in the console and there word "dozen" in quotes.
The last thing that I want to show you is a color variable. This is an unusual kind of variable but it comes in very handy in Processing because we do a lot of graphical work. I'm just going to put here color variable and what I am going to do is, I'm going to type out color and then I am going to put cherryBlossomPink. It's a very long variable name. And you will see here by the way, that in this in switchVar and charVar, I am using what's called Camel Case. That is If I start a new word that smashed in, I can capitalize that as a way of separating the words.
I am going to say cherryBlossomPink= and then I am going to give a code here. This is called a hex code for colors. There are several different ways to specify colors. This is the abbreviated version and it tells you how much red, green and blue there is in it, but it does it in a single unit and it's FFB7C5 that's the hex code. Hex stands for hexadecimal. It means it counts up to 16 as opposed to counting up to 10 which is why you have an F and F is the 15 before it repeats around.
And what I'm going to do here is I am now going to take the little window that's been popping up each time and I am going to give it a color. I am going to give it background. I am just going to copy the name of this variable, paste it in there. Close that off with parenthesis () and put a semicolon (;), save the whole thing and hit Run and now I get a little display window that pops up with a 100x100 pixel swath of cherryBlossomPink. Those are the most important kinds of variables that we will be working with: the int for integer; the float for floating point or decimals; the boolean for true/false; the char for single characters or numbers; the byte variable, usually for communicating with a serial port; and the color variable in Processing. And between those, we're going to have a lot more flexibility and power in what we work with and we will be using these in every sketch from here on out.
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.