module WaterHtml exposing (main)
{-| HEADS UP! You can view this example alongside the running code at
Generate some water coming from a hose or another source. This example
mostly demonstrates emitters, and does just enough generation to get something
nice looking.
This demo uses `viewHtml` instead of `view` to render the particles. This lets
you render your particles as HTML instead of SVG. You don't get as nice of a
drawing API, but if you need to use some HTML/CSS element then this is the way
to go.
-}
import Browser
import Html exposing (Html)
import Html.Attributes as Attrs exposing (style)
import Particle exposing (Particle)
import Particle.System as System exposing (System)
import Random exposing (Generator)
import Random.Float exposing (normal)
{-| This `main` is as minimal as possible. The thing to pay attention to is the
call to `System.sub` below, which contains our emitter.
-}
main : Program () (System Droplet) (System.Msg Droplet)
main =
Browser.element
{ init = \_ -> ( System.init (Random.initialSeed 0), Cmd.none )
, view = view
, update = \msg system -> ( System.update msg system, Cmd.none )
, subscriptions =
\system -> System.sub [ waterEmitter ] identity system
}
-- emitters
type alias Droplet =
{ color : String
, radius : Float
}
droplet : Generator Droplet
droplet =
Random.map2 Droplet
(Random.uniform "#E3F2FD"
[ "#BBDEFB"
, "#90CAF9"
, "#64B5F6"
, "#42A5F5"
, "#2196F3"
, "#1E88E5"
, "#1976D2"
, "#1565C0"
, "#0D47A1"
]
)
(normal 40 10)
{-| Emitters take the delta (in milliseconds )since the last update. This is so
you can emit the right number of particles. This emitter emits about 60
particles per second.
-}
waterEmitter : Float -> Generator (List (Particle Droplet))
waterEmitter delta =
Particle.init droplet
|> Particle.withLifetime (Random.constant 1)
|> Particle.withLocation (Random.constant { x = 50, y = 500 })
|> Particle.withDirection (normal (degrees 45) (degrees 10))
|> Particle.withSpeed (normal 600 100)
|> Particle.withGravity 980
|> Random.list (ceiling (delta * (60 / 1000)))
-- views
view : System Droplet -> Html msg
view system =
Html.main_ []
[ System.viewHtml viewDroplet
[ style "width" "100%"
, style "height" "98vh"
]
system
]
viewDroplet : Particle Droplet -> Html msg
viewDroplet particle =
let
{ color, radius } =
Particle.data particle
in
Html.div
[ style "width" (String.fromFloat radius ++ "px")
, style "height" (String.fromFloat radius ++ "px")
, style "border-radius" "100%"
, style "background-color" color
]
[]