We have animation!

elm-package.json

@@ -8,6 +8,7 @@
     ],
     "exposed-modules": [],
     "dependencies": {
+        "elm-lang/animation-frame": "1.0.1 <= v < 2.0.0",
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
         "elm-lang/svg": "2.0.0 <= v < 3.0.0",

main.elm

@@ -1,8 +1,9 @@
 import Html exposing (Html, h1, div, text)
-import Time exposing (Time, second)
+import Time exposing (Time, inMilliseconds)
 import Svg exposing (Svg, svg, g, path)
 import Svg.Attributes exposing (stroke, fill, strokeLinejoin, strokeWidth, width, height, viewBox, d)
 import Svg.Path exposing (pathToString, arcBy, subpath, closed, lineBy, startAt, antiClockwise, clockwise, largestArc)
+import AnimationFrame exposing (times)
 
 
 mOVE_SPEED = 60 -- pixels per second
@@ -12,10 +13,11 @@ hEIGHT = "900"
 
 main : Program Never Model Msg
 main =
-  Html.beginnerProgram 
+  Html.program 
-    { model = model
+    { init = init
     , view = view
     , update = update
+    , subscriptions = subscriptions
     }
 
 
@@ -24,22 +26,27 @@ main =
 type alias Model = 
     { time : Time }
 
-model : Model
+init : (Model, Cmd msg)
-model = {
+init = 
-    time = 0
+    ({ time = 0 }
-    }
+    ,Cmd.none
+    )
 
 -- UPDATE
 
 type Msg = Tick Time
 
-update : Msg -> Model -> Model
+update : Msg -> Model -> (Model, Cmd Msg )
 update msg model =
     case msg of
         Tick newTime ->
-            { model | time = newTime }
+            ({ model | time = newTime }, Cmd.none)
 
--- SUMSCRIPTIONS
+-- SUBSCRIPTIONS
+
+subscriptions : Model -> Sub Msg
+subscriptions model = 
+    times Tick
 
 -- VIEW
 
@@ -47,7 +54,17 @@ type alias Point = (Float, Float)
 
 render : String -> String -> Model -> Html msg
 render w h model = 
-    svg [ width w, height h, viewBox "0 0 500, 900"] [pacman (250, 450) (degrees 90)]
+    let
+        -- Pull this out into a function to calculate a position in a range
+        --  based off of a cycle time and current number in the cycle.
+        cycleTime = 500
+        maxOpen = 90
+        currentCycleRatio = (model.time |> inMilliseconds |> round) % cycleTime
+        openness = (toFloat currentCycleRatio) / (cycleTime / (2 * maxOpen)) - maxOpen |> abs
+    in
+        svg 
+            [ width w, height h, viewBox "0 0 500, 900"] 
+            [pacman (250, 450) (degrees openness)]
 
 pacman : Point -> Float -> Svg msg
 pacman position openness =