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
160
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
96
iElm-Tech-JB.pdf
shamansir
0
48
"iElm"
shamansir
0
60
Elm Revolution
shamansir
0
79
Про Гит
shamansir
2
87
Elm: 2D and 3D Graphics
shamansir
1
430
RPD — Reactive Patch Development, Extended Cut
shamansir
0
100
RPD: Reactive Patch Development
shamansir
0
260
Animatron Player API in Details v3
shamansir
0
400
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Rethinking UI building strategies @ SFI 2024
letelete
0
270
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
340
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Adopting Sorbet at Scale
ufuk
68
8.6k
A Tale of Four Properties
chriscoyier
151
22k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Statistics for Hackers
jakevdp
789
220k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Become a Pro
speakerdeck
PRO
11
4.5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
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.