SlideShare une entreprise Scribd logo
1  sur  59
Télécharger pour lire hors ligne
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', 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());
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('...');

sprite
b('alien').sprite('...');
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

δ
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
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);

⚙
Import and Export
createPlayer('canvas-id').load(my_scene, new AnimatronImporter());

new AnimatronExporter().create(source_scene) (NYI)
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/>
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
Overview
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)
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
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
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])
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.3

π /
2

0.5 0.6

1
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

10

f(t)

• b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter
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()
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
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!

Contenu connexe

Tendances

The Ring programming language version 1.2 book - Part 45 of 84
The Ring programming language version 1.2 book - Part 45 of 84The Ring programming language version 1.2 book - Part 45 of 84
The Ring programming language version 1.2 book - Part 45 of 84Mahmoud Samir Fayed
 
Computational Linguistics week 10
 Computational Linguistics week 10 Computational Linguistics week 10
Computational Linguistics week 10Mark Chang
 
Better Software: introduction to good code
Better Software: introduction to good codeBetter Software: introduction to good code
Better Software: introduction to good codeGiordano Scalzo
 
Test Driven Cocos2d
Test Driven Cocos2dTest Driven Cocos2d
Test Driven Cocos2dEric Smith
 
Test driven game development silly, stupid or inspired?
Test driven game development   silly, stupid or inspired?Test driven game development   silly, stupid or inspired?
Test driven game development silly, stupid or inspired?Eric Smith
 
Gems of GameplayKit. UA Mobile 2017.
Gems of GameplayKit. UA Mobile 2017.Gems of GameplayKit. UA Mobile 2017.
Gems of GameplayKit. UA Mobile 2017.UA Mobile
 
What they don't tell you about JavaScript
What they don't tell you about JavaScriptWhat they don't tell you about JavaScript
What they don't tell you about JavaScriptRaphael Cruzeiro
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version) Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)Tobias Pfeiffer
 
How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)Tobias Pfeiffer
 
The Ring programming language version 1.10 book - Part 76 of 212
The Ring programming language version 1.10 book - Part 76 of 212The Ring programming language version 1.10 book - Part 76 of 212
The Ring programming language version 1.10 book - Part 76 of 212Mahmoud Samir Fayed
 
Node.js API pitfalls
Node.js API pitfallsNode.js API pitfalls
Node.js API pitfallsTorontoNodeJS
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platformJussi Pohjolainen
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDXJussi Pohjolainen
 
rx.js make async programming simpler
rx.js make async programming simplerrx.js make async programming simpler
rx.js make async programming simplerAlexander Mostovenko
 
The Ring programming language version 1.5.4 book - Part 65 of 185
The Ring programming language version 1.5.4 book - Part 65 of 185The Ring programming language version 1.5.4 book - Part 65 of 185
The Ring programming language version 1.5.4 book - Part 65 of 185Mahmoud Samir Fayed
 
Histogram dan Segmentasi 2
Histogram dan Segmentasi 2Histogram dan Segmentasi 2
Histogram dan Segmentasi 2Lusiana Diyan
 

Tendances (20)

The Ring programming language version 1.2 book - Part 45 of 84
The Ring programming language version 1.2 book - Part 45 of 84The Ring programming language version 1.2 book - Part 45 of 84
The Ring programming language version 1.2 book - Part 45 of 84
 
Python book
Python bookPython book
Python book
 
Computational Linguistics week 10
 Computational Linguistics week 10 Computational Linguistics week 10
Computational Linguistics week 10
 
Better Software: introduction to good code
Better Software: introduction to good codeBetter Software: introduction to good code
Better Software: introduction to good code
 
Test Driven Cocos2d
Test Driven Cocos2dTest Driven Cocos2d
Test Driven Cocos2d
 
Test driven game development silly, stupid or inspired?
Test driven game development   silly, stupid or inspired?Test driven game development   silly, stupid or inspired?
Test driven game development silly, stupid or inspired?
 
Gems of GameplayKit. UA Mobile 2017.
Gems of GameplayKit. UA Mobile 2017.Gems of GameplayKit. UA Mobile 2017.
Gems of GameplayKit. UA Mobile 2017.
 
Academy PRO: ES2015
Academy PRO: ES2015Academy PRO: ES2015
Academy PRO: ES2015
 
What they don't tell you about JavaScript
What they don't tell you about JavaScriptWhat they don't tell you about JavaScript
What they don't tell you about JavaScript
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version) Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 
How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)
 
The Ring programming language version 1.10 book - Part 76 of 212
The Ring programming language version 1.10 book - Part 76 of 212The Ring programming language version 1.10 book - Part 76 of 212
The Ring programming language version 1.10 book - Part 76 of 212
 
Node.js API pitfalls
Node.js API pitfallsNode.js API pitfalls
Node.js API pitfalls
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platform
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
 
Virtual Trackball
Virtual TrackballVirtual Trackball
Virtual Trackball
 
rx.js make async programming simpler
rx.js make async programming simplerrx.js make async programming simpler
rx.js make async programming simpler
 
The Ring programming language version 1.5.4 book - Part 65 of 185
The Ring programming language version 1.5.4 book - Part 65 of 185The Ring programming language version 1.5.4 book - Part 65 of 185
The Ring programming language version 1.5.4 book - Part 65 of 185
 
Histogram dan Segmentasi 2
Histogram dan Segmentasi 2Histogram dan Segmentasi 2
Histogram dan Segmentasi 2
 

En vedette

[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer
[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer
[Ultracode Munich #4] Presentation of the Perceptual Computing ParroteerBeMyApp
 
Android studio で行ってみよう!!
Android studio で行ってみよう!!Android studio で行ってみよう!!
Android studio で行ってみよう!!Kazuaki Ueda
 
[Ultracode Munich #4] Short introduction to the new Android build system incl...
[Ultracode Munich #4] Short introduction to the new Android build system incl...[Ultracode Munich #4] Short introduction to the new Android build system incl...
[Ultracode Munich #4] Short introduction to the new Android build system incl...BeMyApp
 
Entwicklung mit Android Studio und Gradle
Entwicklung mit Android Studio und GradleEntwicklung mit Android Studio und Gradle
Entwicklung mit Android Studio und Gradleinovex GmbH
 
Android Studio簡介
Android Studio簡介Android Studio簡介
Android Studio簡介Walter Shi
 
Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonBeMyApp
 

En vedette (7)

Rohit kochhar
Rohit kochharRohit kochhar
Rohit kochhar
 
[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer
[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer
[Ultracode Munich #4] Presentation of the Perceptual Computing Parroteer
 
Android studio で行ってみよう!!
Android studio で行ってみよう!!Android studio で行ってみよう!!
Android studio で行ってみよう!!
 
[Ultracode Munich #4] Short introduction to the new Android build system incl...
[Ultracode Munich #4] Short introduction to the new Android build system incl...[Ultracode Munich #4] Short introduction to the new Android build system incl...
[Ultracode Munich #4] Short introduction to the new Android build system incl...
 
Entwicklung mit Android Studio und Gradle
Entwicklung mit Android Studio und GradleEntwicklung mit Android Studio und Gradle
Entwicklung mit Android Studio und Gradle
 
Android Studio簡介
Android Studio簡介Android Studio簡介
Android Studio簡介
 
Présentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM WatsonPrésentation des APIs cognitives IBM Watson
Présentation des APIs cognitives IBM Watson
 

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

Swift for tensorflow
Swift for tensorflowSwift for tensorflow
Swift for tensorflow규영 허
 
Intro to Game Programming
Intro to Game ProgrammingIntro to Game Programming
Intro to Game ProgrammingRichard Jones
 
GoLightly: Building VM-Based Language Runtimes with Google Go
GoLightly: Building VM-Based Language Runtimes with Google GoGoLightly: Building VM-Based Language Runtimes with Google Go
GoLightly: Building VM-Based Language Runtimes with Google GoEleanor McHugh
 
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...Víctor Bolinches
 
Super Advanced Python –act1
Super Advanced Python –act1Super Advanced Python –act1
Super Advanced Python –act1Ke Wei Louis
 
Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012Leonardo Borges
 
如何「畫圖」寫測試 - RxJS Marble Test
如何「畫圖」寫測試 - RxJS Marble Test如何「畫圖」寫測試 - RxJS Marble Test
如何「畫圖」寫測試 - RxJS Marble Test名辰 洪
 
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docx
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docxCOMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docx
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docxTashiBhutia12
 
Frege - consequently functional programming for the JVM
Frege - consequently functional programming for the JVMFrege - consequently functional programming for the JVM
Frege - consequently functional programming for the JVMDierk König
 
Parallel Computing in R
Parallel Computing in RParallel Computing in R
Parallel Computing in Rmickey24
 
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...Databricks
 
A Few of My Favorite (Python) Things
A Few of My Favorite (Python) ThingsA Few of My Favorite (Python) Things
A Few of My Favorite (Python) ThingsMichael Pirnat
 
Coscup2021-rust-toturial
Coscup2021-rust-toturialCoscup2021-rust-toturial
Coscup2021-rust-toturialWayne Tsai
 
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...akaptur
 
Dsoop (co 221) 1
Dsoop (co 221) 1Dsoop (co 221) 1
Dsoop (co 221) 1Puja Koch
 
Useful javascript
Useful javascriptUseful javascript
Useful javascriptLei Kang
 
sbt: core concepts and updates (Scala Love 2020)
sbt: core concepts and updates (Scala Love 2020)sbt: core concepts and updates (Scala Love 2020)
sbt: core concepts and updates (Scala Love 2020)Eugene Yokota
 

Similaire à [Ultracode Munich #4] Demo on Animatron by Anton Kotenko (20)

Python Puzzlers
Python PuzzlersPython Puzzlers
Python Puzzlers
 
Swift for tensorflow
Swift for tensorflowSwift for tensorflow
Swift for tensorflow
 
Intro to Game Programming
Intro to Game ProgrammingIntro to Game Programming
Intro to Game Programming
 
GoLightly: Building VM-Based Language Runtimes with Google Go
GoLightly: Building VM-Based Language Runtimes with Google GoGoLightly: Building VM-Based Language Runtimes with Google Go
GoLightly: Building VM-Based Language Runtimes with Google Go
 
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...
Paradigma FP y OOP usando técnicas avanzadas de Programación | Programacion A...
 
Super Advanced Python –act1
Super Advanced Python –act1Super Advanced Python –act1
Super Advanced Python –act1
 
Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012
 
Real life XNA
Real life XNAReal life XNA
Real life XNA
 
如何「畫圖」寫測試 - RxJS Marble Test
如何「畫圖」寫測試 - RxJS Marble Test如何「畫圖」寫測試 - RxJS Marble Test
如何「畫圖」寫測試 - RxJS Marble Test
 
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docx
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docxCOMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docx
COMPAPPABCA49085rFunrAP__Practical Number 9 & 10.docx
 
Frege - consequently functional programming for the JVM
Frege - consequently functional programming for the JVMFrege - consequently functional programming for the JVM
Frege - consequently functional programming for the JVM
 
Parallel Computing in R
Parallel Computing in RParallel Computing in R
Parallel Computing in R
 
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...
Extending Spark SQL API with Easier to Use Array Types Operations with Marek ...
 
Tour of Rust
Tour of RustTour of Rust
Tour of Rust
 
A Few of My Favorite (Python) Things
A Few of My Favorite (Python) ThingsA Few of My Favorite (Python) Things
A Few of My Favorite (Python) Things
 
Coscup2021-rust-toturial
Coscup2021-rust-toturialCoscup2021-rust-toturial
Coscup2021-rust-toturial
 
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...
Allison Kaptur: Bytes in the Machine: Inside the CPython interpreter, PyGotha...
 
Dsoop (co 221) 1
Dsoop (co 221) 1Dsoop (co 221) 1
Dsoop (co 221) 1
 
Useful javascript
Useful javascriptUseful javascript
Useful javascript
 
sbt: core concepts and updates (Scala Love 2020)
sbt: core concepts and updates (Scala Love 2020)sbt: core concepts and updates (Scala Love 2020)
sbt: core concepts and updates (Scala Love 2020)
 

Plus de BeMyApp

Introduction to epid
Introduction to epidIntroduction to epid
Introduction to epidBeMyApp
 
Introduction ciot workshop premeetup
Introduction ciot workshop premeetupIntroduction ciot workshop premeetup
Introduction ciot workshop premeetupBeMyApp
 
Crédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et ParcoursCrédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et ParcoursBeMyApp
 
Cisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - IntroCisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - IntroBeMyApp
 
Tumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensembleTumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensembleBeMyApp
 
Building your first game in Unity 3d by Sarah Sexton
Building your first game in Unity 3d  by Sarah SextonBuilding your first game in Unity 3d  by Sarah Sexton
Building your first game in Unity 3d by Sarah SextonBeMyApp
 
Using intel's real sense to create games with natural user interfaces justi...
Using intel's real sense to create games with natural user interfaces   justi...Using intel's real sense to create games with natural user interfaces   justi...
Using intel's real sense to create games with natural user interfaces justi...BeMyApp
 
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon CollinsIntroduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon CollinsBeMyApp
 
Audio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy TouchAudio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy TouchBeMyApp
 
Shaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the BestShaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the BestBeMyApp
 
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart CityBeMyApp
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save TimeBeMyApp
 
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateurBeMyApp
 
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...BeMyApp
 
[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technologyBeMyApp
 
HP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit RecapHP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit RecapBeMyApp
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoBeMyApp
 
HP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond FirewallsHP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond FirewallsBeMyApp
 
HP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pillHP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pillBeMyApp
 
HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 BeMyApp
 

Plus de BeMyApp (20)

Introduction to epid
Introduction to epidIntroduction to epid
Introduction to epid
 
Introduction ciot workshop premeetup
Introduction ciot workshop premeetupIntroduction ciot workshop premeetup
Introduction ciot workshop premeetup
 
Crédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et ParcoursCrédit Agricole S.A. Personae et Parcours
Crédit Agricole S.A. Personae et Parcours
 
Cisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - IntroCisco Paris DevNet Hackathon slideshow - Intro
Cisco Paris DevNet Hackathon slideshow - Intro
 
Tumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensembleTumeurs Neuroendocrines : une vue d'ensemble
Tumeurs Neuroendocrines : une vue d'ensemble
 
Building your first game in Unity 3d by Sarah Sexton
Building your first game in Unity 3d  by Sarah SextonBuilding your first game in Unity 3d  by Sarah Sexton
Building your first game in Unity 3d by Sarah Sexton
 
Using intel's real sense to create games with natural user interfaces justi...
Using intel's real sense to create games with natural user interfaces   justi...Using intel's real sense to create games with natural user interfaces   justi...
Using intel's real sense to create games with natural user interfaces justi...
 
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon CollinsIntroduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
Introduction to using the R200 camera & Realsense SDK in Unity3d - Jon Collins
 
Audio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy TouchAudio Mixer in Unity5 - Andy Touch
Audio Mixer in Unity5 - Andy Touch
 
Shaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the BestShaders - Claudia Doppioslash - Unity With the Best
Shaders - Claudia Doppioslash - Unity With the Best
 
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
[HACKATHON CISCO PARIS] Slideshow du workshop Smart City
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save Time
 
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
[Workshop e résidents] présentation intent, craft ai, dalkia et incubateur
 
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
[Webinar E-résidents #1] Présentation des différents métiers du bâtiment conn...
 
[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology[IoT World Forum Webinar] Review of CMX Cisco technology
[IoT World Forum Webinar] Review of CMX Cisco technology
 
HP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit RecapHP Helion Episode 6: Cloud Foundry Summit Recap
HP Helion Episode 6: Cloud Foundry Summit Recap
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
HP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond FirewallsHP Helion Webinar #5 - Security Beyond Firewalls
HP Helion Webinar #5 - Security Beyond Firewalls
 
HP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pillHP Helion Webinar #4 - Open stack the magic pill
HP Helion Webinar #4 - Open stack the magic pill
 
HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3
 

Dernier

UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 

Dernier (20)

UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 

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

  • 1. Animatron Player API Modern JavaScript HTML5 Engine Flow in Details Anton shaman.sir Kotenko Animatron, June 2013
  • 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());
  • 9. Scene consists of Elements A B
  • 11. Everything is an Element A shape path text image
  • 12. Everything is an Element A shape path text even sprite
  • 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. Elements may have children A w A A i BX
  • 15. Elements may have children b('parent').sprite(...).add(b('child').star(5)) A w A A i BX
  • 16. ...even while not being something for themselves b('parent').add(b('child').star(5)) w A A i BX
  • 17. Which way a single element is rendered?
  • 19. It stores transformations (state) ...and a brush (visuals) A
  • 20. It stores transformations (state) ...and a brush (visuals)
  • 22. state Modify f(t) → f(t) → f(t) → visuals Paint ← f(ctx) ← f(ctx) ← f(ctx)
  • 23. state Modifiers f(t) → f(t) → f(t) → visuals Painters ← f(ctx) ← f(ctx) ← f(ctx)
  • 24. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  • 25. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  • 26. visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time band
  • 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
  • 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. Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI)
  • 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. 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
  • 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. 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. 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. 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. 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. 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. 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. 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. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
  • 45. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Everything with the help of modifiers and painters
  • 56. May be head to the docs now?)
  • 58. Version 1.0 is coming soon