(previously: Elm-particle 1.0.1: create visual flourishes in SVG)
Summary: if you haven’t tried elm-particle before because you had to render things in SVG, there are new functions that give you more options. Give it a go and share what you build!
Hello all! While adopting elm-particle for some work at NoRedInk, we’ve made some updates that may make it easier for you to use in your own projects! As of 1.3.0, you can render particles to any kind of view, and we’ve added helpers to get the position of a particle to help with that. (Thanks, @charliek) In particular, there are two new kinds of rendering:
Rendering as HTML instead of SVG
Here are the changes to the library:
-- Particle.System
viewHtml :
( Particle a -> Html msg)
-> List (Attribute msg)
-> System a
-> Html msg
-- Particle
viewHtml : (Particle a -> Html msg) -> Particle a -> Html msg
This means that if you want your particles to use HTML instead of SVG for rendering (for example, to take advantage of CSS styling that is not possible in SVG, like backgrounds on text) you can do so like this:
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
]
[]
Rendering as 
whatever
But what if you use Html.Styled from rtfeldman/elm-css or TypedSvg from elm-community/typed-svg? Before, you were out of luck. Now, you can do it! Here are the new functions:
-- Particle.System
viewCustom :
( Particle a -> renderedParticle)
-> (List renderedParticle -> wrapper)
-> System a
-> wrapper
-- Particle
leftPixels : Particle a -> Float
topPixels : Particle a -> Float
If you render your particles this way, the library won’t be able to set the position of the particle—it doesn’t know what functions to call to make the right attributes! So you’ll have to do that yourself, but this gives you the power to do whatever you like. Here’s how you’d use this with Html.Styled:
view : System Droplet -> Html.Styled.Html msg
view system =
Html.Styled.main_ []
[ System.viewCustom
viewDroplet
(\droplets ->
Html.Styled.div
[ style "width" "100%"
, style "height" "98vh"
]
droplets
)
system
]
viewDroplet : Particle Droplet -> Html.Styled.Html msg
viewDroplet particle =
let
{ color, radius } =
Particle.data particle
in
Html.Styled.div
[ css
[ width (px radius)
, height (px radius)
, borderRadius (pct 100)
, backgroundColor (hex color)
, position absolute
]
-- styles that will change every frame should be on the particle, not in the styles.
-- This will run a lot faster!
, style "left" (String.fromFloat (Particle.leftPixels particle) ++ "px")
, style "top" (String.fromFloat (Particle.topPixels particle) ++ "px")
]
[]
Anyway, have fun! And as always, please let me know what you build 