shine-examples-0.1: animated-shapes/Main.hs

{-# LANGUAGE CPP #-}

import Graphics.Shine
import Graphics.Shine.Image
import Graphics.Shine.Picture

import GHCJS.DOM (currentDocumentUnchecked)

#if defined(ghcjs_HOST_OS)
run :: a -> a
run = id
#elif defined(MIN_VERSION_jsaddle_wkwebview)
import Language.Javascript.JSaddle.WKWebView (run)
#else
import Language.Javascript.JSaddle.WebKitGTK (run)
#endif

animation :: ImageData -> Double -> Picture
animation img x =
    Translate (75+x'/2) 15 (RectF (150+x') 30)
    <> Colored (Color 255 0 0 1.0) (Translate 15 (75+x'/2) $ Rect 30 (150+x'))
    <> Colored (Color 200 200 0 1.0) (Translate 660 30 $ RectF 120 60)
    <> Colored (Color 100 100 (floor x') 1.0) (Translate 600 340 $ RectF 120 240)
    <> Translate (150+x') 150 (circle 100)
    <> Translate 140 120 (circle (80+x'))
    <> Line 400 400 10 x'
    <> Colored (Color 255 0 0 1.0) (Translate 800 500 $ CircleF (x'/10))
    <> foldMap (Translate 300 300 . circle) [1,5..x']
    <> Translate 350 350 (Rotate (x'/200) $ RectF 150 30)
    <> Colored (Color 0 0 255 1) -- blue pentagon
           (Translate 200 500
               (Polygon [ (-110,-80)
                        , (50,-120)
                        , (140,20)
                        , (30,140)
                        , (-120,80)
                        ]))
    <> Translate 100 500 (Image Original img)
    <> Translate 600 500 (Text "20px Sans" CenterAlign (Just 300) "The quick brown fox jumps over the lazy dog")
  where x' = sin (x*3) *100 +100

main :: IO ()
main = run $ do
    doc <- currentDocumentUnchecked
    ctx <- fixedSizeCanvas doc 800 600
    -- Handling assets is somewhat tricky.
    -- See the "handling assets" section in the shine README.
    img <- makeImage "./image.png"
    animate ctx 30 $ animation img