Processing – Creating my 1st programme

As the two hour seminar followed through, I managed to get a good grasp on how the language worked. Below is a simple program I made in an hour.


To begin, I used the void setup to start the program with a background colour of green using the RGB values and setting the canvas size using the size function.

Using the draw method I was able create an ellipse shape, but it was important to call the fill function first as it needed a colour. As you can see in the ellipse brackets, there are four values, the first two are to do with the position of the shape; the last two is the scale of the shape. From doing a bit of research on the processing website ( I was able to make the ellipse follow the movement of the mouse using the mouseX and mouseY methods.

From there I created a new block of code, below the ellipse functions. In this new nest of code, I used the if boolean to call a function if the mouse position was between two integer values; if the values were between these two values with the mouse clicked then the program would clear the stage of the canvas, basically resetting the background colour and the drawings of the ellipse shapes from the mouse movements. I also used the mouseClicked function to change the background in the same nest of code if the values of the mouseX was less than 200. 

Using the void clearStage function, I then begun to write code that enabled me to print a line in the console of the IDE if the clearStage function was called in the programme. I also put a new background colour in the clearStage function if it was called allowing the programme to change colour if the function was called.
IDE4Above, is an example of how the programme looked when it was running in Java. As you can see, wherever the mouse moved the ellipse moved with it. The colour of the ellipse was the fill function called within the nest of the ellipse and so forth.


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