︎Back to Interactive & Experience Design

Fall 2022 ︎︎︎ SUNY Purchase ︎︎︎ (DES3090) Interactive & Experience Design

Processing Warm up #2

(you may need to refresh to see the code)


In this warm-up we’ll look at the mouse, the keyboard, images and putting things together with the CPX. We’ve not done anything interactive yet, and this warm-up we will do that.

Getting mouseY

By default, Processing gives us access to a set of 4 parameters: mouseX, mouseY, and pmouseX and pmouseY. This gives us the current mouse position and the previous ( “p”) mouse position from the previous frame. This allows to do something like this pretty easiley︎︎︎

This simply makes the ellipse “attached” to the mouse position. 

We can also use a function called mousePressed() and another called mouseReleased() to create a simple drawing application. (note that I’m using line(), which takes 4 parameters, which are x1,y1, and x2,y2)︎︎︎

mousePressed() and mouseReleased() are “listening” for these “events” to trigger. Where draw() triggers every frame, these only trigger when the mouse is pressed or released; as the names imply.

The Keys to the...Board

The keyboard works similarly except with keyPressed() and keyReleased(). Here’s a simple example that uses keyReleased() and the ‘e’ key as a way to clear the screen. Note the syntax for getting the key. Simply change what is in quotes and know that it is case sensitive.︎︎︎ 

Linking with the CPX

Now that we have access to the keyboard and mouse, we can use the CPX as a mouse or keyboard (see the HID page︎) and use the CPX to control our app. Here’s a very simple example. First load this code onto your CPX︎︎︎

Then this code into Processing︎︎︎

This allows you to use the A and B buttons to actually press the A and B keys on the keyboard. These buttons change the background in our processing window.


Presumably, you’d like to do something with images you create outside of P5. To do this you need to make sure to use the “Sketch/Add File...” dialog as it creates a folder called “data” in our project. The image will go there. To load an image we just need to create a variable to hold it, and then use image() to call it. It expects the variable we created and then a position.︎︎︎

Saving the screen

You may also want to save the things you draw. To do that we just need the function saveFrame(), adding the octothorpes will give each file a unique name︎︎︎

Your homework is to create a custom drawing application that is unique to you in some way. Extra credit if it uses the CPX as an input device.

︎Back to Interactive & Experience Design