Learn creative coding writing simple programs

92. Interactivity: a draggable circle

Let's focus for a while on interactivity. We have made many programs that just run, but often we could not influence much the behavior of the program. It's a good time now to learn how to create buttons we can click and objects we can move.
To get started we create this program where we can click and drag a circle to a new position. The circle reacts to our moves, and it changes slightly when we place the mouse pointer on top of it. It also changes when we click it. These changes are little gestures that tell us something without using words. It tells us we are dealing with an interactive object.
One new function we discover in this episode is called cursor(). It allows us to change the shape of the mouse pointer. This is used in web-sites: when you move the mouse pointer over something you can click, the pointer changes. Now you know how to create that effect in Processing.

Tags: cursor, interactive, circle, click, rollover, rollout, drag

Code editor

You can make changes to the code below. Then
Below you can ask and answer questions related to this video. If your question is unrelated to the video, please post it at the Processing Forum as I'm unable to help with all of your programs and still have enough free time to eat and sleep :)
comments powered by Disqus