New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Interactive Data Visualization with Processing
Illustration by

Creating conditionals


Interactive Data Visualization with Processing

with Barton Poulson

Video: Creating conditionals

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.
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
    2. What you should know
      1m 22s
    3. Using the exercise files
  2. 11m 51s
    1. Overview of data visualization
      11m 51s
  3. 11m 53s
    1. Installing Processing
      3m 38s
    2. Overview of Processing
      4m 5s
    3. Exploring libraries
      4m 10s
  4. 1h 1m
    1. Basic setup
      7m 31s
    2. Drawing points
      4m 37s
    3. Drawing lines
      5m 6s
    4. Drawing ellipses and circles
      5m 24s
    5. Drawing arcs
      6m 54s
    6. Drawing rectangles and squares
      4m 58s
    7. Drawing quadrangles
      3m 25s
    8. Drawing triangles
      2m 55s
    9. Drawing polygons
      3m 37s
    10. Drawing simple curves
      4m 54s
    11. Drawing complex curves
      6m 46s
    12. Drawing Bézier curves
      5m 38s
  5. 54m 3s
    1. Introduction to variables
      10m 44s
    2. Understanding variable scope
      6m 53s
    3. Modifying variables
      9m 8s
    4. Creating arrays
      9m 53s
    5. Modifying arrays
      6m 37s
    6. Creating strings
      7m 3s
    7. Modifying strings
      3m 45s
  6. 1h 2m
    1. Incorporating randomness
      7m 59s
    2. Using Perlin noise
      4m 24s
    3. Shuffling with Java
      3m 30s
    4. Specifying line attributes
      8m 2s
    5. Changing placement modes
      5m 45s
    6. Understanding color attributes and functions
      4m 16s
    7. Exploring color spaces
      7m 44s
    8. Using color palettes
      7m 5s
    9. Transforming the grid
      8m 38s
    10. Exploring the attribute matrix
      5m 33s
  7. 52m 7s
    1. Building code blocks
      5m 57s
    2. Writing a while loop
      3m 52s
    3. Using for loops
      5m 35s
    4. Creating conditionals
      14m 50s
    5. Working with easing
      10m 51s
    6. Creating spirals
      11m 2s
  8. 18m 55s
    1. Mouse tracking
      3m 54s
    2. Hovering and clicking
      11m 16s
    3. Understanding keyboard interaction
      3m 45s
  9. 27m 32s
    1. Specifying fonts
      6m 43s
    2. Using images
      5m 51s
    3. Playing a video loop
      6m 20s
    4. Exporting video
      3m 47s
    5. Adding sound
      4m 51s
  10. 20m 49s
    1. Creating functions
      11m 48s
    2. Creating classes and objects
      9m 1s
  11. 31m 10s
    1. Using embedded data
      5m 26s
    2. Working with appended text data
      6m 4s
    3. Working with appended tabular data
      10m 26s
    4. Reading XML data
      9m 14s
  12. 48m 17s
    1. Generating dot plots
      11m 11s
    2. Building scatter plots
      10m 0s
    3. Making line plots
      9m 55s
    4. Creating bar charts
      9m 12s
    5. Checking out examples of maps, hierarchies, and networks
      7m 59s
  13. 20m 57s
    1. Introducing some principles of 2D design
      13m 44s
    2. Understanding color theory
      7m 13s
  14. 24m 46s
    1. Interacting with zooming, rotating, and sliding
      6m 26s
    2. Implementing slicing
      6m 47s
    3. Using rollovers
      5m 58s
    4. Introducing the GUI libraries
      5m 35s
  15. 10m 35s
    1. Sharing via OpenProcessing and other sites
      3m 19s
    2. Saving as a desktop application
      2m 42s
    3. Saving as JavaScript
      1m 47s
    4. Saving as an Android application
      2m 47s
  16. 2m 38s
    1. Where to go from here
      2m 38s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Interactive Data Visualization with Processing
7h 43m Beginner Sep 25, 2012

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.

Topics include:
  • Exploring the need for creative data visualization
  • Drawing basic lines and shapes
  • Introducing variables, strings, and arrays
  • Modifying drawing attributes such as color
  • Making drawings more dynamic with animation loops and spirals
  • Creating keyboard- and mouse-based interactions
  • Adding images, video, and sound
  • Reading in text or XML data
  • Creating plots and charts
  • Publishing and sharing your work
Developer Programming Languages
Barton Poulson

Creating conditionals

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.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Interactive Data Visualization with Processing.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?


Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.