Animatron Player API
Modern JavaScript HTML5 Engine Flow in Details

Anton shaman.sir Kotenko
Animatron, June 2013
Place to go

http://animatron.com/player
Docs
Sandbox
Games
Files
player.js

internals

builder.js

API

*.module.js

Extending API

*.import.js

Import scenes
Files
player.js
builder.js

var pl = createPlayer('...');
var scene = new anm.Scene();
var oval = new anm.Element('oval', ...
Flow
Scene consists of Elements

A

B
...actually, internally structured

A
w

A A

B
X
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

b('my-star').star(5)

text
b('a-letter').text('A');

b('fish').path('...');

sprit...
Elements may have children

A
w

A A

i

BX
Elements may have children
b('parent').sprite(...).add(b('child').star(5))

A
w

A A

i

BX
...even while not being something for themselves
b('parent').add(b('child').star(5))

w

A A

i

BX
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
Modify
f(t) →
f(t) →
f(t) →

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

visuals
Painters
← f(ctx)
← f(ctx)
← f(ctx)
visuals

state

Painters

Modifiers
f(t) →
f(t) →
f(t) →

← f(ctx)
← f(ctx)
← f(ctx)

Time
band
visuals

state

Painters

Modifiers
f(t) →
f(t) →
f(t) →

← f(ctx)
← f(ctx)
← f(ctx)

Time
band
visuals

state

Painters

Modifiers
tweens →
events →
f(t) →

← f(ctx)
← morphs

← f(ctx, t)

Time
band
visuals

state

Painters

Modifiers
tweens →
events →
f(t) →

← f(ctx)
← morphs

← f(ctx, t)

Time
δ

δ

δ
δ
band
Browser
...
Animatron Player
Animatron Player

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

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

3

3
Options
createPlayer('canvas-id', { 'mode': C.M_VIDEO,
// C.M_PREVIEW (no controls) or C.M_DYNAMIC (for games)
'zoom': 1.0...
Import and Export
createPlayer('canvas-id').load(my_scene, new AnimatronImporter());

new AnimatronExporter().create(sourc...
Embedding
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...
Supports
</> • Еmbedding

• Time bands

x,y

• Static modification

• Repeat modes

• Structures of any deep

• Events

• M...
Overview
Construction
• b() — unnamed empty element
'name'

• b('name') — empty element with a name
• b(this.$) — from low-level el...
Shapes
• b().rect([30, 30], [53, 53]).fill('#00f') — square | rectangle
• b().oval([30, 30], [53, 53]).fill('#00f') — circ...
Shapes
• b().rect([30, 30], 53).fill('#00f') — square | rectangle
• b().oval([30, 30], 53).fill('#00f') — circle | oval
• ...
Base state change (NYI)

• b()...pos([30, 30]) — move
• b()...angle(Math.PI / 3) — rotate
• b()...size([2, 7], [2, 1.5]) —...
Bands & Repeat Modes
• b().band([2, 10]) — lives from 0s to 10s of parent time
• b().band([2, 10]).once() — the same
• b()...
Tweens
• b()...trans([2, 7], [[5, 5], [10, 10]) — translate
• b()...transP([2, 7], [...pts...]) — translate by path
• b()....
Tweens
• b()...trans([2, 7], [[5, 5], [10, 10]) — translate
• b()...transP([2, 7], [...pts...]) — translate by path
• b()....
Relative Tweens
• b()...rtrans([0.18, 0.6], [[5, 5], [10, 10]) — translate
• b()...rtransP([0.18, 0.6], [...pts...]) — tra...
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])
2π
π

0

0

2

π /
2

3

5

7
Relative Composite Tweens (NYI)

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

0

0

0...
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...
Modifiers & Painters
• b().modify(function(t) { this.x = y / t; }) — normal modifier
• b().modify([6, 7], function(t) { this...
Events
• b().on(C.M_CLICK, function(evt, t) { this.x = evt.x; })
• b().on_click(function(evt, t) { this.x = evt.x; })
• .....
Timing
5

• b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time

.3

• b().on(C.M_CLICK, function(evt, t) {...
Sprites
• b().sprite([30, 30], 'my_sprite.png', [40, 40], ...) — create sprite
and define frames / frames names
• b().switc...
Composition & Masks
• b().acomp(C.C_SRC_OVER) — Source over
• b().acomp(C.C_SRC_IN) — Source in
• b().acomp(C.C_DST_ATOP) ...
Other
• b().enable() — enable
• b().disable() — disable element
• b().show() — (NYI) show element
• b().hide() — (NYI) hid...
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!
Upcoming SlideShare
Loading in...5
×

[Ultracode Munich #4] Demo on Animatron by Anton Kotenko

456

Published on

Animatron is an engine for a web animation tool written in Java/GWT. Presentation took place at Wayra Munich during the Ultracode Munich meetup: http://www.meetup.com/Ultracode-Munich

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
456
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[Ultracode Munich #4] Demo on Animatron by Anton Kotenko

  1. 1. Animatron Player API Modern JavaScript HTML5 Engine Flow in Details Anton shaman.sir Kotenko Animatron, June 2013
  2. 2. Place to go http://animatron.com/player
  3. 3. Docs
  4. 4. Sandbox
  5. 5. Games
  6. 6. Files player.js internals builder.js API *.module.js Extending API *.import.js Import scenes
  7. 7. Files player.js builder.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(); *.module.js b(this.$).collides(...) *.import.js createPlayer('...').load(project, new AnimatronImporter());
  8. 8. Flow
  9. 9. Scene consists of Elements A B
  10. 10. ...actually, internally structured A w A A B X
  11. 11. Everything is an Element A shape path text image
  12. 12. Everything is an Element A shape path text even sprite
  13. 13. Everything is an Element A shape path b('my-star').star(5) text b('a-letter').text('A'); b('fish').path('...'); sprite b('alien').sprite('...');
  14. 14. Elements may have children A w A A i BX
  15. 15. Elements may have children b('parent').sprite(...).add(b('child').star(5)) A w A A i BX
  16. 16. ...even while not being something for themselves b('parent').add(b('child').star(5)) w A A i BX
  17. 17. Which way a single element is rendered?
  18. 18. It stores transformations (state)
  19. 19. It stores transformations (state) ...and a brush (visuals) A
  20. 20. It stores transformations (state) ...and a brush (visuals)
  21. 21. state visuals
  22. 22. state Modify f(t) → f(t) → f(t) → visuals Paint ← f(ctx) ← f(ctx) ← f(ctx)
  23. 23. state Modifiers f(t) → f(t) → f(t) → visuals Painters ← f(ctx) ← f(ctx) ← f(ctx)
  24. 24. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  25. 25. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  26. 26. visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time band
  27. 27. visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time δ δ δ δ band Browser δ time between calls is unpredictable, though has delta
  28. 28. Animatron Player
  29. 29. Animatron Player createPlayer('canvas-id').load(my_scene).play();
  30. 30. Animatron Player createPlayer('canvas-id').load(my_scene).play(3); 3 3
  31. 31. Options 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, 10 'bgfill': { color: '#fff' }, 'duration': 10 } } ).load(my_scene); ⚙
  32. 32. Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI)
  33. 33. Embedding 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 Any of the parameters is optional, here is a definition for each one • 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. • 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. • z is zoom of the scene, may be a float value <iframe/>
  34. 34. Supports </> • Еmbedding • Time bands x,y • Static modification • Repeat modes • Structures of any deep • Events • Masks α 5 ! • Tweens and Easings • Live changes • Simple collisions • Jumping in time 9:17 • Band-restricted modifiers • Sprites 0.3:1 • Relative modifiers
  35. 35. Overview
  36. 36. Construction • b() — unnamed empty element 'name' • 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)
  37. 37. 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 A • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', [53, 53]) — sprite
  38. 38. 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 A • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', 53) — sprite
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
  45. 45. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
  46. 46. Composite Tweens (NYI) b()...rotate([2, 3, 5, 7], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 2π π 0 0 2 π / 2 3 5 7
  47. 47. Relative Composite Tweens (NYI) b()...rrotate([0.3, 0.5, 0.6, 1], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 2π π 0 0 0.3 π / 2 0.5 0.6 1
  48. 48. 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
  49. 49. 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 10 f(t) • b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter
  50. 50. 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 A • NYI: touchstart, touchend, touchmove... on()
  51. 51. Timing 5 • b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time .3 • b().on(C.M_CLICK, function(evt, t) { this.rt = 0.3; }) — jump to relative time jump .jump • 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. Everything with the help of modifiers and painters
  56. 56. May be head to the docs now?)
  57. 57. ...or Sandbox?
  58. 58. Version 1.0 is coming soon
  59. 59. Thank you!
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×