Getting started with processing

Getting started with processing


So the first two most important things I learnt was that you need to include and understand void setup and void draw.


Void setup

Allows you to setup your canvas size that you will be processing you art into. This will only run once.


Void Draw

Void draw is more complicated:

It is a “keyword used to indicate that a function returns no value. Each function must either return a value of a specific datatype or use the keyword void to specify it returns nothing.” – (Fry and Reas, 2014)

“This function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly.” – (Fry and Reas, 2014)

“It should always be controlled with noLoop(), redraw() and loop(). If noLoop() is used to stop the code in draw() from executing, then redraw() will cause the code inside draw() to be executed a single time, and loop() will cause the code inside draw() to resume executing continuously.” – (Fry and Reas, 2014)

Screen Shot 2014-11-27 at 16.45.56


In this picture above you can see that the size of the canvas has been set to 800(width) x 800(height) ,rectMode has been used to define what type of start point the rectangle should have for example this is set at centre.

Following on from this a rectangle the size of 400px (width) x 400px (height) will be drawn at half the width and half the height of the canvas.


Screen Shot 2014-11-27 at 17.09.13

Now the co-ordinates of where to draw the rectangle have changed to mouseX and mouseY this means that rectangles of size 100px (width) x 100px (height) will be drawn where the cursor of the mouse is in relation to both the x and y axis.

Screen Shot 2014-11-27 at 17.10.01


Screen Shot 2014-11-27 at 17.10.26

Using fill I have set the colours inside the rectangles there is three different amounts because it is an RGB colour model on the scale of 0 to 255 but as they are set to random it will randomly vary the colours inside the shape.

Screen Shot 2014-11-27 at 17.44.50  Screen Shot 2014-11-27 at 18.04.03

Then stroke has been used to outline the shape with a colour in this case its red.

Screen Shot 2014-11-28 at 12.35.53  Screen Shot 2014-11-28 at 12.37.19

Then I have used a function called mousePressed to change the colours of the fill all the time the mouse is pressed down.
Screen Shot 2014-11-28 at 13.37.01

Screen Shot 2014-11-28 at 13.37.27

Screen Shot 2014-11-28 at 13.37.33

Screen Shot 2014-11-28 at 13.38.00 Now I have made some changes to my code and using an integer called pos I have created a rectangle that gets wider as it travels in a positive direction across the canvas. In this sketch I have introduced conditionals such as if statements for example if.

Integers Floats.

“Integers and floats are two different kinds of numerical data. An integer (more commonly called an int) is a number without a decimal point. A float is a floating-point number, which means it is a number that has a decimal place. Floats are used when more precision is needed.” (Fry and Reas, 2014)

I will be using conditionals more in my up and coming blog posts so stay tuned.




draw() \ Language (API) \ Processing 2+

In-text: (Fry and Reas, 2014)

Bibliography: Fry, B. and Reas, C. (2014). draw() \ Language (API) \ Processing 2+. [online] Available at: [Accessed 1 Nov. 2014].


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s