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
230
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
140
iElm-Tech-JB.pdf
shamansir
0
110
"iElm"
shamansir
0
84
Elm Revolution
shamansir
0
100
Про Гит
shamansir
2
130
Elm: 2D and 3D Graphics
shamansir
1
540
RPD — Reactive Patch Development, Extended Cut
shamansir
0
210
RPD: Reactive Patch Development
shamansir
0
310
Animatron Player API in Details v3
shamansir
0
450
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
190
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
CSC305 Lecture 05
javiergs
PRO
0
210
CSC305 Lecture 04
javiergs
PRO
0
270
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
150
Advance Your Career with Open Source
ivargrimstad
0
540
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
380
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
840
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
239
18k
Building Adaptive Systems
keathley
44
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Automating Front-end Workflow
addyosmani
1371
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Practical Orchestrator
shlominoach
190
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Music & Morning Musume
bryan
46
6.8k
How GitHub (no longer) Works
holman
315
140k
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.