Animaxe Example 1 in Elm

Example1.elm

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import List exposing (..)
import Signal exposing (..)
import Time exposing (..)
import Array

-- a square of the given width and color:
square : Float -> Color -> Form
square w c = rect w w |> filled c

fromJust : Maybe a -> a
fromJust (Just x) = x

-- cycle through a list of values in response to input signal:
-- We just maintain the internal state as index into a static array,
-- and increment modulo list length on each tick
-- Note: We completely ignore point values of input signal; we just advance
-- on each tick of the input signal
cycle : List a -> Signal b -> Signal a
cycle xs aS =
  let
    xsA = Array.fromList xs
    st0 = 0
    updState _ idx = (idx + 1) % length xs
    idxSig = foldp updState st0 aS
  in
    Signal.map (\idx -> fromJust (Array.get idx xsA)) idxSig

spark : Signal a -> Signal Form
spark = cycle [square 5 red, square 3 green]

sparkAnim : Signal Form
sparkAnim = spark (every (200 * millisecond))

sparkMove : Signal Time -> Signal Form
sparkMove tS = 
  let
    moveIt : Time -> Form -> Form
    moveIt t form = move (bigSin t,bigCos t) form
  in
    Signal.map2 moveIt tS sparkAnim

-- period: increasing this will slow the animation
period : Float
period = 250

bigSin : Float -> Float
bigSin t = (\x -> x * 40 + 50) (sin (t/period))

bigCos : Float -> Float
bigCos t = (\x -> x * 40 + 50) (cos (t/period))

animateForm : Signal Form -> Signal Element
animateForm formS =
  Signal.map (\f -> collage 300 300 [square 300 black, f ]) formS

sparkMoveAnim : Signal Form
sparkMoveAnim = sparkMove (Signal.map inMilliseconds (every 30))

timeAnim : Signal Element
timeAnim = Signal.map show (every 30)

main : Signal Element
main = animateForm sparkMoveAnim