Modern JavaScript HTML5 Engine Flow in Details Animatron Player API Anton shaman.sir Kotenko Animatron, June 2013 

Place to go http://animatron.com/player 

Docs 

Sandbox 

Games 

Files player.js builder.js *.module.js *.import.js internals API Extending API Import scenes 

Files player.js builder.js *.module.js *.import.js var pl = createPlayer('...'); var scene = new anm.Scene(); var oval = new anm.Element('oval', null, function(ctx) { ... }); scene.add(oval); player.load(scene).play(); createPlayer('...').load( b('oval').oval(...) ).play(); b(this.$).collides(...) createPlayer('...').load(project, new AnimatronImporter()); 

Flow 

Scene consists of Elements A B 

...actually, internally structured A B X A A w 

Everything is an Element A shape path text image 

Everything is an Element A shape path text even sprite 

Everything is an Element A shape path text sprite b('my-star').star(5) b('fish').path('...'); b('a-letter').text('A'); b('alien').sprite('...'); 

Elements may have children A B X i A A w 

Elements may have children A B X i A A w b('parent').sprite(...).add(b('child').star(5)) 

...even while not being something for themselves B X i A A w b('parent').add(b('child').star(5)) 

Which way a single element is rendered? 

It stores transformations (state) 

It stores transformations (state) ...and a brush (visuals) A 

It stores transformations (state) ...and a brush (visuals) 

state visuals 

state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Paint Modify 

state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers 

state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers Time band 

state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers Time band 

state visuals tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Painters Modifiers Time band 

state visuals tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Painters Modifiers Time band Browser time between calls is unpredictable, though has delta δ δ δ δ δ 

Animatron Player 

Animatron Player createPlayer('canvas-id').load(my_scene).play(); 

Animatron Player createPlayer('canvas-id').load(my_scene).play(3); 3 3 

createPlayer('canvas-id', { 'mode': C.M_VIDEO, // C.M_PREVIEW (no controls) or C.M_DYNAMIC (for games) 'zoom': 1.0, 'repeat': false, 'bgcolor': '#ffffff', 'anim': { 'width': 400, 'height': 250, 'bgfill': { color: '#fff' }, 'duration': 10 } } ).load(my_scene); Options ⚙ 10 

Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI) 

Embedding • w and h — forced width and forced height of the player. Will add black ribbons if scene ratio will be different. • bg — the background color of the player in format of ff00a6; Default is transparent. Appears below the scene background. • m — mode of the player, PREVIEW (no controls, no handling mouse/kb) is 0, DYNAMIC (no controls, handling mouse/kb) is 4, VIDEO (controls are shown, no mouse/kb handling, default) is 11. • r — repeating mode, 1 is to repeat (loop), 0 (default) — play once. • z is zoom of the scene, may be a float value • t is time to start play from when scene is loaded. t=370 means "play from 3s 700ms" • p is time to pause at when scene is loaded. p=370 means "pause at 3s 700ms" • debug flag (0 or 1, off by default) allows to turn on debug information such as FPS and exact time. Any of the parameters is optional, here is a definition for each one http://player.animatron.com/go/3f68b131-8a6a-4e0f-82f8-99a2576ab9d9? w=600&h=500&bg=f0fff0&m=0&r=0&z=1&t=25&p=37&debug=0 ⚙ 

Supports • Еmbedding • Static modification • Structures of any deep • Masks • Tweens and Easings • Jumping in time • Sprites • Time bands • Repeat modes • Events • Live changes • Simple collisions • Band-restricted modifiers • Relative modifiers α 5 0.3:1 9:17 ! x,y 

Overview 

Construction • b() — unnamed empty element • b('name') — empty element with a name • b(this.$) — from low-level element • b(b()) — find in cache & return • b().add(b()) — add child (even live) • b().remove(child) — remove child (even live) 'name' 

A Shapes • b().rect([30, 30], [53, 53]).fill('#00f') — square | rectangle • b().oval([30, 30], [53, 53]).fill('#00f') — circle | oval • b().path([30, 30], 'M0 0...').stroke('#000').nofill() — path • b().image([30, 30], '/....jpg') — image • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', [53, 53]) — sprite 

A Shapes • b().rect([30, 30], 53).fill('#00f') — square | rectangle • b().oval([30, 30], 53).fill('#00f') — circle | oval • b().path([30, 30], B.path([...])).stroke('#000').nofill() — path • b().image([30, 30], '/....svg') — image • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', 53) — sprite 

Base state change (NYI) • b()...pos([30, 30]) — move • b()...angle(Math.PI / 3) — rotate • b()...size([2, 7], [2, 1.5]) — scale • b()...opacity(0.8) — change opacity 

Bands & Repeat Modes • b().band([2, 10]) — lives from 0s to 10s of parent time • b().band([2, 10]).once() — the same • b().band([2, 10]).stay() — keep last state inst. of disappearing • b().band([2, 10]).loop() — loop during life of a parent • b().band([2, 10]).bounce() — bounce during life of a parent 

Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.8]) — alpha 

Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.6]) — alpha 

Relative Tweens • b()...rtrans([0.18, 0.6], [[5, 5], [10, 10]) — translate • b()...rtransP([0.18, 0.6], [...pts...]) — translate by path • b()...rrotate([0.18, 0.6], [0, Math.PI * 2]) — rotate • b()...rrotateP([0.18, 0.6], [...pts...]) — rotate to path • b()...rscale([0.18, 0.6], [[2, 2], [0.5, 0.3]) — scale • b()...rxscale([0.18, 0.6], [2, .5]) — equally scale • b()...ralpha([0.18, 0.6], [0, 0.6]) — alpha 

Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1]) 

Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1]) 

Composite Tweens (NYI) b()...rotate([2, 3, 5, 7], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 0 π / 2 π 2π 0 2 5 7 3 

Relative Composite Tweens (NYI) b()...rrotate([0.3, 0.5, 0.6, 1], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 0 π / 2 π 2π 0 0.3 0.6 1 0.5 

Easings • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_IN) — predefined IN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_OUT) — predefined OUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_INOUT) — predefined INOUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_CIN) — predefined CIN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_COUT) — predefined COUT • ... • b()...trans([2, 2], [[5, 5], [10, 10]], [...pts...]) — path-based easing • b()...trans([2, 2], [[5, 5], [10, 10]], function(t) { return 1 - t; }) — custom 

Modifiers & Painters • b().modify(function(t) { this.x = y / t; }) — normal modifier • b().modify([6, 7], function(t) { this.x = y / t; }) — band-restricted modifier • b().rmodify([0.25, 0.9], function(t) { this.x = y / t; }) — relative band-restricted modifier • b().modify(5, function(t) { this.x = y / t; }) — trigger-modifier (NYI) • b().rmodify(0.3, function(t) { this.x = y / t; }) — relative trigger-modifier (NYI) • b().modify(function(t) { this.x = y / t; }, C.E_IN) — modifier with easing • b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter 10 f(t) 

Events • b().on(C.M_CLICK, function(evt, t) { this.x = evt.x; }) • b().on_click(function(evt, t) { this.x = evt.x; }) • ...double-click, mouseover, mouseout, mousemove, mouseup, mousedown, keydown, keypress, keyup, draw • NYI: touchstart, touchend, touchmove... on() A 

Timing • b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time • b().on(C.M_CLICK, function(evt, t) { this.rt = 0.3; }) — jump to relative time • b().key(5, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — jump by key • b().rkey(0.2, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — (NIY) relative • b().time(C.E_QIN) — predefined time easing • b().time(function(t) { return t / 2; }) — time easing • b().rtime(function(t) { return 1 - t; }) — relative time easing (NYI) t 5 .3 jump .jump 

Sprites • b().sprite([30, 30], 'my_sprite.png', [40, 40], ...) — create sprite and define frames / frames names • b().switch(['jump', 'walk'], 10) — switch to given frames and FPS, waiting for run() call • b().run(7) — animate stored frames starting from given time • b().animate(7, ['jump', 'walk'], 10) — animate frames starting from given time with given FPS 

Composition & Masks • b().acomp(C.C_SRC_OVER) — Source over • b().acomp(C.C_SRC_IN) — Source in • b().acomp(C.C_DST_ATOP) — Destination atop • b().acomp(C.C_LIGHTER) — Lighter • ... • b().mask(b()) — Use element as a mask SRC_IN 

Other • b().enable() — enable • b().disable() — disable element • b().show() — (NYI) show element • b().hide() — (NYI) hide element • b().each(function(elm) { ... }) — iterate over direct children • b().deach() — iterate deeply over sub*-children • b().take(b()) — copy another element • b().use(b()) — clone another element • B.grad(...), B.path(...), B.sheet(...), B.easing(...) ... — helpers for you to make things 

Everything with the help of modifiers and painters 

May be head to the docs now?) 

...or Sandbox? 

Version 1.0 is coming soon 

Thank you! 

my homesite http://shamansir.github.io Player Home http://animatron.com/player/ GitHub http://github.com/Animatron/player Slides https://speakerdeck.com/shamansir/ animatron-player-api-in-details-v2