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 was created for graphical output and as such it has a number of ways of working with colors. In this movie, I'm going to show you just a very few things about how colors are specified in Processing. I'm going to start by just putting a little comment in here with the title of this sketch. I will create a window, 600x200, and I'll turn on anti-aliasing. I'll turn off strokes, no borders on the shapes. I'm going to be drawing a few rectangles.
I'll be doing rectMode center in this particular case. And, then also I'll have a background that's dark gray. Let's see if we just draw that, wonderful. What I going to do now is I'm going to draw a few rectangles and I'm going to draw like this. Well actually, I'm going to use a few variables to specify where the rectangles go. The first one is how many rectangles do I want? In this particular case I want 4. And then I can use an equation to determine where the centers of each of those rectangles should be.
When I want the shapes to be spread out evenly, what helps is to take the width and then split it up into dividing lines and I can do that by taking one more than the number of things that I have. So, I'm going to go like this. I'm going to take the width of the window and divide it by n+1 and that'll give me sort of where they dividing lines would be. It won't draw dividing lines. But, it gives me the coordinates that I need to spread things out evenly. Then what I'm going to do is I'll draw rect and I'll go to X. I am going to do X * 1. Then I'm going to draw this right down in the middle.
So, the height divided by 2 it'll make that 100x100. Now, you can draw the first one and just see it on there, there we go, good. Now, what I want to do is I want to specify the fill for this in the middle. And, while I'm going to start, even though I've done this several times already, I just want to make it clear that when you specify fill or stroke and you put just a single number, you're using gray scale. And it goes on 0 to 255 scale, where 0 is black and 255 is white.
The 116 here is a middling gray. And in fact, if I press Run, you see it right there on the box. Okay, now, if I want to modify this a little bit, I can copy it and I can add a second parameter to it. When you put two parameters in the specification for fill or stroke, what you're doing is grayscale. But, the second number is now as alpha or transparency level, where 0 is completely transparent and 255 is completely opaque. So, this one would be on the transparent end of things.
I'm just going to have it draw on the next space, Save it and Run. And now what you see is it appears to be darker. What's interesting is that the coloring of the rectangle is actually specified in the same way. They're both on 16 on a 255 scale. But, because the background is darker, this one is letting some of the background through, so it appears darker that way. And so, that's a grayscale with alpha. And now, what I'm going to do is I'll extend that again, I'll add a third parameter. This time I'll go to 116 to 173, to 146, and when you specify three numbers in there, you're working in an RGB color system.
And this in fact, is going to be green. And so now I have a green box right next to the other ones. So, that's when I have three factors or three numbers within the fill function. And then by extension I can go one more. And if I had a fourth parameter in here, what I've included now is color with an alpha. So, there's going to be transparency to this color. I'll just move it out a little bit, Save it and I'll Run it. And now you can see that it's green but is darker and that's because it's letting some of the darkness of the gray background in the way through.
Otherwise, it's specified with the same shade of green, but, is tinted because of the darker background. Anyhow, and so, those parameters; the 1, 2, 3, or 4 parameter system for fill and for stroke are ways of specifying colors, both on grayscale, color, and transparency levels in Processing and these can be very useful tools in your own sketches.
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.