Elm-particle 1.3.0

(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 :wave: whatever :wave:

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 :smile:

4 Likes

This is awesome. I am definitely looking to use this in a project of mine.

2 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.