2D & 3D Graphics 
 in Elm What we have now and what we may do with this… by @shamansir, 2017 

Write Art 

What we have now… 

Elm Time-Travelling Debugger (R.I.P. …?) 

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" ] [] ] 

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] 

3D: elm-community/webgl https://ellie-app.com/3wmPk4PGf8Ja1/0 

3D: elm-community/webgl https://github.com/elm-community/webgl/blob/master/examples/first-person.elm 

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 

What we may do with this… 

fluxus https://github.com/zzkt/fluxus 

shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855 

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) 

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) 

Pict3D from DrRacket 

Pict3D from DrRacket 

Pict3D from DrRacket http://docs.racket-lang.org/pict3d/constructors.html 

So… Why bother? 

3D REPL? 

Playgrounds? 

EVE by Chris Granger https://www.youtube.com/watch?v=5V1ynVyud4M 

Chris Granger: In Search of Tomorrow https://www.youtube.com/watch? v=VZQoAKJPbh8&t=1047 

Chris Granger: Aurora (2013) 

Chris Granger: Aurora https://www.youtube.com/watch?v=L6iUm_Cqx2s 

Apparatus http://aprt.us/ 

So… Why Elm? 

No content

Strict. Minimal. Functional. Web. 

Bring functionaλ! 

Bring fun! 

Thanks. Yours, @shamansir