HTML + javascript + Haskell = ELM, parte 10

En Elm, podemos dibujar en el lienzo con una biblioteca gráfica completa. Comenzamos con un collage con dimensiones establecidas, y luego construimos formas. Podemos transformar las formas al moverlas, escalarlas o rotarlas.

La figura muestra un auto simple. Lo describiremos en términos de funciones. Como era de esperar, utilizaremos una combinación de estructuras de datos y funciones para hacer lo que queramos.

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)

carBottom = filled black (rect 160 50)
carTop =
 filled black (rect 100 60)
 tire = filled red (circle 24)

main = collage 300 300
        [ carBottom
        , carTop |> moveY 30
        , tire |> move (-40, -28)
        , tire |> move ( 40, -28) ]

Primero, definimos algunas formas básicas. Definiremos las dimensiones básicas de las formas y, de forma predeterminada, se mostrarán en el medio del lienzo. main es solo un collage, que toma un ancho, una altura y una lista de formas, llamadas formas en Elm. Cada elemento de la lista es solo una forma. Por ejemplo, carTop |> moveY 30 es solo un rectángulo movido 30 píxeles verticalmente.

En este ejemplo particular, la figura es estática. Con Elm, animar esa figura es casi trivial. Digamos que tenemos un rectángulo con una forma que se ve así:

filled black (rect 80 10)

Podemos animar la paleta mapeando Mouse.x en la función que dibuja esta paleta, así:

import Color exposing (..)

import Graphics.Collage exposing (..)

import Graphics.Element exposing (..)

import Mouse

import Window

import Signal

drawPaddle w h x =

   filled black (rect 80 10)

     |> moveX (toFloat x - toFloat w / 2)

     |> moveY (toFloat h * -0.45)

display (w, h) x = collage w h

     [ drawPaddle w h x ]

main = Signal.map2 display Window.dimensions Mouse.x

En Elm solo nos preocupamos por dibujar la paleta en este momento y dejar que la entrada del usuario determine dónde moverla.