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

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
 To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```