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.
Processing provides you with several different ways of repeating code and automating elements of your sketch. One method for doing this is what's called a while loop. Now the while loop in Processing seemed a functional differently than others where you can say for instance, while the water level is below 10 feet, do this; when it's above, do this. I'm going to show you an example of how you can use a while loop to produce a particular drawing. I'm going to copy in a palette.
I'm going to use this one up top. This is from the palette text document that's included in the exercise files. So there I've got my color palette and I'm going to also put in a variable, a float variable that I'm calling the limiter. Then I'm going to create my first block of code which is set up. I put the size of the window, 600x200. I'll going to put in the background color which is palette the first color which has index number 0.
I'll turn on the anti-aliasing. Then I'm also going to change this strokeWeight to 5 pixels. I'm going to have noFill in the shapes that I'm going to draw and then I'm actually going to adjust the frameRate for the sketch, although that may not make a difference in how it works. The second block is the draw and this is where I'm going to put the while. What I do is I specify while=(limiter<100). So it starts at 0 and I'll go up to 100.
It will stop when it gets there. While it is less than a hundred execute this other code. Now you notice I actually have a nested loop. I have second inside of curly brackets within the draw. That's fine. You can have as many as you want going in and out as long as you remember to close all of them which is why I draw the closing one as soon as I draw the opening one. So what I'm going to do now is I'm going to set the stroke to come from the palette, but I'm going to use a random value here where I do the (1, 5) and when that gets truncated as cast into an integer that will become (1, 4). There we go.
It takes a little while to close all of those markers and then I'm going to put in random variables for the coordinates. I want the X to be anywhere in the width of the drawing. I want the height to be anywhere in the height of the drawing. I want to size, the diameter, to be somewhere between (20, 200) and then I'm going to put ellipse centered on X, Y, D, D as its dimensions.
Then I need to include an update for the limiter variable that the condition that the while is running on. In this case I'm going to put limiter is plus or equal (+=) to a random increment. So it's going to add a certain amount of every time, but its not going to be the same amount. I'm going to say somewhere between (-1, +2). So we will generally go up and hit the limit of a hundred eventually. When I save this and run it we're not going to see anything until it's finished, because what's going to happen is the draw is not going to go through until this while loop has completed.
So we're just going to take a moment and it's going to pop up with a finished drawing. And there we go. What is drawn is a number of circles. It maybe a 100. It depends on how the random increment went on. But it just kept calculated more and more circles positions on until the limiter reached a particular value, which I set to 100, and then it stopped. So that's one way of using a while loop in Processing. It's a way of automating and repeating a particular function that you want to use a number of times and it lets you get more elaborate drawing than you would be able to do by hand-coding everything.
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.