Press escape to exit fullscreen

{{sketch.instructions}}

CC {{sketch.licenseObject.short}}

Archived Sketch

This sketch is created with an older version of Processing,
and doesn't work on browsers anymore.

View Source Code

Capture Screenshot

Bezier anim easing

{{$t('general.by')}}
Move the mouse and observe how it affects the motion of the circle. The patterns represent where the circle will spend most time. mouseX defines how much time is spent at the beginning of the animation, mouseY defines how much time is spent at the end of the animation. t (time) increases linearly, but bezierPoint() is used to create acceleration and decceleration.
We recovered an unsaved version of this sketch. Please review your changes below.

As a Plus+ Member feature, this source code is hidden by the owner.

  • {{co.title}}
    {{$t('sketch.mode-pjs')}} {{$t('general.learnMore')}}
    Select mode or a template
    {{liveCodeLink}}
    • {{l.url.substr(l.url.lastIndexOf('/') + 1)}}
    {{$t('sketch.layoutDescription')}}

    {{k.category}}
    {{k.label}}
    {{k.description}}

    {{$t('sketch.seeMoreShortcuts')}}

    Versions are only kept for 7 days.
    Join Plus+ to keep versions indefinitely!

    {{$t('general.joinPlus')}}


    {{$t('sketch.versionsSummarized')}}