(1) Where to start....

I grew up first without computers at all, but at age ~11 or so, I got a Commodore 20 (VIC-20). Such a (simple) computer came with an instruction book and power supply. I did not initially get an games or any other software. So the "only" fun one had was to turn it on and try to enter some BASIC programs and learn to program.

Today, one is presented with a very different initial exposure to computers. Once I had kids myself, I wondered how they could be introduced to the fun of programming, without having a large initial step to take. Scratch of course is an easy and quite fun way to go, but when trying this with my kids and doing some programs myself, I found it sometimes hard and cumbersome to express programs graphically.

My older son got introduced in school recently to a new attempt to tech programming. The course/program is called You++. In the background it is using processing as the language. When I looked at what he was doing, I tried it myself and then I downloaded the stand-alone processing package. Now, that seemed both fun and easy to start with.

This blog is an attempt to show you how to start with processing, from scratch, and focus on the "fun" of it, with not a huge focus on knowing exactly on every detail of the language and functions it has and I use. Hope it is helpful to someone.

The video below is going to be an example that will be explained later. But it will be later. A few things needs to be explained first. Enjoy (hopefully)!



(2) Getting set up

Ok, so you want to explore programming. To start head over to the processing home page at:


         http://processing.org

Then navigate to the download page (donate money if you like, or later if you end up liking it, no pressure) and select your operating system. If you do not know if you have 32-bit or 64-bit windows, then you can always select the 32-bit version (or you can right click on "Computer" and select properties, like shown below to find out if you have 32-bit or 64-bit):


Download and you will get a ".zip" file in your download directory. Extract the files, to the desktop for instance, and you are done.

Now, go into the new directory (on the desktop) and you can start processing by double-clicking on the "processing" icon. You should then soon see:


Now we are ready to test our very first program. Enter this into the window, or copy and paste it:
void setup () { 
  size(400, 400);
}

void draw () {
  ellipse(mouseX, mouseY, 20, 20);
}

Easy? Right. Now press the "play" button (or Menu:Sketch->Run). You will get something like this after running over the window with the mouse:


That's it. Your first program and that was not too hard, was it?

(3) What did I just do?

Ok, so you tried it and got to draw circles in the window. But how did that happen? In processing one can insert comments in the code by entering "//". All text on the line after the two forward slashes are ignored by processing. The first program can be explained with inline comments like this:


It might still seem a little magical that this short code of just two routines (called procedures) does what you have seen it does. Lets try an addition. Colors are made up of one number, between 0-255 that represents 0=black, 128=grey and 255=white, and all the grey shades in-between. Lets change the code to:

    // setup() is called once when the program starts execution
    void setup () { 
      // Open a window. First 400 is the width in pixels, second 400 the height
      size(400, 400);
    }
    
    // draw() is called once every frame update (default 30 per second)
    void draw () {
      // Set the fill color to a random grey scale
      fill(random(0,255));
      
      // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in 
      // variables that are updated with the mouse pointer
      // First 20 is the width and second 20 is the height, in pixels
      ellipse(mouseX, mouseY, 20, 20);
    } 

If you enter this (or just add the "fill(random(0,255));" line, and run, you should get this (after moving the mouse over the window):


Now, that might look a little nicer. The "random(0,255)" will simply pick a random number between 0 (black) and 255 (white). What if you do not want to have that long "tail" of circles. Then you could add another command in your program;

    // setup() is called once when the program starts execution
    void setup () {
      // Open a window. First 400 is the width in pixels, second 400 the height
      size(400, 400);
    }
    
    // draw() is called once every frame update (default 30 per second)
    void draw () {
      // Clear the screen setting the color to 255 (white)
      background(255);
    
      // Set the fill color to a random grey scale
      fill(random(0, 255));
    
      // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in
      // variables that are updated with the mouse pointer
      // First 20 is the width and second 20 is the height, in pixels
      ellipse(mouseX, mouseY, 20, 20);
    }
    
This, when executed will make the screen look like this:


I think I prefer the "tail". But what about real color? Easy, instead of just one value (for grey) we use a set of three values in the "fill()" call. These three value are RED, GREEN, BLUE, or simply known as RGB. For instance (255,0,0)=RED. Check out this link to find colors and their values. Now add this (and remove the "background()" call;

    // setup() is called once when the program starts execution
    void setup () {
      // Open a window. First 400 is the width in pixels, second 400 the height
      size(400, 400);
    }
    
    // draw() is called once every frame update (default 30 per second)
    void draw () {
      // Set the fill color to a random color
      fill(random(0, 255), random(0, 255), random(0, 255));
    
      // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in
      // variables that are updated with the mouse pointer
      // First 20 is the width and second 20 is the height, in pixels
      ellipse(mouseX, mouseY, 20, 20);
    }
    
This gives you this nice output:


Now, try random background color by yourself!