Open up Processing and you should see the “editor”, which looks like this:

The Processing Editor

If we press the “play” (or “run”) button on the top left, we’ll get a little applet like the one below.

Your First Applet

Easy, right? Think of that as our canvas. Now we can create.

Credit: flickr / Toni_Chacheres

So we have out applet, but it’s a little dull so far – just a grey box.

Let’s make it bigger, and more colorful. In the editor, add the following code:

void setup() {
    size(500, 500);
}

This is the setup() method. The brackets group the code – in this section, everything you add should go inside the brackets.

Now you should have something that looks like this!

After changing the size

However, the grey is a little dull. So let’s change the background color! Add the following (inside the brackets) to your setup() method:

background(0);

Then try this:

background(255);

What happens? What if we choose a value in between 0 and 255?

The number in the brackets denotes the greyscale. But wouldn’t it be nice if we had something more colorful? Try this:

background(236, 0 , 128);

What does that do? Try changing the three values (between 0 and 255) and see what happens.

These are “RGB” values – Red, Blue and Green. It’s like mixing colors. The first value determines how much red, the second blue, and the third green.

noLoop();

Now, we’re going to make a draw() method. Just like when we made the setup() method, we have the following:

void draw() {

}

Now, let’s draw something! How about a square.

rect(50, 50, 400, 400);

You should have something that looks like this:

Drawing a square

See how the square is white but has a black outline? We can change that really easily. Before the line you just added, insert this:

fill(255, 126, 0);
stroke(238);

Now your square should look like this:

Colorful square

fill() and stroke() work like background() did – if we have one value in the brackets, it’s gray-scale. If we have two, it’s RGB. Trying playing until you’re happy with the colors! stroke() controls the color of the line, fill() controls the color inside.

What about the numbers we use for rect()? What do they do? Try changing those up as well.

We had four numbers for rect(), the first two are the x and y positions of the top left corner. The third is the width, and the fourth is the height.

What other shapes can we have?

• point(x, y)

  (detail)

• quad(x1, y1, x2, y2, x3, y3, x4, y4)

  (detail)

• triangle(x1, y1, x2, y2, x3, y3)

  (detail)

• arc(x, y, width, height, start, stop)

  (detail)

• ellipse(x, y, width, height)

  (detail)

• line(x1, y1, x2, y2)

  (detail)

You don’t have to try all of them, but at least try line() and ellipse(). You’ll notice there’s something different about the ellipse – x and y are not the top left corner, but the center.

We can! And it’s easy. Above your setup() and draw() methods, add the following:

int width = 500;
int height = 500;
int border = 50;

Now, change the rect() line in your draw() method so:

rect(border, border, width-2*border, height-2*border);

Now, what happens when we change width and height at the top?

We can also save things inside our function if we’re going to use them more than once. See here we are repeating “2*border” twice? How about we change that.

int b = 2*border;
rect(border, border, width-b, height-b);

This shouldn’t have changed the resulting applet at all, it’s just made it easier for us to do stuff because we don’t have to repeat so much. And, if we want to change it and say, make our applet wider than it is tall, we just have to change two things. First, the initial call to size(), and the width and height variables at the top to match.

int width = 750;
int height = 400;
int border = 50;

void setup() {
   size(750, 400);
   background(236, 0 , 128);
   noLoop();
}

void draw() {
  fill(255, 126, 0);
  stroke(238);
  int b = 2*border;
  rect(border, border, width-b, height-b);
}

Making it wider

int width = 500;
int height = 500;

int x = 0;
int y = 0;
int s = 10;

void setup() {
   size(500, 500);
   background(236, 0 , 128);
   frameRate(5);
}

void draw() {
  fill(255, 126, 0);
  stroke(238);

  rect(x*s, y*s, s, s);
  x++;
  y++;
}

What’s changed?

1. Some extra variables at the top – x, y and size. We have them there so we can update them in our draw() method.
2. noLoop() is gone and has been replaced by frameRate(5). noLoop() means the draw method is called only once, frameRate() controls how many times a second it is called. Try changing the number and see what happens.
3. We drawing a smaller square – the size is specified by the variable s.
4. At the end of draw(), we change x and y so that we draw the next square in a different place. The ++ means increase the value by one.

The variables at the top are the state of our applet. The state can change over time, so that the image changes too.

Try it!

Changing the Image

If your friend was going to get you a soda, you might say – get me Cherry Coke if they have it, if not I’ll have a Dr Pepper.

The way we do that is by using if-statements. So it’s like,

if(cherrycoke) {
    buy(cherrycoke);
}

else {
    buy(drpepper);
}

We can compare numbers using these operators:

• a < b

  a is less than b

• a <= b

  a is less than or equal to b

• a > b

  a is greater than b

• a >= b

  a is greater than or equal to b

• a == b

  a is equal to b

So how about we change our code to fill the applet with squares, alternating in color.

  stroke(140, 9, 214);

  if (y%2 == 0) {
      if (x%2 == 0) {
        fill(255, 126, 0);
      }
      else {
        fill(238);
      }
  }
  else {
    if (x%2 == 0) {
        fill(238);
      }
      else {
        fill(255, 126, 0);
      }
  }

Using x%2 takes “mod 2″ of x. Wikipedia has a full explanation, but here we’re using it to determine whether x is even or odd.

So we’ve set the color. Now, we need to draw the square and update x and y. So:

rect(x*s, y*s, s, s);
x++;  

if (x >= width/s) {
  y++;
  x = 0;
}

And now, it update until it looks like this:

Alternating Colors!

Finally, add the lines below: can you work out what they do?

  if (y >= width/s) {
     noLoop();
  }

This says we’ve come to the end of our program, so we don’t need to call draw() again.

for(int i = 0; i < max; i++) {
}

Whatever goes in the brackets gets repeated max number of times.

We can use this do draw a circles inside one another like this:

Repeating Circles

We can create this using the code below:

int width = 500;
int height = 500;

void setup() {
   size(500, 500);
   background(236, 0 , 128);
   noLoop();
}

void draw() {
  stroke(140, 9, 214);
  int inc = 50;
  int radius = width - inc;
  int n = radius/inc;
  int x = width/2;
  int y = width/2;

 for(int i = 0; i < n; i++) {
    if (i%2 == 0) {
      fill(255, 126, 0);
     }
     else {
       fill(238);
     }

     ellipse(x, y, radius, radius);
     radius = radius - inc;
  }
}

Let’s look at what’s happening here. We’re drawing the outermost circle first, this is because things we draw later are drawn over the top of things we drew before. So we start with the outermost circle and draw the rest of them inside it, getting progressively smaller.

We have a lot of numbers that we’re using again and again, but they all depend on the size of the applet (which is declared at the top – width and height) and the increment (inc) which is the space between each circle, so we can calculate them from that. Writing math in Processing is much the same as when you do your math homework – except you don’t need to work out the answer yourself!

The initial radius is the width less that space. The number of times we’ll repeat the loop (n) is the number of times we can reduce the radius by inc and still have a circle to draw. x and y are the centre point of the applet.

For each iteration of the loop, we calculate the color (as we did before), draw the circle, and reduce the radius for the next iteration.

Make a new applet with a plain background. Our setup() method will be the same as usual, and we’ll want the variables for width, height, and a third one – a radius. Make sure there’s no noLoop() – that will prevent the applet from working the way we want it to.

Create the draw method() too, but don’t put anything between the { and }.

Now, we’ll make a third method, which tells the applet that we’re going to do something when the user clicks.

void mouseClicked() {
  stroke(238);
  fill(255, 126, 0);

  ellipse(mouseX, mouseY, radius, radius);
}

Easy, right? You can make something else happen if you like. Notice how we never declared mouseX and mouseY? Processing takes care of that for us. They hold the current X and Y position of the mouse, respectively.

Responding to mouse clicks

int width = 500;
int height = 500;
int x;
int y;
int size = 20;

void setup() {
   size(500, 500);
   background(236, 0 , 128);
   x = width/2;
   y = height/2;
   stroke(255, 126, 0);
   fill(238);
   rect(x, y, size, size);
}

void draw() {

}

void keyPressed() {
   if (key == CODED) {
     if (keyCode == UP) {
       y = y - size;
     }
     else if (keyCode == DOWN) {
       y = y + size;
     }
     else if (keyCode == RIGHT) {
        x = x + size;
     }
     else if (keyCode == LEFT) {
        x = x - size;
     }

     background(236, 0 , 128);
     stroke(255, 126, 0);
     fill(238);
     rect(x, y, size, size);
   }
}

So, what are we doing here? In order to respond to keyboard input we have to have a method keyPressed().

if (key == CODED) determines whether it’s a special key – up, down, left, right, shift, alt and control. We update our x and y variables, declared at the top, accordingly and redraw our square. Thus, our square moves about in response to what we’re doing on the keyboard. (Full detail).

Each time, we call background() again, what happens if you remove that line?

Responding to keyboard input

There’s a potential problem here though, can you spot it? If we go too far left, right, up or down our square can leave the screen. Can you fix that?

We do this using arrays. Here, we’ll use two arrays to create a scrolling background effect.

We declare an array like this:

int[] name = new int[size];

Here, the “int” means we’re storing a whole number, and the “[]” mean it’s an array of them. “size” is how many we want to store.

We’re also going to introduce two other things here. The first is the comment. Comments are like notes we write for ourselves, Processing ignores them. Comments start with “//”.

The second is making random numbers. This is easy,

int randnum = (int) random(max);

Here, the “(int)” means we want a whole number back. The “max” in the brackets says we want all the numbers returned to be less than that value.

Here’s the whole program, with comments.

int width = 500;
int height = 500;
int n = 200; // number of items
int diff = 2; // how much the points should move

int[] pts_x;
int[] pts_y;

void setup() {
   size(500,500);

   // create the two arrays
   pts_x = new int[n];
   pts_y = new int[n];

   // fill them with random numbers
   for(int i = 0; i < n; i++) {
      pts_x[i] = (int) random(width);
      pts_y[i] = (int) random(height);
   }
}

void draw() {
   background(64);
   stroke(238);

   for(int i = 0; i < n; i++) {
      point(pts_x[i], pts_y[i]);

      // move each point down the screen
      pts_y[i] = pts_y[i] + diff;

      // when one leaves the screen, make a new ptsdop
      if (pts_y[i] > height) {
        pts_y[i] = 0;
        pts_x[i] = (int) random(width);
     }
   }
}

What does it look like? What if we have more (or fewer) points? What if the difference is bigger, or smaller?

Moving Background

Experiment! Can you make the points change color too?