1 Animaciones de dibujos

1.1 Rotando un cuadrado

• Vídeo con la animación

• Programa rotando_un_cuadrado.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Rotando un cuadrado" (500,500) (20,20)) green animacion

animacion :: Float -> Picture
animacion t = rotate (60 * t) (rectangleSolid 100 100)

• Comentarios
  • (InWindow t (b,a) (x,y)) es una ventana de título t, base b y altura a con el vértice superior izquierdo en el punto (x,y).
  • (animate v c a) dibuja en la ventana v, con color de fondo c, la animación a.
  • La variable t toma como valor el tiempo transcurrido.
    Sus valores son [0,0.5..].
    Por tanto, los giros son de [0,30,..].

1.2 Moviendo un círculo

• Vídeo con la animación

• Programa moviendo_un_circulo.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Moviendo un circulo" (500,500) (20,20)) green animacion

animacion :: Float -> Picture
animacion t = translate (50 * t) 0 (color red (circleSolid 25))

• Comentarios
  • La variable t toma como valor el tiempo transcurrido.
  • Sus valores son [0,0.5..].
  • Por tanto, los desplazamientos son [0,25,..].

1.3 Expandiendo un círculo

• Vídeo con la animación

• Programa expandiendo_un_circulo.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Expandiendo un circulo" (500,500) (20,20)) green animacion

animacion :: Float -> Picture
animacion t = circle (20 * t)

• Comentarios
  • La variable t toma como valor el tiempo transcurrido.
  • Sus valores son [0,0.5..].
  • Por tanto, los radios son [0,10,..].

1.4 Rotación alrededor de un punto

• Vídeo con la animación

• Programa rotacion_alrededor_de_un_punto.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Rotacion alrededor de un punto" (500,500) (20,20)) 
               green animacion

animacion :: Float -> Picture
animacion t = rotate (60 * t) (translate 100 0 (circleSolid 25))

1.5 Reloj

• Vídeo con la animación

• Programa reloj.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Reloj" (500,500) (20,20)) green animacion

animacion :: Float -> Picture
animacion t = reloj t

reloj t = pictures [ fondo,
                     minutero t,
                     segundero t ]

fondo = color (dark white) (circleSolid 250)

minutero t = rotate (0.1 * t) (line [(0,0), (0,250)])

• Comentarios:
  • Giro del minutero:
    • 360º ~ 1 hora = 60 minutos = 3.600 segundos
    • 1 minuto ~ (360/3.600)º = 0.1º
  • Giro del segundero:
    • 360º ~ 1 minuto = 60 segundos
    • 1 segundo ~ (360/60)º = 6º

2 Animaciones de fractales

2.1 Árbol animado

• Vídeo con la animación

• Programa arbol_animado.hs

import Graphics.Gloss

main :: IO ()
main = animate (InWindow "Zen" (800,500) (5,5)) (greyN 0.2) frame   

-- Produce one frame of the animation.
frame :: Float -> Picture
frame timeS = Pictures  
          -- the red rectangles
          [ Translate 0 150     backRec
          , Translate 0 0       backRec
          , Translate 0 (-150)  backRec
                          
          -- the tree
          , Translate 0 (-150) $    treeFrac 7 timeS ]

-- One of the red backing rectangles, with a white outline.
backRec :: Picture
backRec = Pictures
      [ Color red   (rectangleSolid 400 100)
      , Color white (rectangleWire  400 100) ]

-- The color for the outline of the tree's branches.
treeOutline :: Color
treeOutline = makeColor 0.3 0.3 1.0 1.0

-- The color for the shading of the tree's branches.
-- The Alpha here is set to 0.5 so the branches are partly transparent.
treeColor :: Color
treeColor = makeColor 0.0 1.0 0.0 0.5

-- The tree fractal.
-- The position of the branches changes depending on the animation time
-- as well as the iteration number of the fractal.
treeFrac :: Int -> Float -> Picture
treeFrac 0 timeS = Blank
treeFrac n timeS = Pictures
               [ Color treeColor    $ rectangleUpperSolid 20 300
               , Color treeOutline  $ rectangleUpperWire  20 300
               , Translate 0 30
             $ Rotate  (200 * sin timeS / (fromIntegral n) )
             $ Scale   0.9 0.9 
             $ treeFrac (n-1) timeS
               , Translate 0 70
             $ Rotate  (-200 * sin timeS / (fromIntegral n))
             $ Scale      0.8 0.8 
             $ treeFrac (n-1) timeS ]

2.2 Fractal con relojes animados

• Vídeo con la animación

• Programa relojes_animados.hs

import Graphics.Gloss

main
 =  animate (InWindow "Clock" (500, 500) (20, 20))
        black frame


-- Build the fractal, scale it so it fits in the window
-- and rotate the whole thing as time moves on.
frame :: Float -> Picture
frame time = Color white
         $ Scale 110 110
         $ Rotate (time * 2*pi)
         $ clockFractal 5 time

-- The basic fractal consists of three circles offset from the origin
-- as follows.
--
--         1
--         |
--         .
--       /   \
--      2     3
--
-- The direction of rotation switches as n increases.
-- Components at higher iterations also spin faster.
--
clockFractal :: Int -> Float -> Picture
clockFractal 0 s    = Blank
clockFractal n s    = Pictures [circ1, circ2, circ3, lines]
 where
    -- y offset from origin to center of circle 1.
    a   = 1 / sin (2 * pi / 6)

    -- x offset from origin to center of circles 2 and 3.
    b   = a * cos (2 * pi / 6)

    nf  = fromIntegral n
    rot = if n `mod` 2 == 0
            then   50 * s * (log (1 + nf))
            else (-50 * s * (log (1 + nf)))

    -- each element contains a copy of the (n-1) iteration contained
    --  within a larger circle, and some text showing the time since 
    --  the animation started.
    --
    circNm1 
     = Pictures
        [ circle 1
        , Scale (a/2.5) (a/2.5) $ clockFractal (n-1) s
        , if n > 2
            then Color cyan 
                $ Translate (-0.15) 1
                $ Scale 0.001 0.001 
                $ Text (show s) 
            else Blank
        ]

    circ1   = Translate 0 a     $ Rotate rot    circNm1
    circ2   = Translate 1 (-b)  $ Rotate (-rot) circNm1
    circ3   = Translate (-1) (-b)   $ Rotate rot    circNm1
    
    -- join each iteration to the origin with some lines.
    lines   
     = Pictures
        [ Line [(0, 0), ( 0,  a)]
        , Line [(0, 0), ( 1, -b)]
        , Line [(0, 0), (-1, -b)] ]