[Ultracode Munich #4] Demo on Animatron by Anton Kotenko
-
Upload
bemyapp -
Category
Technology
-
view
747 -
download
1
description
Transcript of [Ultracode Munich #4] Demo on Animatron by Anton Kotenko
![Page 1: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/1.jpg)
Modern JavaScript HTML5 Engine Flow in Details
Animatron Player API
Anton shaman.sir KotenkoAnimatron, June 2013
![Page 2: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/2.jpg)
Place to go
http://animatron.com/player
![Page 3: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/3.jpg)
Docs
![Page 4: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/4.jpg)
Sandbox
![Page 5: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/5.jpg)
Games
![Page 6: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/6.jpg)
Files
player.js
builder.js
*.module.js
*.import.js
internals
API
Extending API
Import scenes
![Page 7: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/7.jpg)
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());
![Page 8: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/8.jpg)
Flow
![Page 9: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/9.jpg)
Scene consists of Elements
A B
![Page 10: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/10.jpg)
...actually, internally structured
ABX
A Aw
![Page 11: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/11.jpg)
Everything is an Element
Ashape path text image
![Page 12: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/12.jpg)
Everything is an Element
Ashape path text even sprite
![Page 13: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/13.jpg)
Everything is an Element
Ashape path text sprite
b('my-star').star(5)
b('fish').path('...');
b('a-letter').text('A');b('alien').sprite('...');
![Page 14: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/14.jpg)
Elements may have children
ABXiA Aw
![Page 15: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/15.jpg)
Elements may have children
ABXiA Aw
b('parent').sprite(...).add(b('child').star(5))
![Page 16: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/16.jpg)
...even while not being something for themselves
BXiA Aw
b('parent').add(b('child').star(5))
![Page 17: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/17.jpg)
Which way a single element is rendered?
![Page 18: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/18.jpg)
It stores transformations (state)
![Page 19: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/19.jpg)
It stores transformations (state)
...and a brush (visuals)
A
![Page 20: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/20.jpg)
It stores transformations (state)
...and a brush (visuals)
![Page 21: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/21.jpg)
state visuals
![Page 22: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/22.jpg)
state visuals
f(t) →f(t) →f(t) →
← f(ctx)← f(ctx)← f(ctx)
PaintModify
![Page 23: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/23.jpg)
state visuals
f(t) →f(t) →f(t) →
← f(ctx)← f(ctx)← f(ctx)
PaintersModifiers
![Page 24: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/24.jpg)
state visuals
f(t) →f(t) →f(t) →
← f(ctx)← f(ctx)← f(ctx)
PaintersModifiers
Time
band
![Page 25: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/25.jpg)
state visuals
f(t) →f(t) →f(t) →
← f(ctx)← f(ctx)← f(ctx)
PaintersModifiers
Time
band
![Page 26: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/26.jpg)
state visuals
tweens →events →
f(t) →
← f(ctx)← morphs
← f(ctx, t)
PaintersModifiers
Time
band
![Page 27: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/27.jpg)
state visuals
tweens →events →
f(t) →
← f(ctx)← morphs
← f(ctx, t)
PaintersModifiers
Time
bandBrowser
time between calls is unpredictable,
though has delta
δ
δ
δ
δ
δ
![Page 28: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/28.jpg)
Animatron Player
![Page 29: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/29.jpg)
Animatron Player
createPlayer('canvas-id').load(my_scene).play();
![Page 30: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/30.jpg)
Animatron Player
createPlayer('canvas-id').load(my_scene).play(3);
33
![Page 31: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/31.jpg)
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
![Page 32: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/32.jpg)
Import and Export
createPlayer('canvas-id').load(my_scene, new AnimatronImporter());
new AnimatronExporter().create(source_scene) (NYI)
![Page 33: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/33.jpg)
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
<iframe/>
⚙
![Page 34: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/34.jpg)
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
![Page 35: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/35.jpg)
Overview
![Page 36: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/36.jpg)
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'
![Page 37: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/37.jpg)
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
![Page 38: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/38.jpg)
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
![Page 39: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/39.jpg)
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
![Page 40: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/40.jpg)
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
![Page 41: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/41.jpg)
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
![Page 42: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/42.jpg)
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
![Page 43: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/43.jpg)
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
![Page 44: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/44.jpg)
Composing Tweens
b()...xscale([2, 7], [.5, 2.2]).rotate([2, 7], [0, Math.PI / 2]).alpha([2, 7], [0, 1])
![Page 45: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/45.jpg)
Composing Tweens
b()...xscale([2, 7], [.5, 2.2]).rotate([2, 7], [0, Math.PI / 2]).alpha([2, 7], [0, 1])
![Page 46: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/46.jpg)
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 73
![Page 47: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/47.jpg)
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 10.5
![Page 48: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/48.jpg)
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
![Page 49: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/49.jpg)
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); }) — painter10 f(t)
![Page 50: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/50.jpg)
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
![Page 51: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/51.jpg)
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
![Page 52: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/52.jpg)
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
![Page 53: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/53.jpg)
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
![Page 54: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/54.jpg)
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
![Page 55: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/55.jpg)
Everything with the help of modifiers and painters
![Page 56: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/56.jpg)
May be head to the docs now?)
![Page 57: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/57.jpg)
...or Sandbox?
![Page 58: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/58.jpg)
Version 1.0 is coming soon
![Page 59: [Ultracode Munich #4] Demo on Animatron by Anton Kotenko](https://reader034.fdocuments.us/reader034/viewer/2022051513/5472bf24b4af9fa30a8b50ae/html5/thumbnails/59.jpg)
Thank you!