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.
Up to this point, we've been working with what are called primitive variables like ints, floats and Booleans that only hold a single value at a time. You can make an array with any datatype. You can make it with primitives, you can make an array of int variables of Booleans of colors. You can even make arrays with more complex things like images or objects or strings that we haven't dealt with very much yet. However, every piece of data in the array must be of the same type. If you need data of different types, an object, which we'll talk about later, would probably be a better idea.
In this particular one, I want to show you how to create arrays and then work with some other values. I'm going to start by putting a little comment here at the top, put the name of the sketch and then, I'm going to show you how to create an array. The first thing you need to do, I will call this one, Manually create an array. What I'm going to do here is, first like a variable, you have to declare the variable type that's in the array. I'll make an array of int variables and then, you immediately follow it with square brackets to indicate, that it's an array.
You have the opening square bracket and the closing square bracket. Those are right above the Enter key. One way to think about these is that, this is like a little box that holds all the numbers. So you create that box with the square brackets, let me backup, and then you give a name to the array. I'm simply going to call this one "a" and then say, a = and then, what I'm going to do here, is if you're going to insert the variables manually in an array, you can do this little shortcut thing, where you simply put a curly bracket that's right above the square brackets and I'm going to put five values in there.
Close the curly bracket and then end with a semicolon. And then, what you can see is I'm going to do a little print line, the five values in a, from 0-4 are, now I'm going to do the printline in two lines. So this one shows at the top, it's because arrays get printed in multiple lines and they don't really like having all the stuff in their print line command.
And so here, is what I get. I am going to save it and run it, close this and I'll open up the -- and there you see, the five values in "a". The interesting thing about arrays is that they start counting at zero. So the first item the 100 is item 0 in the array, the fifth one is actually labeled item number 4. These are the index numbers and while that's kind of a weird way of thinking, it actually makes a lot of the math with arrays much easier.
Another way to create an array is to create an empty array and then fill it in manually. So for instance fill in. What I'm going to do here is I'm going to create another integer array. So I do int, open and close square brackets, I'm going to call this one "b" and then, if you're not going to fill in the values immediately or if you are getting it from somewhere else, you have to type in new to say that it's a new array. Then you have to put that variable type again, and then you need to put how many values there's going to be.
In this case, I'll just have three values, a semicolon. And then I'm going to put a little print line to keep track of things here. I'm actually going to put a blank line to separate it from the previous one, and I'm going to put "b" has not yet been filled in, so it's default values. I forgot to put this in quotes back here, and then I'm going to ask it to print "b" and I'm actually going to comment these ones out up here, by highlighting them and doing Ctrl+/on the PC or Cmd+/ on the Mac.
So they're still there but they won't run. Now, I save it and run it, and you see that what it does by default is it fills in the array with zeroes. So it's not completely empty. It has values, it's just not the ones that I wanted to give it. If I want to assign the values, one way to do that is to simply indicate that I am going to do "b" and then in square brackets, I put the index number of the item. In this case, I'm going to say, that the first item which is b as its index is now equal to 3, that b is equal to 6, but b the last item is equal to 9; and then I can do another print line, and say, now the values of b are, and then I'll do the print line for the entire array, I hit that again, and now you see that they filled in, oh, you know what I made a mistake, I used the wrong slash right here; got to flip that around to the other slash to make it an escape character.
Now when I run it there we go. Now you see that the values are 3, 6, 9. So that's one way to do it. Now, filling in an array like that would be such an extraordinarily arduous process, you would never want to do that unless you're just changing one value at a time. A much better way is to fill it in with a loop and we're going to talk more about loops later, but I just want to demonstrate a neat way of doing this. What I'm going to do is I'm going to create a window, 600x200, I'm going to give a white background to the window by just doing 255, so that's full white, turn on anti-aliasing, and then I am going to set the stroke because I'm going to draw a bunch of lines.
I'm going to make the strokes relatively dark gray, 100 on the 0 to 255 scale. But I'm also going to make them highly transparent, that's the alpha value there. If you have just two values, where you put color, it's a grayscale value and it's an alpha. So these ones are going to be relatively dark but highly transparent and now watch what happens right here. We're going to tell it that I want to draw, I'm going to draw a thousand lines and I'm using a variable int to simply indicate how many I want because that makes it easier to change.
And then I'm going to change create a few arrays of floating variables, that get x-coordinates for lines across the top and lines across the bottom and all I'm going to do is put xTop as a new array of float variables and it's going to have "n" in it. You can see by using the variable "n" up above I don't have to write a 1000 here and if I decide to change it from a 1000, it's really easy to modify it. And I'm going to do another array.
So I'm just going to copy that, paste it down and those are the top. I'm going to have another array for "x" values on the bottom. So now, I've got two arrays created. Now I'm going to make a loop to fill those in, this is one of the best things you can do. And I'm creating a local variable here called "i" that exists only within the loop and "i" is the most common variable for loops, I think of it as index. It's going to start at 0 and it's going to go until it reaches "n".
And you can actually see, if I say, less than "n" but that's okay because even though there's a thousand items because it starts at 0, the thousandth item will be 999, so this will work as a limit. And then I'm going to increment through one step at a time. By the way, you may notice, I tend to put my closing curly brackets and then go back just so I don't lose track of where I am. What I am going to have it do is execute these lines of code a thousand times. I am going to say, I want you to go to the array xTop and I want you to go to the index number "i".
Now, you saw, early above, I put b, b, b. This will simply go xTop 0 through xTop 999. And I'm going to tell it is equal to a random number somewhere between 50 and 550. Then I'm going to do the same thing for xBottom. So what this is going to do is it's going to create two arrays. We have an array of x-coordinates for the top and another array of x-coordinates for the bottom and they're all random values between 50 and 550.
By the way, the reason I choose those is because the window is 600 pixels wide, this just keeps a border of 50 pixels on each side of the window. Then what I'm going to do is I'm going to draw lines. Remember when you draw a line, you need the x and y for one end, and the x and y for the other end. What I have here, is I'm going to do an xTop(i) and I'll put 25, so it's going to start just 25 pixels down from the top, then I'll go to xBottom(i) and that one will go to 175 which is 25 pixels from the bottom, and when I run that, we get something very interesting.
And what that is, is a thousand lines drawn with random x-coordinates but all on the same y-coordinates, and you can see that this would be a lot easier than trying to type in a thousand y and x coordinates manually. Instead, I use this little loop to fill in an entire array, and you can see the efficiency we have with that particular approach and that's something that's going to come very handy in subsequent movies, where we start dealing with data sets and we want to be able to fill in a lot of values with a little bit of code, as little as possible.
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.