Generative Animation with Elm

Presented at f (by) '19

Transcript

1. Generative Animation with Elm f (by) ‘19
 Minsk, Belarus
2. the obsessed engineer @shaman_sir the obsessed designer Sergo Golovachev Anton Kotenko
3. 1. The Problem hierarchy of needs from the designers’s point of view splashes, banners, screensavers… maybe sales something else bla-bla-bla
4. The Company needs 
 splash screens and banners 
 for every new 
 IDE version and product
5. ~2000 graphical artifacts per release
6. Pressure with time, every release requires new style
7. It should be complex, not minimal
9. So the designer 
 comes to the idea 
 to generate this stuff (Company doesn’t care about the way it’s done)
10. It is better if it would be animated, so the designer 
 will be able to find and save 
 the nicest frame
11. It is better if it includes 
 time travel, so the designer would be able to return back in time to the frame they missed
12. Trying new ideas should be easy, 
 so it should be easy 
 to change the parts 
 of the generated Thing
13. 1. The Problem The programmer’s point of view λ
14. Why functional programming?
15. We’ve tried 
 with p5.js and JavaScript and it’s error-prone
17. Haskell is fascinating
18. Algebraic Data Types save lives
19. We need the web output
20. Elm compiles to JS
21. Elm started with 
 the graphics 
 from the first point
22. Elm is OK 
 with both animation
 and time travel
24. 2. The solution
25. We had no idea what we get as the result
26. Functional Programming Elm WebGL Shaders λ Precursors:
27. Combine different techniques Fractals Delaunay Voronoi FSS
28. Layers - to try 
 Canvas / WebGL / Text, to control their order Canvas WebGL SVG WebGL
31. MUV but for layers (triggered by animation ticks along with other events) Canvas WebGL SVG WebGL Tick
34. JS-to-Elm connection: random numbers 
 as side-effect
35. Canvas WebGL SVG WebGL FSS Start
 | Import
 | ChangeConfiguration (also Lucky) Tick
37. Elm-WebGL 
 is awesome https://github.com/elm-explorations/webgl
38. Type control 
 for shaders code
39. https://github.com/JetBrains/elmsfeuer https://www.jetbrains.com/goodies/code2art/#tron
40. Fin.