Skip to content

Instantly share code, notes, and snippets.

@vishaltelangre
Last active October 22, 2017 16:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vishaltelangre/9d970add58c49a396b05071345c6cd2b to your computer and use it in GitHub Desktop.
Save vishaltelangre/9d970add58c49a396b05071345c6cd2b to your computer and use it in GitHub Desktop.
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
Copy link
Author

vishaltelangre commented Oct 22, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment