Skip to content

Instantly share code, notes, and snippets.

@netzwerg
Created January 7, 2016 20:18
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 netzwerg/ce68469060c267cad3c1 to your computer and use it in GitHub Desktop.
Save netzwerg/ce68469060c267cad3c1 to your computer and use it in GitHub Desktop.
Circle animation to paste into http://www.elm-lang.org/try
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Time exposing (..)
import Window
import List exposing (..)
import Debug
-- CONFIG
size = 600
circleSize = 240
dotCount = 10
dotSize = 10
velocity = 0.01
-- MODEL
type alias Dot =
{ x : Float
, angle : Float
}
type alias State = List Dot
createDots : State
createDots = map createDot [ 0 .. dotCount - 1 ]
createDot : Int -> Dot
createDot index =
let angle = toFloat index * pi / dotCount
in { x = 0
, angle = angle
}
-- UPDATE
update : Time -> State -> State
update time dots = map (moveDot time) dots |> Debug.watch "Dots"
moveDot : Time -> Dot -> Dot
moveDot time dot =
let t = velocity * time / pi
newX = (-circleSize + dotSize) * cos(t + dot.angle)
in { dot | x = newX }
-- VIEW
view : State -> Element
view dots =
let background = filled black (circle circleSize)
dotLinePairs = map viewDotWithLine dots
in collage size size (background :: dotLinePairs)
viewDotWithLine : Dot -> Form
viewDotWithLine dot =
let dotView = viewDot dot
lineView = createLineView
in group [dotView , lineView] |> rotate dot.angle
viewDot : Dot -> Form
viewDot d = alpha 0.8 (filled lightOrange (circle dotSize)) |> move (d.x, 0)
createLineView : Form
createLineView = traced (solid white) (path [ (-size / 2.0, 0) , (size / 2.0, 0) ])
-- SIGNALS
main = Time.every 20 |> Signal.foldp update createDots |> Signal.map view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment