Animated Triangles

Triangles.elm

module Triangles exposing (main)

import Angle exposing (Angle)
import Animation
import Browser
import Camera3d
import Color
import Direction3d
import Html exposing (Html)
import Length
import Pixels
import Point3d
import Scene3d
import Scene3d.Drawable as Drawable
import Scene3d.Mesh as Mesh
import Triangle3d
import Viewpoint3d


type alias Model =
    { color : Animation.State
    }


type Msg
    = Animate Animation.Msg


init : () -> ( Model, Cmd Msg )
init () =
    ( { color =
            Animation.style [ Animation.color red ]
                |> Animation.interrupt
                    [ Animation.loop
                        [ Animation.to [ Animation.color red ]
                        , Animation.to [ Animation.color green ]
                        ]
                    ]
      }
    , Cmd.none
    )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg m =
    case msg of
        Animate animMsg ->
            ( { m | color = Animation.update animMsg m.color }, Cmd.none )


view : Model -> Html msg
view m =
    let
        color =
            Animation.renderPairs m.color
                |> List.head
                |> Maybe.map Tuple.second
                |> Maybe.map str2color

        triangle1 =
            Triangle3d.from
                (Point3d.meters 0 0 0)
                (Point3d.meters 1 0 0)
                (Point3d.meters 1 1 0)

        triangle2 =
            Triangle3d.from
                (Point3d.meters 0 0 0)
                (Point3d.meters 1 1 0)
                (Point3d.meters 0 1 0)

        mesh1 =
            Mesh.triangles [] [ triangle1 ]

        mesh2 =
            Mesh.triangles [] [ triangle2 ]

        viewpoint =
            Viewpoint3d.lookAt
                { focalPoint = Point3d.meters 0.5 0.5 0
                , eyePoint = Point3d.meters 3 3 2
                , upDirection = Direction3d.z
                }

        camera =
            Camera3d.perspective
                { viewpoint = viewpoint
                , verticalFieldOfView = Angle.degrees 30
                , clipDepth = Length.meters 0.1
                }
    in
    Scene3d.unlit []
        { camera = camera
        , width = Pixels.pixels 800
        , height = Pixels.pixels 600
        }
        [ Drawable.colored (Maybe.withDefault Color.orange color) mesh1
        , Drawable.colored Color.blue mesh2
        ]


subscriptions : Model -> Sub Msg
subscriptions m =
    Animation.subscription Animate [ m.color ]


main =
    Browser.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }


red : Animation.Color
red =
    { red = 256
    , blue = 0
    , green = 0
    , alpha = 1.0
    }


green : Animation.Color
green =
    { red = 0
    , blue = 0
    , green = 255
    , alpha = 1.0
    }


str2color : String -> Color.Color
str2color s =
    -- input format: "rgba(181,75,0,1)"
    case
        String.split "(" s
            |> List.drop 1
            |> List.head
            |> Maybe.map (String.split ",")
            |> Maybe.map (List.map String.toInt)
    of
        Just ((Just r) :: (Just g) :: (Just b) :: _) ->
            Color.rgb255 r g b

        _ ->
            Color.red