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?

print_ln() 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.

Functions like print_ln() 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()

The setup() function is called once, when the sketch is run. The draw() function is called on every frame render.

❓ 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.

Clone this wiki locally