Skip to content

Instantly share code, notes, and snippets.

@vishaltelangre vishaltelangre/Main.elm
Last active Oct 22, 2017

Embed
What would you like to do?
Heartbeat animation rendering on HTML5 Canvas in Elm using "evancz/elm-graphics" package. Compatible with Elm v 0.18. This is ported from an old example on http://outreach.mcmaster.ca/tutorials/animation/animation.html which uses old packages like "Signal" and "Graphics.Collage" which no longer exists in new Elm versions now.
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"src"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/animation-frame": "1.0.1 <= v < 2.0.0",
"elm-lang/core": "5.0.0 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"evancz/elm-graphics": "1.0.1 <= v < 2.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
module Main exposing (..)
import Html exposing (..)
import Color exposing (..)
import Collage exposing (..)
import Element exposing (..)
import Time exposing (Time)
import AnimationFrame
-- MODEL
type alias Model =
{ delta : Time }
init : ( Model, Cmd Msg )
init =
( Model 0, Cmd.none )
-- UPDATE
type Msg
= NoOp
| Tick Time
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Tick t ->
( { model | delta = t }, Cmd.none )
-- VIEW
view : Model -> Html Msg
view model =
toHtml (heartBeat model.delta)
subscriptions : Model -> Sub Msg
subscriptions model =
-- NOTE: The "Time.every millisecond Tick" is not as much smooth as "AnimationFrame.times Tick" is.
AnimationFrame.times Tick
heartBeat : Float -> Element
heartBeat delta =
collage 300 300 [ heart |> scale (abs (sin (delta / 1000))) ]
heart : Form
heart =
group
[ ngon 4 50 |> filled red |> move ( 0, 0 )
, circle 36 |> filled red |> move ( 20, 20 )
, circle 36 |> filled red |> move ( -20, 20 )
]
-- MAIN
main : Program Never Model Msg
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
@vishaltelangre

This comment has been minimized.

Copy link
Owner Author

commented Oct 22, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.