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
Watching:

Interacting with zooming, rotating, and sliding


From:

Interactive Data Visualization with Processing

with Barton Poulson

Video: Interacting with zooming, rotating, and sliding

When you create a data visualization or any other sketch in Processing, one of the great joys is being able to interact with the sketch and take a look at it personally to explore it, to rotate it, to walk around it, and to see how it looks from different perspectives. And for data visualization this is a critical component. In fact, that's why the course is called Interactive Data Visualization with Processing. And what I want to introduce you to is some of the most fundamental and most important kinds of data visualization interactions that you can have. There are also very simple ones.
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
      58s
    2. What you should know
      1m 22s
    3. Using the exercise files
      56s
  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
Subjects:
Developer Programming Languages
Software:
Processing
Author:
Barton Poulson

Interacting with zooming, rotating, and sliding

When you create a data visualization or any other sketch in Processing, one of the great joys is being able to interact with the sketch and take a look at it personally to explore it, to rotate it, to walk around it, and to see how it looks from different perspectives. And for data visualization this is a critical component. In fact, that's why the course is called Interactive Data Visualization with Processing. And what I want to introduce you to is some of the most fundamental and most important kinds of data visualization interactions that you can have. There are also very simple ones.

In fact, I'm going to show you with a very simple sketch of a few circles, how you can introduce some really easy interaction, but also very productive. Now this one, I just want you to open up the code. I'm going to walk you through it. So this is exercise 13_01, and this is simply to introduce some forms of interaction. The first thing I have at the top is I'm going to be drawing some circles and so I have a variable for their diameter; D is for diameter, the circles are going to be 40 pixels in diameter. Next, what I have are a few variables that are directly relevant to the interaction.

I'm going to be allowing people to shift the sketch around and that could be a form of translation. We've talked about that before. And so what I have here are two versions of the "x" and "y" with the "o" for origins, so the x-origin and the y-origin. Those are variables that can be altered. The next one is for zooming in. That's going to be working on the scale function and transformation, and the default value is 1, the original scale. And then the last one of those four is float and I've got an angle variable here.

And what this is going to do is for rotating, and it's going to start at the default value of zero. So I have variables here that are going to work into zooming, into rotating, into shifting the sketch around. So now what I want to have is a pretty quick setup statement. I have a window that's 600x200 pixels, and I am centering the origin in the middle of the sketch to begin with. So while we're still in setup I'm taking the origin from the top-left and bringing it to the very middle of the sketch.

And the reason I'm doing that is because otherwise that the zoom and the angle do very funny things if you leave the origin off to the sides, so centering it can be really critical for this. Then I have the anti-aliasing turned on with smooth, and I've turned off the outlines for the circles with no stroke. Then we go down to draw, and I have sort of a steel blue background, and then I have the translation variables here again, and the reason they're appearing is because I'm going to make it so that those can change. So they got declared globally at the top.

They got initialized in the setup statement, but here they are made so that they can be dynamic. The same is true for the scaling variable and for the rotating variable. And then what I have is I'm going to draw five circles, five ellipses. They're all 40 pixels in diameter. They're all straight down the middle. They're at just 100 pixels apart from each other. And all I'm doing here is I'm changing the fill slightly. They're going from darker to lighter as they get to the middle, so medium dark, medium light, rather light, and back again.

And then beneath that I have the code that makes the interaction happen. And here's what's going on here. Two of these forms of interaction revolve on key presses. It's a very simple kind of interaction, and first what it means is if a key is pressed then look at this block, and then I have nested if statements. It says an if that key is coded, because if I'm just asking for the 'A' or the 'B' key, those aren't coded, if those are just regular ASCII key and they stand for themselves, but I'm going to be using the arrow keys and those are coded ASCII keys.

And so if a key is pressed and if it's coded, and if the key code is up, and by the way please notice the two equal sides, so we get the equality statement there, and then if it's up then I want you to zoom in just a little bit. Every time you cycle through and the button is held up, I want you to increases the zoom by just .03. You can change that if you want, but I found that one works pretty well. Then I put an "else if". On the other hand, if it's the down one then I want you to zoom back out.

And if it's the right one, I want you to increase the angle and rotate clockwise, and if it's the left arrow I want you to decrease the angle and rotate counterclockwise. So that gets in the shifting to the left and the right, and it gets into the rotating. And then I have another one down below that's included in the key code and that is if key is equal to an empty space, that's the spacebar. What that's going to do is it's going to reset the drawing back to the center on everything. So a spacebar will reset, and then I've got one more little piece of information down here.

We actually have a function we haven't used before. It's called mouseDragged. Really it's just saying, if the mouse is clicked and the mouse is moved then do this, but I wanted to make it so that people could drag the sketch around and that let's them do it. Now you may remember from earlier "xo" and "yo" define the origins in their translated form, and what this does is it let's me click anywhere on the screen and then the origin will follow in the direction that we're clicking. So I don't have to click right on the origin. I can click anywhere and the whole thing will translate however I drag it.

So this is very simple interaction, but it's very effective. I'm just going to scroll back up to the top here. And I'll hit Ctrl+R to run; that's on Windows, Command+R on a Mac, and there is my five dots. Again, a very fundamental one, but let me show what happens. First I'm going to hold the Up key and I'm zooming in, then I will hold the Down key, and I will zoom back out. Turn the right key, rotate clockwise; left key, I can zoom in and do those. It does one at a time.

And then I can also drag with the mouse. I'm going to come over here, I'll click down and I can drag. And now, I've lost the whole thing and I don't know where it is. I can just hit the spacebar and it comes right back to where it was. And so these are very fundamental things, but they really are the basic building blocks of interaction. The ability to zoom, to select, to focus in on what you want including rotation, and above all to be able to reset and get back to where we were. These are critical steps in being able to visualize and these are some of the most important things you can learn in working with data visualization in Processing.

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

Congratulations

You have completed Interactive Data Visualization with Processing.

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


OK
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 lynda.com 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?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.