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
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