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.
Code editor
background
color
colorMode
cursor
dist
draw
ellipse
else
fill
if
int
mousePressed
mouseX
mouseY
noStroke
random
setup
size
smooth
stroke
strokeWeight
void
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); } ```