Keyed: keyframe animation for Processing

Gallery
1

Hi everyone!

I’d like to share Keyed, a keyframe animation library for Processing. Set a value at any points in time, and Keyed blends everything in between, with easing, paths, effects and events.

Showcase-small

I started the library already two-ish years ago, and finished it recently with the help of our little new assistant friend. Feedback and ideas are very welcome. Please report bugs on GitHub. I’m also planning a p5.js port in the near future.

Basic example:

import ch.domizai.keyed.*;

Keyed<Float> x;

void setup() {
    size(400, 400);
    Keyed.init(this).setDuration(2);

    x = Keyed.ofFloat()
        .key(0, 50f)
        .key(1, 350f)
        .key(2, 50f);
}

void draw() {
    background(255);
    circle(x.value(), height / 2, 40);
}

:backhand_index_pointing_right: Documentation and Tutorial

Installation

Keyed isn’t in the Library Manager yet and must be installed manually:

  • One click: download Keyed.pdex and double-click it. Processing will install it.
  • Manually: unzip Keyed.zip into Documents/Processing/libraries and restart Processing.
1 Like