elm-playground icon indicating copy to clipboard operation
elm-playground copied to clipboard

This could be a nice example to add to the library (and possibly to https://elm-lang.org/examples)

Open lucamug opened this issue 5 years ago • 2 comments
trafficstars

This "tree interactive animation" could be a nice example for the elm-playground as it is written with few lines of codes and generate a nice visual effect.

Disclaimer: I am not the author of the code and I don't know who the author is.

https://ellie-app.com/7QZ8nYhnGNna1

Screen Shot 2020-04-10 at 8 29 30

module Main exposing (main)

import Playground exposing (..)


main =
    game view update initialModel


colors =
    [ brown, orange, yellow, red, purple, green, blue, darkGreen, lightPurple, darkCharcoal ]


initialModel =
    { w = 80, h = 200, s = 0, t = 0 }


view computer { w, h, s, t } =
    [ words black "move the mouse and use arrow keys" |> moveY (computer.screen.top - 20)
    , fractalTree w h s t colors 10
        |> move -(w / 2) -(computer.screen.height / 3)
    ]


update computer { w, h, s, t } =
    { w = w + toX computer.keyboard
    , h = h + toY computer.keyboard
    , s = w / 2 + w * computer.mouse.x / computer.screen.width
    , t = 150 * computer.mouse.y / computer.screen.height
    }


fractalTree w h s t colorList n =
    let
        currentColor =
            List.head colorList |> Maybe.withDefault charcoal

        restColors =
            List.tail colorList |> Maybe.withDefault colors

        toDegrees alpha =
            alpha / pi * 180

        hypotenus e f =
            sqrt (e ^ 2 + f ^ 2)

        ( wLeft, wRight ) =
            ( hypotenus s t
            , hypotenus (w - s) t
            )

        baseRect =
            rectangle currentColor w h
                |> move (w / 2) (h / 2)

        children =
            if n == 0 then
                []

            else
                [ fractalTree w h s t restColors (n - 1)
                    |> scale (wLeft / w)
                    |> rotate (toDegrees (asin (t / wLeft)))
                    |> moveUp h
                , fractalTree w h s t restColors (n - 1)
                    |> scale (wRight / w)
                    |> rotate -(toDegrees (asin (t / wRight)))
                    |> move s (t + h)
                ]
    in
    group (baseRect :: children)

lucamug avatar Apr 09 '20 23:04 lucamug

I think @erkal might be the author of this :)

mrvary avatar Apr 14 '21 15:04 mrvary

yes, I did also a 3d-version: https://erkal.github.io/elm-3d-playground-exploration/recursive-tree/ the code is here: https://github.com/erkal/elm-3d-playground-exploration/tree/main/games/recursive-tree/src

erkal avatar Apr 14 '21 16:04 erkal