Interactivity

One of the funnest parts of Processing is that its great for creating interactive environments. This is especially useful when building out design or engineering tools that allows someone to explore or understand a simulation or a model. This text will go through some quick and simple ways to make more fun and interactive environments.

Drawing

Possible the most common method for interactivity especially in design is drawing. Lets look at using the mousePressed to create a drawing tool.

def setup():
    size(640, 360)
    background(102)
def draw():
    stroke(255)
    if mousePressed == True:
        line(mouseX, mouseY, pmouseX, pmouseY)

Challenge:

• Change the background color — hint the path of the line must be stored in array because the changed background color must be continually drawn and changed in the draw loop. If you need more help use this tutorial for making layers.
• Create other interactivity by using other key presses. For more details look into the Processing Python Reference.

GUI

Buttons — the following script allows you to create some simple buttons that change the background color using a shape.
Handles
Rollover
Scrollbar

Animations

Sprites — A sprite is a bitmap graphic that is designed to be part of a larger scene. It can either be a static image or an animated graphic which is common to 2d video games. Sprites are particularly useful to indicate movement or animation while saving computation. You can build your own sprites in Photoshop or download existing sprites from these asset libraries — Piskel, Itch.io.

Test out your own version of sprites in Processing. This simple script on Github from artist James Patterson — which allows you to cycle through a sprite which follows your cursor.

Challenge:

• Change the frame rate to speed up this animation
• Replace the sprite with your own
• Make the sprite size change towards the top of the screen

Recording Your Screen

There are a number of ways to record your screen.

• on Macs — Giphy Capture, on Macs Screen to Gif
• EZ Gif — quickly turn your screen capture into a video