Learn creative coding writing simple programs

93. Draggable circle with tweening

In this episode we discover how we can tween properties. Tweening means slowly transforming a certain property of an object, for example the color, the size, the border color or the border width.
In the previous episode we changed the border of a circle depending on the mouse position. But all the changes were on/off type. Either there was border or there wasn't. Either the border was thin or thick.
To be able to tween properties we need variables where we store the current value of the property and the desired value of that property. Then, step by step, we change the current value to approach the desired value. We use lerp() to slowly change the property.

Tags: tween, 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); } ```