A Brief Introduction To Processing.
Technical Blog 1.
 |
| https://processing.org/exhibition/ |
In this post we will learn about the history of Processing, before getting stuck into writing a "Hello World!" program, and doing a bit on animation.
But first of all: what is Processing?
What Is Processing?
I say that Processing is a language, but really Processing is a framework for creative coding. Processing is a highly visual language: created specifically for visual design, and it is this feature which makes Processing particularly interesting, and particularly beginner friendly to even those who have never done any programming at all.
Processing is traditionally written in "Java", although other projects such as p5.js and Processing.py allow for Processing code to be written in JavaScript and Python respectively. It is also possible to create Android apps in Processing.
A Brief History Of Processing
Processing was first invented by Ben Fry and Casey Reas in 2001 at MIT's Media Lab while the two were graduate students there. [1]
Processing was based on Java because Java Web Applets were hugely popular at the time and allowed for Processing sketches to be easily shared online. (Since Web Applets are now redundant, writing Processing code in JavaScript using p5.js is now the best way to share Processing projects.)
Since the beginnings of Processing, the Processing community has exploded and now Processing is looked after by the Processing Foundation.[2] There are also communities online such as Open Processing and the Processing Forums themselves.
As well as Ben and Casey, Daniel Shiffman (among others) has also contributed a large amount to the Processing community, writing several books and continuing to develop a large collection of video tutorials on YouTube. [3]
"Hello World!" In Processing
Firstly, you'll need to download Processing and get the IDE up and running. It should look something like this:
 |
| Processing IDE |
As I mentioned above, Processing is a highly visual language, and so a "Hello World!" program in Processing generally involves drawing a shape on the screen rather than printing a line of text to the console. For example try typing the following code into Processing and clicking the "Play" button in the top left to run the sketch:
You should see a black square on a white background:void setup() {size(400, 400);background(255);stroke(0);fill(0);rect(100, 100, 200, 200);}
Although I said we were writing Java code, you will notice that we did not create a class, or a main method, or set any access modifiers, or choose if anything was static. Processing does all this in background for us, so all we have to do is call the "setup" method
void setup() {
}
and type our code.
So what did our code actually do? Firstly, the setup method is a special in-built Processing method which is the first thing which runs when you press "Play" and start your sketch. Setup runs exactly once - which will become important a little later.
Next we specified the size of the window to be 400x400 pixels,
size(400, 400);declared the background to be white - 255 in grey-scale (the default background color is grey if you don't specify a colour) ,
background(255);and then drew our shape by specifying the stroke (outline) colour, the fill (body) colour and telling Processing which shape we want and where we want it to be:
stroke(0);fill(0);rect(100, 100, 200, 200);
Again, the colours are in grey-scale so we get black. The rect function draws a rectangle with the top left corner at (100, 100) pixels from the top left of the window (or "canvas") with a size of 200 pixels wide and 200 pixels tall.
Animating Our "Hello World!" Program
Our black square is all well and good, but it isn't very exciting, so let's spice things up a bit by making it move. Animation is what Processing was designed to do.
Type the following into Processing and run the sketch:
You should see the rectangle we had before, but now it is moving across the screen from left to right!int x = 0;void setup() {size(400, 400);}void draw() {background(255);stroke(0);fill(0);rect(x, 100, 200, 200);x++;}
We've just made use of Processing's "draw" method. This method runs after setup() has finished and loops once per frame until you close the window. The "setup draw" structure, together with the built in drawing functions, is what makes Processing what it is.
So what did we do in the above code?
Firstly, we created the global variable "x" in the usual Java way (but without worrying about access modifiers or static-ness) and initialise it at 0, this will be used to specify our rectangles x-coordinate.
Next, our setup method only needs to specify the size of the window, as everything else will be done in draw.
Now things get interesting. Inside draw, the first thing we do is set the background to white. This reset the canvas to plain white at the start of every frame - removing anything we drew in previous frames (you can try moving the background function back into setup and see what happens!).
After drawing the background, we draw a rectangle as we did before, but this time we use our global variable x instead of hard-coding a horizontal position.
rect(x, 100, 200, 200);Finally, at the end of the draw loop, we increment the x value by 1. This means that the rectangle will be drawn 1 pixel to the right during the next run through the draw loop - creating the illusion of movement.
One Final Fun Example...
To finish off for this post, I will leave you with a fun little example utilizing some more inbuilt Processing functions.
This code should draw a randomly sized, randomly coloured circle at your mouse location each frame.
Have a look at the Processing reference page and try and work out what each line of this code is doing.void setup() {size(400, 400);background(255);}void draw() {float r = random(255);float g = random(255);float b = random(255);float a = random(255);float diam = random(100);noStroke();fill(r, g, b, a);ellipse(mouseX, mouseY, diam, diam);}
In my next technical post, we will be looking at some more advanced Processing concepts as well as using Processing to visualise some interesting mathematics.
References
[1] https://processing.org/overview/
[2] https://processingfoundation.org/
[3] http://shiffman.net/
No comments:
Post a Comment