Using ofxPlaylist

A Library for Dynamic Animations 

ofxPlaylist makes it easy to describe complex animations in code. It is useful, whether you want to tween values in sync or in sequence, tween stuff triggered by some user-generated event, or want to keep your update methods clean in complex projects. Think of a button that changes shape and then fades out when clicked. Or an animated character who first raises an arm and then nods its head. In the past, ofxPlaylist has animated puppets, pufferspheres and pirates. And, so I’ve been told, some people use it on iPhone projects.

Key Features 

• “Penner” Tweens (any of Robert Penner’s tweening functions (sin, quint, quart, linear, bounce etc…) easily available)
• Bézier Tweens, mirroring the functionality of Adobe After Effects temporal timeline curves.
• Pause
• Trigger Keyframes these trigger Events
• Frame-based or time-based (use integer timing parameters to use frame-based timing, float parameters for timings in ms)
• Tweens can be delayed before execution. Don’t call this ‘death row’! This is useful when you want to keep everything in sync within one playlist.
• Sequencing of Tweens or Pauses, or Events to happen step-by-step
• Grouping of Tweens or Pauses, or Events} to happen in sync
• Thread-safe as long as you don’t use ofLog() which is apparently not thread-safe.

Download 

Get the source code on github, and move it to your addons/ directory.

This includes two example projects, one of which is intended for beginners.

Example Projects 

It’s much more fun to poke around an example project and see how it all works! ofxPlaylist comes with 2 (two!) example projects. These show off some of the most useful features. Best start with a simple example. You can find it at ofxPlaylist/simpleExample.

Then move on to the advanced example. It is a massive show-off of almost everything. Think North-Korean military parade. Approach with care. If you must: ofxPlaylist/example

Use 

Look at the simple example project (which comes with the source) of how to get a basic setup running. Here’s a code snippet to show a most common use case:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// in testApp.h: 

#include "ofxPlaylist.h"

ofxPlaylist playlist1; 

// in testApp.cpp:

/* ... */

void testApp::update(){
	playlist1.update();	// this is where ofxPlaylist does its magic.
}

// ------------------------------------------------------

void testApp::mouseReleased(int x, int y, int button){
	using namespace Playlist;

	// say we want to tween the x and y values of some ofVec3f myPos

	playlist1.addKeyFrame(Action::tween(1000.f, &myPos.x, 400.f));
	// this will take 1000ms to tween myPos.x from
	// its current value to the target value 400.f

	playlist1.addKeyFrame(Action::pause(500.f));
	// will then pause 500ms

	playlist1.addKeyFrame(Action::tween(500.f, &myPos.x, 100.f));
	playlist1.addToKeyFrame(Action::tween(500.f, &myPos.y, 200.f));
	// will then take 500ms to tween myPos.x and myPos.y in sync 
	// towards 100.f and, respectively, 200.f
	// 
	// Note the use of addToKeyframe() vs. addKeyframe():
	//
	// addToKeyframe() is useful if you want to stack up Tweens,
	// so that they get executed in paralell.
}

FAQ: Is there a GUI? 

Nope (and there is none in sight). ofxPlaylist is here to create animations dynamically, when responding to user inputs.

There is, however, a yet undocumented helper header file which allows you to import AfterEffects XML timelines using a free third-party AE plug-in called “XMLGibson”. This way, you get GUI and preview from AfterEffects, and the flexibility of dynamic playlists from ofxPlaylist!

If you need a GUI and want to load, edit and save static timelines within your openFrameworks app, I recommend checking out ofxTimeline by @obviousjim et al.

FAQ: Is there a way to save Playlists? 

Kinda, you can save Playlists on the heap. But this is for more advanced use. Poke around in the source code, and look out for “savePlaylistCurrentlyInBufferToInternalMap” and friends, if you’re interested.

FAQ: How does it work? 

Glad you asked. Let’s start with the basics, and then wade step by step into the quicksand of some more complex (and gory) details:

A Playlist is a list of Actions that need to happen in sequential order. These Actions{ (of which there are three different kinds)} are grouped together in Keyframes.

All Actions within a Keyframe start at the same time and execute in parallel. A Keyframe is done, when all its Actions have finished. This Keyframe is then deleted, and the next one starts.

You can push additional Keyframes to the end of a Playlist at any time. You can also clear Playlists anytime, even from within a Keyframe Event responder triggered by a playlist itself.

Each Keyframe holds one or more Actions. These can be any of the following three:

When a Keyframe begins execution, all its Actions start in sync. But only the actions of this Keyframe will start running. The next Keyframe’s actions will sit waiting until it’s their turn.

Dependencies: 

♥ openFrameworks >= 0071

License 

ofxPlaylist is released under the MIT License.

Tagged:

tutorialcode

RSS:

Find out first about new posts by subscribing to the RSS Feed

Further Posts: