Elm: 2D and 3D Graphics

Munich Lambda Meetup 19 June 2017

Transcript

1. 2D & 3D Graphics 
 in Elm What we have now and what we may do with this… by @shamansir, 2017
2. Write Art
3. What we have now…
4. Elm Time-Travelling Debugger (R.I.P. …?)
5. 2D: elm-lang/svg view : Model -> Html Msg view model = let angle = turns (Time.inMinutes model) handX = toString (50 + 40 * cos angle) handY = toString (50 + 40 * sin angle) in svg [ viewBox "0 0 100 100", width "300px" ] [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] [] , line [ x1 "50", y1 "50", x2 handX, y2 handY , stroke "#023963" ] [] ]
6. 2D: evancz/elm-graphics main : Element main = collage 300 300 (star blue) triangle color size angle = ngon 3 size |> filled color |> rotate (degrees angle) star color = map2 (triangle color) [100, 100] [30, 90]
7. 3D: elm-community/webgl https://ellie-app.com/3wmPk4PGf8Ja1/0
8. 3D: elm-community/webgl https://github.com/elm-community/webgl/blob/master/examples/first-person.elm
9. 3D: TheSeamau5/GraphicsEngine import Engine (render, cube, pyramid, scene) import Math.Vector3 (vec3) myCube = { cube | position <- vec3 0 0 0, rotation <- vec3 45 0 45, scale <- vec3 1.5 1.5 1.5 } myPyramid = { pyramid | position <- vec3 2 0 0, scale <- vec3 0.5 1 0.5 } myScene = { scene | objects <- [myCube, myPyramid] } main = render myScene
10. What we may do with this…
11. fluxus https://github.com/zzkt/fluxus
12. shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855
13. shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855 import Math.Vector3 as Vec3 exposing (Vec3, vec3) import Fluxus.Program as Fx import Fluxus.State exposing ( ..) import Fluxus.Primitive as Primitive exposing ( ..) drawRow : Int -> State -> State drawRow count state = if (count > 0) then state |> translate (vec3 4 0 0) |> drawCube |> rotate (vec3 (10 * (sin (time state))) 0 0) |> withState (\state -> state |> rotate (vec3 0 25 0) |> drawRow (count - 1) ) |> withState (\state -> state |> rotate (vec3 0 -25 0) |> drawRow (count - 1) ) else state main : Fx.FluxusProgram main = Fx.everyFrame (drawRow 10)
14. shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855 drawRow count state = if (count > 0) then state |> translate (vec3 4 0 0) |> drawCube |> rotate (vec3 (10 * (sin (time state))) 0 0) |> withState (\state -> state |> rotate (vec3 0 25 0) |> drawRow (count - 1) ) |> withState (\state -> state |> rotate (vec3 0 -25 0) |> drawRow (count - 1) ) else state main = Fx.everyFrame (drawRow 10)
15. Pict3D from DrRacket
16. Pict3D from DrRacket
17. Pict3D from DrRacket http://docs.racket-lang.org/pict3d/constructors.html
18. So… Why bother?
19. 3D REPL?
20. Playgrounds?
21. EVE by Chris Granger https://www.youtube.com/watch?v=5V1ynVyud4M
22. Chris Granger: In Search of Tomorrow https://www.youtube.com/watch? v=VZQoAKJPbh8&t=1047
23. Chris Granger: Aurora (2013)
24. Chris Granger: Aurora https://www.youtube.com/watch?v=L6iUm_Cqx2s
25. Apparatus http://aprt.us/
26. So… Why Elm?
28. Strict. Minimal. Functional. Web.
29. Bring functionaλ!
30. Bring fun!
31. Thanks. Yours, @shamansir