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 common ways of repeating code within Processing and then almost every other computer language is with something called a for loop, and this is a structure that allows you to specify how often the particular code is to be repeated. I'm going to show you a quick example of how this works in creating a drawing in Processing. I'll begin with comment there. I'm going to import a palette from the palette.txt file that's in the Exercise File. This one, I'll be using this palette right here.
I'm going to copy it, paste it in. I'm also going to create a variable called s for the size of the squares I'm going to be drawing. I'm going to make them 50 pixels on the side. Then I'll do the setup. In the setup I'm going to put the size, 600x200, the background, I'll be putting in, turn on the anti-aliasing and turn off the borders by using no stroke.
So there's the setup. Now normally at this point I would finish the setup and go onto draw, but for this particular one I want to actually go through a couple of loops to fill in the background with some squares. In fact I'm going to be using two loops. Now the way a loop works is you write the word For and then in parentheses, you put a number of pieces of information. The first one is you initialize a variable usually as i, but in this case I'll be using x, because I'm actually going to be incrementing the x variable on this one and I start by saying the initial value of x is 0.
Then you give a test limit and only run through the loop as long as x is less than the width of the window. Every time you run through the loop, take x and add on to it the value of s, which is in this case is 50. So that is the for loop. Now what I'm going to do here is I'm going to come down and create the curly brackets to that block, but I'm actually going to nest another for loop inside this one, because I want to do a grid that goes across and also goes down the window.
So that will be for, but this time y because this is going to be going down. Y needs to be less than the height and Y gets incremented by a similar amount. So what this is going to do is it's going to take the line of x and then go down each step in y. Then it'll go to the line in x and go down each step in y and so forth until it's filled up the entire grid. What it's going to fill it up with is squares of randomly chosen colors.
We're going to use the random palette selection. We've done this a few times already where I specify a fill and then I want to go back to the palette array. Then I need an index number from the array, but I want to use a random number. I have to cast it as an integer variable. That gets a little complicated, and right now I'm just adding the closing parentheses and brackets to finish that off. Then I specify a rectangle. Now this is the easy part. You see that this one, because of the loops I just say drive it x, y and make it s wide and s tall.
And it's going to start with an x and y of 0 and then cycles through 50 pixels at a time, first across the width and then the height. And when I press here's what I get. I get a grid of squares of different shades of blue. If I were to click Play again, it would be a different grid. You see how it's changing each time. But a really cool thing that we can do is once it's filled in is we can go to the draw block, down below, and I can just add this code here.
Now the emphasis in this particular movie is on the for loops and you see that we these nested for loops and how they fill in the grid, and it's a really nice thing to do. This one, I'm also going to get a random fill so I'm going to copy it from right here and then what I'm going to do is I'm going to randomly select values of x. So you see actually I have to declare these again, because the Xs in the for loops were local variables and I made a different block of code.
What I'm doing now is I'm setting up a slightly complicated calculation that will randomly select s, but make it at the beginning of one of the squares in the drawing. I get it by finding how many squares fit in the drawing. That's why I do the width divided by 50 and that's actually going to be 12 and then I get a random number from 0 to 12 and then I turn it into an integer and then multiply that times s to get back up to the original s. It's a little complicated, but it works for what we're doing.
I'm going to do a similar calculation for y where I just change it to y and I change the word width to height, and then finally I'm going bring this code for drawing a rectangle again. And you'll see what this one does is it randomly updates the color of one of the squares in the grid every time. So I'm going to just save this and run it, and it filled in the first time and now it's randomly updating continuously as it goes through. But it was their for loops, the two nested for loops, one for X and one for Y that made it possible to draw the squares at regular intervals in the grid in the very first place and that's one of the great timesavers when you're learning to code.
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.