Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Generative Animation with Elm
Search
Ulric Wilfred
January 26, 2019
Programming
0
200
Generative Animation with Elm
Presented at f (by) '19
Ulric Wilfred
January 26, 2019
Tweet
Share
More Decks by Ulric Wilfred
See All by Ulric Wilfred
The Future of Web UI Development
shamansir
0
110
iElm-Tech-JB.pdf
shamansir
0
90
"iElm"
shamansir
0
71
Elm Revolution
shamansir
0
91
Про Гит
shamansir
2
100
Elm: 2D and 3D Graphics
shamansir
1
510
RPD — Reactive Patch Development, Extended Cut
shamansir
0
180
RPD: Reactive Patch Development
shamansir
0
290
Animatron Player API in Details v3
shamansir
0
430
Other Decks in Programming
See All in Programming
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
CI改善もDatadogとともに
taumu
0
110
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
WebDriver BiDiとは何なのか
yotahada3
1
140
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Done Done
chrislema
182
16k
Documentation Writing (for coders)
carmenintech
67
4.6k
Statistics for Hackers
jakevdp
797
220k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Transcript
Generative Animation with Elm f (by) ‘19 Minsk, Belarus
the obsessed engineer @shaman_sir the obsessed designer Sergo Golovachev Anton
Kotenko
1. The Problem hierarchy of needs from the designers’s point
of view splashes, banners, screensavers… maybe sales something else bla-bla-bla
The Company needs splash screens and banners for
every new IDE version and product
~2000 graphical artifacts per release
Pressure with time, every release requires new style
It should be complex, not minimal
None
So the designer comes to the idea to
generate this stuff (Company doesn’t care about the way it’s done)
It is better if it would be animated, so the
designer will be able to find and save the nicest frame
It is better if it includes time travel, so
the designer would be able to return back in time to the frame they missed
Trying new ideas should be easy, so it should
be easy to change the parts of the generated Thing
1. The Problem The programmer’s point of view λ
Why functional programming?
We’ve tried with p5.js and JavaScript and it’s error-prone
None
Haskell is fascinating
Algebraic Data Types save lives
We need the web output
Elm compiles to JS
Elm started with the graphics from the first
point
Elm is OK with both animation and time travel
None
2. The solution
We had no idea what we get as the result
Functional Programming Elm WebGL Shaders λ Precursors:
Combine different techniques Fractals Delaunay Voronoi FSS
Layers - to try Canvas / WebGL / Text,
to control their order Canvas WebGL SVG WebGL
None
None
MUV but for layers (triggered by animation ticks along with
other events) Canvas WebGL SVG WebGL Tick
None
None
JS-to-Elm connection: random numbers as side-effect
Canvas WebGL SVG WebGL FSS Start | Import | ChangeConfiguration
(also Lucky) Tick
None
Elm-WebGL is awesome https://github.com/elm-explorations/webgl
Type control for shaders code
https://github.com/JetBrains/elmsfeuer https://www.jetbrains.com/goodies/code2art/#tron
Fin.