diff --git a/elm-package.json b/elm-package.json index 77e289f..d73f055 100644 --- a/elm-package.json +++ b/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", diff --git a/main.elm b/main.elm index f7fe629..6521f12 100644 --- a/main.elm +++ b/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,34 +13,40 @@ hEIGHT = "900" main : Program Never Model Msg main = - Html.beginnerProgram - { model = model + Html.program + { init = init , view = view , update = update + , subscriptions = subscriptions } -- MODEL type alias Model = - { time : Time} + { time : Time } -model : Model -model = { - time = 0 - } +init : (Model, Cmd msg) +init = + ({ 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 =