Introduction to Processing: Part 01 – Sketch & Drawing Modes
“Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is an alternative to proprietary software tools in the same domain”
Processing utilises the java language, which is a relatively efficient object-orientated programming. Java is also quite easy to learn, owing both to its syntax and the well established community of users. Processing itself is intended as a sketch pad for computational artists, programmers and designers and is highly favoured by many designers for its ease of use and well established community.
Getting Started
The first thing to do is refer to the manual, so spend some time reviewing the online reference to the Processing interface:
Processing has two modes of drawing; the first is the basic mode which is static, meaning that things will only get drawn to the screen once. The second mode is the continuous draw mode which as the term implies, means that objects are being continually drawn to the screen for as long as the program runs. This is useful as it means objects can change their properties or characteristics over time. Obvious examples of which could be their colour, size, shape or position in space.
Example 01: Basic Mode
We begin with a tutorial of static drawing. Basically, we want to draw an ellipse to the screen. First we will be using the stroke() & fill() methods native to the Processing PDE to define its appearance in terms of colour, and then using the ellipse() method we will draw the actual shape by defining its position and size. We will introduce our first variable to control the radius of the ellipse. Changing the value of this variable will change the value of the ellipse.
// Declare & assign our radius variable int myRad = 50; /*-------------------------------------------------------- Sketch Setup --------------------------------------------------------*/ void setup() { size(500,500); // set the size of the applet window to 500 x 500 pixels background(0); // set the applet background colour // Make some geometry stroke(80); // set the colour for the line using - stroke(R,G,B) or here stroke(val) line(230, 220, 285, 275); // line( pt1.x, pt1.y, pt2.x, pt2.y ) fill(150,0,0); // set the fill using - fill(R,G,B) ellipse(210, 100, myRad, myRad); // use our radius variable & create a circle }
Example 02: Continuous Mode
As mentioned, Processing has a continuous draw() mode which is simply put, an infinite time loop. Whatever you tell processing to do in the draw() loop will be executed each time-step until either you ask it to stop via a conditional statement (we will deal with this in later exercises) or you use the ’stop’ button on the Processing interface.
// Declare & assign some variables int myRad = 50; int count = 0; /*-------------------------------------------------------- Sketch Setup --------------------------------------------------------*/ void setup() { size(500,500); // set the size of the applet window to 500 x 500 pixels background(0); // set the applet background colour } /*-------------------------------------------------------- Draw Loop --------------------------------------------------------*/ void draw() { background(0); // set the applet background colour stroke(175,90); // set the colour for the line using - stroke(val,alpha) fill(175,40); // set the fill using - fill(val,alpha) println("current iteration is " + count); // simple print statement to check count is changing each iteration ellipse(20+count, height/2, myRad, myRad); // use the count the displace the X-Position of the ellipse each iteration count++; // add to the counter }
Example 03: Continuous Mode Calling a Function
A function is simply a ‘block’ of code that you call each time you wish to execute it. Functions are operations you wish to perform over and over again, thus their usage is useful to make our code more efficient. In the following example, we perform the same task as above but through calling a function.
// Declare some variables int myRad = 50; int count = 0; /*-------------------------------------------------------- Sketch Setup --------------------------------------------------------*/ void setup() { size(500,500); // set the size of the applet window to 500 x 500 pixels background(0); // set the applet background colour } /*-------------------------------------------------------- Draw Loop --------------------------------------------------------*/ void draw() { background(0); // set the applet background colour stroke(175,90); // set the colour for the line using - stroke(val,alpha) println("current iteration is " + count); // simple print statement to check count is changing each iteration makeMovingCircle(count); // call our custom function! count++; // add to the counter } /*-------------------------------------------------------- Custom Function --------------------------------------------------------*/ void makeMovingCircle(int COUNT){ ellipse(20+COUNT, height/2, myRad, myRad); // use the count to displace the centre of the ellipse each iteration }
You’re currently reading “Introduction to Processing: Part 01 – Sketch & Drawing Modes”, an entry on supermanoeuvre
- Published:
- 09.06.09 / 1am
- Category:
- Processing, Tutorials
- Tags:
Comments are closed
Comments are currently closed on this entry.