Processing Tutorial – Mouse Interaction

Today I undertook a tutorial from to familiarise myself with the function of using the mouse to interact with a sketch, something that was touched upon during the workshop I had last week.

Jade Lauran DesignI first created the setup block, something that has become quite familiar to me during the workshops as it is needed in order to start producing anything in Processing. In this I defined the size of the canvas, the frame rate at which I want the frames to be updated and the background colour that I want the canvas to hold. Next up was adding the block of code that will actually draw the sketch onto the canvas ‘void draw’. I turned off the stroke from the shapes and added a colour fill using RGB codes. I then drew a circle, which is to be drawn at the current mouse position using ‘mouseX’ and ‘mouseY’. Jade Lauran Design



After making sure I had got that working smoothly, I moved on to the next stage which was to use ‘pmouse’ to determine the location of the mouse in the previous frame. I am going to do that for pmouseX and pmouseY so that ‘mouseX’ is going to draw the blue dot and then the next part will put a gray dot on top of it, if that is as an old position. I then added a line to connect the two locations together. To finish, I added a ‘mousePressed’ function so that when the canvas gets too full, the mouse can be clicked to erase what is currently on it.

Jade Lauran Design
Jade Lauran Design




After completing those first few steps its clear to see that it only takes a small amount of knowledge of the Processing language to be able to create something that someone can fully interact with. It has also showed that with only a few small adjustments to the code, I will be able control it using hand gestures through a camera, which I have to achieve for my current university brief.


– Poulson, B. Basic Setup from the Course Interactive Data Visualisation with Prosessing. Available at:  [Accessed On: 17 October 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s