Skip to content

Home

Jump to bottom
Eamonn Bell edited this page Mar 26, 2016 · 81 revisions

Pre-requisites

If you can complete this before the workshop, great!

Download and install Processing 2.2.1:

Please don't use any of the later or earlier versions.

Install the Peasycam library

You can install the latest Peasycam from within Processing via the menus

 Sketch > Import Library... > Add Library...

A note on this workshop

  • The goal of the workshop is to produce a 3D visualization of a toy dataset of Twitter status
  • The main way I will test your understanding of the material covered so far is to ask you to tweak the code examples I give in some way to change the output
  • If you're stuck - don't worry! The workshop is designed to give you a taste of what's possible with Processing and to encourage you to follow up if you find it interesting.

Exercise 0

A Processing sketch is not just a single file. It's:

  • a main sketch file: SKETCH_NAME.pde
  • other .pde files defining custom classes
  • other .java files and data files
  • ...all inside a folder that has to be called SKETCH_NAME

You can think of Processing as a subset of Java. So if you know Java, you know most Processing syntax. If you don't, no worries!

❓ Before you run the ex0 sketch, what do you think it does?

❓ Run the ex0 sketch with the menu (or Ctrl-R). What does it do?

println() is a function. We know that 'cause it has parentheses in the mix. It takes stuff and does things with it. In this case it sends the stuff you tell it to the "console", which is the lower part of the Processing environment. Stuff is a big category:

  • strings - delimited by double quotations "
  • numbers - we only have to worry about integers (whole numbers) in this workshop

📖 Modify the code so that it sends the text Hello world! to the console ten times in a row. Be as clever or as straightforward as you like.

Exercise 1

We're done with the ex0 sketch. Close it out and open up the ex1 sketch by finding the right folder and opening up the sketch code.

Any more, I'm just going to assume that when we move on to Exercise n, you close down everything and open up the sketch exn.

The purpose of this exercise is to introduce you to certain fundamental programming concepts and how they are used in Processing.

Functions

Functions like println() do stuff. The stuff it does is already pre-determined by Processing.

But you can define your own functions that do stuff. Mostly by calling on other functions, but it's still useful. The syntax for function definition involves brackets - the curly one: {. It looks something like this:

 void my_function_name() {
      // stuff my_function does
 };

The keyword void indicates that the function does not provide a result to its caller.

Most Processing sketches need two core functions whose actions you define. Otherwise they don't run.

  1. setup()
  2. draw()

We look at each in turn.

setup()

The setup() function is called once, when the sketch is run.

❓ Look inside the definition of the setup() function in ex1. What do you think it does?

Oh, yeah. Semicolons. Lovingly misused in English by millions daily. In Processing (and some other languages) they're like a full stop. They say: here's the end of an instruction for you, expect another.

📖 Make the drawing window really tall and skinny. Now make it really short and fat. What does this tell you about order of stuff that size() expects you to give it?

📖 Give size() stuff that makes it break. What does Processing tell you has gone wrong? How useful is that information?

It makes sense that size() goes in the setup() function definition, since we normally want the size of the window to stay the same. The background() function paints the whole window one color. That color is (255, 255, 255) a.k.a. white.

For this workshop, colors seriously don't matter. If you know what RGBA is, great. If you know HTML colors then you can use them in Processing either, any time a function works with color-stuff. When in doubt, choose Papaya Whip (#FFEFD5). Actually, always use Papaya Whip.

draw()

The draw() function is called on every frame render, pretty much as frequently as is possible.

OK, so Processing is like an animator's flip book. Any drawing that happens in the draw() function gets done over and over again, like on every page turn.

That way, if we fiddle with positions of thing on the fly, we'd get the illusion of motion. But if we don't, it looks like things are static. Which is fine, but it's important to remember that all those red squares are really being redrawn up to 60 times a second.

Another metaphor. Processing is also a bit like a kid who can only handle one color (or thickness, kind, etc.) of crayon at a time. So, for instance, to get Processing to build up a complex image with many components, imagine instructing this kid:

  1. pick up a green pen
  2. draw a rectangle
  3. pick up a red pen (implicitly, kid puts down green pen, right?)
  4. draw a bunch more rectangles

❓ Now look at the code in the draw() function. If colors are specified by a sequence of three numbers which tell you the balance of red, green, and blue in the mix respectively, what function name corresponds roughly to the 'pick up a ____ pen' effect described above?

rect()

📖 Mess with the stuff that the first rect() function operates on (the stuff between parentheses) so that you make the green square larger.

The "stuff" that a function operates off of are called function arguments or parameters.

rect(top_left_x, top_left_y, botttom_right_x, bottom_right_y) draws a rectangle:

  • whose top left corner is top_left_x pixels over from the top left of the window
  • whose top left corner is __________ pixels down from the top left of the window
  • whose bottom right corner is __________ pixels over from the top left of the window
  • whose bottom right corner is bottom_right_y pixels down from the top left of the window

Other important functions you get to define

Processing has a whole slew of optional functions with special names whose contents you get to define. Processing understands the special name of the function and executes its contents under certain pre-defined circumstances.

❓ Under what circumstances do you think instructions defined in a function called keyPressed() code is run? How about mouseDragged()?

Because they "handle" what happens when a certain event (user, system, etc.) happens these special functions are sometimes called event handlers.

📖 Run ex1 and click your mouse in the draw window and drag it around.

Inside mouseDragged()

What's going on inside this function?

First we declare three variables by telling Processing what kind of data (stuff) they hold. In all three cases, the variable is a whole number (integer) so the type declaration is int.

Just as there are special event handler functions with reserved names there are a couple of special variables that are reserved so that Processing expose certain details of the sketch to you in the code without having to write any functions to collect that data. When you type any of these reserved variable names, the Processing code editor will conveniently highlight them in pink.

❓ What are the special variables used in ex1? What information do you think each of them contains?

ellipse() draws an ellipse centered around the co-ordinates specified in the first two arguments. An ellipse has a semi-major and a semi-minor radius. These are specified in the next two arguments to the function.

❓ An circle is a special case of an ellipse such the major and minor axes are __________

📖 Modify the code so that the ellipse() function so that instead of drawing blue circles when the mouse is dragged, it draws an oval shape of the color of your choice.

📖 Did you notice the "extra" fourth argument to the color() function? Fiddle with it and find out what it does.

Clone this wiki locally