Declarative graphics for the browser using GHCJS https://github.com/fgaz/shine
|Latest on Hackage:||0.1.0.0|
This package is not currently in any snapshots. If you're interested in using it, we recommend adding it to Stackage Nightly. Doing so will make builds more reliable, and allow stackage.org to host generated Haddocks.
Shine - Declarative Graphics for the Web
Heavily inspired by gloss.
You need ghcjs
To represent your drawing you have to build a tree using the
pic :: Picture pic = Rect 10 20 -- represents a 10x20 square
To compose multiple
Pictures you can use
Over, which accepts two
and overlaps them.
Picture is a monoid:
<> is an alias for
mempty is the empty picture.
-- draw some shapes on top of each other pic :: Picture pic = Rect 10 20 <> Translate 30 30 (Circle 15) <> Colored (Color 255 0 0 0.2) (RectF 4 4) <> Text "Sans 12px" LeftAlign 200 "The quick brown fox jumps over the lazy dog."
Foldable you can do things like
concentricCircles :: Picture concentricCircles = foldMap Circle [1,10..100]
Before drawing anything you need to obtain a
For this purpose, shine provides two utility functions:
main :: IO () main = runWebGUI $ \ webView -> do ctx <- fixedSizeCanvas webView 800 600 -- do something with ctx
To render a
Picture on a context you have three options:
You can draw it manually using
main :: IO () main = runWebGUI $ \ webView -> do ctx <- fixedSizeCanvas webView 400 400 draw ctx concentricCircles
You can draw a
Picture that depends on time. That is, a
Float -> Picture.
-- An expanding-and-contracting circle. animation :: Float -> Picture animation = Translate 200 200 . Circle . (*100) . (+1) -- bigger positive oscillation . sin -- the circle's radius oscillates main :: IO () main = runWebGUI $ \ webView -> do ctx <- fixedSizeCanvas webView 400 400 animate ctx 30 animation
Finally, you can draw a
Picture that depends on time, inputs
(keyboard and mouse) and an internal state. This is especially useful for games,
hence the name.
-- this code draws a black rectangle in the center of the canvas only when the -- left mouse button is pressed main :: IO () main = runWebGUI $ \ webView -> do ctx <- fixedSizeCanvas webView 400 400 Just doc <- webViewGetDomDocument webView play ctx doc 30 initialState draw handleInput step where -- our state represents the state of the left mouse button initialState = Up -- we draw a square only if the button is pressed draw Up = Empty draw Down = Translate 200 200 $ RectF 200 200 -- when an event is fired we store the button state handleInput (MouseBtn BtnLeft buttonState _) = const buttonState handleInput _ = id -- catch-all for all other events step _ = id -- our state does not depend on time