-- This example shows how to rotate around any point.

myShapes model =
  -- the red hexagon rotates around the middle point (0,0)
  -- actually, everything rotates around that point, but ...
  [ ngon 6 20 |> filled red
      |> rotate model.time
  -- if we move the green hexagon first, and then rotate it
  -- it looks like it is "orbiting" around (0,0)
  , ngon 6 20 |> filled green
      |> move (30,30)
      |> rotate model.time
  -- if we rotate the black hexagon before moving, it looks
  -- like it it is rotating by itself, just in a different place
  , ngon 6 20 |> filled black
      |> rotate model.time
      |> move (-30,30)
  -- while the orange rectangle, by moving first, rotating and moving again
  -- looks like it is orbiting around the black hexagon
  , ngon 6 20 |> filled orange
      |> move (30,-30)
      |> rotate model.time
      |> move (-30,30)
  -- in case you get hypnotized by the hexagons, we added a clock sound
  -- to remind you it's time to work on your code!
  , if sin (3*model.time) > 0
      then text "tick" |> size 30 |> filled black |> move (-70,-20)
      else text "tock" |> size 30 |> filled black
  ]

init = { time = 0 }

type Msg = Tick Float GetKeyState

update msg model = case msg of
                     Tick t _ -> { model | time = t}