What is Clutter?
A toolkit/scenegraph/canvas library rendering via OpenGL/OpenGL ES.
Depends on GObject, GLib, GDKPixbuf and Pango.
For creation of fast, animated, visually bespoke and impressive graphical interfaces.
Raw but flexible API
Not a general OpenGL interface - `2D with 3D effects'
Written in C, LGPL Licensed, 0.3.1 recently released.
Influences: Macromedia Director, Java 3D, processing, GTK+.
Why Clutter?
Bling without pain of OpenGL API and Maths knowledge.
Simple OO GTK+ like API with window and event abstractions.
3D desktop hardware commodity, 3D Embedded hardware getting more and more popular.
Experimentation!
Where to use Clutter?
Media boxes (obviously) - i.e Microsoft Media Center, Apple's Front Row.
Desktop aplication effects (e.g Coverflow in iTunes, slideshow in picture viewer).
Embedded: Zune, iPhone, other fixed size UIs.
Not Quake, not spreadsheets.
General concepts
Visual elements are know as 'Actors' (Widgets).
Actors are added to the Stage (Window).
Actors have parents and can have children.
Actors are manipulated directly, via events and animations.
Actors
All can be tranformed in various ways:
- Positioned in 3D space (via pixels or ClutterUnits),
- Rotated around 3 Axis,
- Sized
- Scaled,
- Have opacity set,
- Clipped.
Transforms also apply to children.
Position relative to parent.
Simple Actor Example.
#include <clutter/clutter.h>
int
main (int argc, char *argv[])
{
ClutterActor *stage, *actor;
GdkPixbuf *pixbuf;
clutter_init (&argc, &argv);
stage = clutter_stage_get_default ();
pixbuf = gdk_pixbuf_new_from_file ("superoh.png", NULL);
actor = clutter_texture_new_from_pixbuf (pixbuf);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), actor);
clutter_actor_set_position (actor, 100, 100);
clutter_actor_rotate_z (actor, 180.0,
clutter_actor_get_width (actor)/2,
clutter_actor_get_height (actor)/2);
clutter_actor_show_all (stage);
clutter_main();
return 0;
}
Simple Actor Example II.
pixbuf = gdk_pixbuf_new_from_file ("redhand.png", NULL);
group = clutter_group_new ();
actor1 = clutter_texture_new_from_pixbuf (pixbuf);
actor2 = clutter_texture_new_from_pixbuf (pixbuf);
clutter_container_add (CLUTTER_CONTAINER (group), actor1 ,actor2, NULL);
clutter_actor_set_position (actor1, 0, 0);
clutter_actor_set_position (actor2, 200, 0);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), group);
clutter_actor_set_position (group, 100, 100);
clutter_actor_rotate_z (group, 45.0,
clutter_actor_get_width (group)/2,
clutter_actor_get_height (group)/2);
clutter_actor_show_all (group);
clutter_actor_show_all (stage);
clutter_main();
Included Actors
ClutterTexture, ClutterAnimationTexture, ClutterCloneTexture
ClutterRectangle
ClutterLabel
ClutterEntry
ClutterContainer, ClutterStage, ClutterGroup, ClutterVBox, ClutterHBox
ClutterCairo, ClutterGstVideo (Via Add ons)
Easy to subclass and make your own.
Events
Simple processed input events (keyboard, mouse)
All signals from stage
clutter_stage_actor_at_pos()
Reasoning: performance, focus model.
Plans to improve RSN
ClutterTimelines
Basis of animations.
Specify number of frames and frames per second.
Callback on a new frame.
Skips 'dropped' frames.
Delay, Stop, start, pause, loop, etc.
Timeline Example
void
on_new_frame (ClutterTimeline *timeline,
gint frame_num,
gpointer data)
{
ClutterActor *actor = CLUTTER_ACTOR(data);
clutter_actor_rotate_z (actor, (gdouble)frame_num,
clutter_actor_get_width (actor)/2,
clutter_actor_get_height (actor)/2);
}
int
main (int argc, char *argv[])
{
ClutterTimeline *timeline;
...
timeline = clutter_timeline_new (360, 60); /* num frames, fps */
g_object_set(timeline, "loop", TRUE, NULL); /* have it loop */
/* fire a callback for frame change */
g_signal_connect (timeline, "new-frame", G_CALLBACK (on_new_frame), actor);
clutter_timeline_start (timeline);
...
}
ClutterAlphas
A *function* of time - not pixel alpha!.
Takes a timeline as parameter and a function.
Produces a value between 0 and CLUTTER_ALPHA_MAX.
Various prebuilt functions included: ramps, sinewaves, smoothstep, exponential etc.
ClutterBehaviours
Manipulates actors properties in various ways driven by Alphas.
Makes complex animations easy.
Opacity. Rotation. Depth. Paths. BSplines Paths. Ellipse Paths.
Mix. Stack. Easy to roll your own.
Behaviour example
timeline = clutter_timeline_new (100, 26); /* num frames, fps */
/* Set an alpha func to power behaviour */
alpha = clutter_alpha_new_full (timeline,
CLUTTER_ALPHA_SINE,
NULL, NULL);
behave = clutter_behaviour_ellipse_new (alpha,
200, /* center x */
200, /* center y */
400, /* width */
300, /* height */
0.0, /* angle begin */
360.0, /* angle end */
0.0 /* tilt */ );
clutter_behaviour_apply (behave, actor);
/* start the timeline and thus the animations */
clutter_timeline_start (timeline);
ClutterEffects
'One shot' effects
Utility wrapper around timelines+alphas+behaviours
More limited, but easy
ClutterEffectTemplate *template
effect_template
= clutter_effect_template_new (clutter_timeline_new (60, 60),
CLUTTER_ALPHA_RAMP_INC);
clutter_effect_scale (effect_template,
actor,
1.0,
4.0,
CLUTTER_GRAVITY_CENTER,
on_completion_callback,
on_completion_callback_data);
Other
ClutterMedia
- Interface providing media playback (clutter-gst implements)
Add Ons
ClutterCairo - A Cairo Canvas Actor.
ClutterGst - ClutterMedia implementation for audio / video playback.
ClutterGTK - Simple GTK Clutter canvas widget.
ClutterCairo
A Cairo Canvas Actor, 2 API calls;
actor = clutter_cairo_new (width, height);
cr = clutter_cairo_create (CLUTTER_CAIRO(actor));
... cairo rendering calls ...
cairo_destroy (cr);
Not accelerated (yet)
ClutterGst
Video Texture Actor - simple video file playback.
Clutter Texture Sink - for custom pipelines.
Simple audio playback also.
ClutterGTK
GTK Clutter Canvas widget
Allows Clutter to be embedded into GTK apps.
Demos
https://svn.o-hand.com/repos/clutter/trunk/toys
Internals
All fixed point math (fixed and float API entry points).
ClutterUnits.
Timeline Pool.
Custom Pango renderer - efficient text rendering
(based on Marc Lehmann's Pango GL renderer).
Backends
Clutter Backend essentially abstracted into 2 parts:
- Windowing system interface (GLX, EGL, SDL),
- Graphics rendering interface (OpenGL / OpenGL ES 1.1).
'Cogl' layer abstracts over regular GL and GL ES.
Features allows easy runtime detection of missing features
(eg YUV textures, texture reads).
Bindings
Perl, Python, Mono.
stage = clutter.stage_get_default()
stage.set_size(800,600)
rect = clutter.Rectangle()
rect.set_position (100, 100)
rect.set_size(10, 10)
stage.add(rect)
stage.show_all()
clutter.main()
Plea for help in maintaining.
Future plans
Interface definition files.
More ClutterUnits.
Multipoint events.
Shaders.
GTK Offscreen.
Glitz / GtkGlExt backend.
ClutterModel.
Endless ideas see TODO in clutter tarball
Thanks for listening
Q&A
More info; http://clutter-project.org