Animation

Create animations using 2D shapes!

Animation

Code links and examples:
Code Set 1

Objectives of this tutorial:
1.	Learn to animate shapes



Exercises:
1. Now that you have made some shapes, we can try to animate them. We will first try to make a beating heart by applying the scale _  function onto the heart shape. 

Click on Code Set 1
Steps A) to C) must be completed before clicking compile!
    A)	Delete the last block of code (hand clr len time …), and replace it in this format: 
    
    variableName = group [… , … , … ] 
    Explanation: 
    - variableName: This can be any name you want to call the group of shapes, such as heart = … 
    - group: This function groups all the shapes into a combined shape
    - [ … , … , …]: This is a list with each shape separated by a comma.          
    Heart Example: 
    
heart = group [ ngon 4 50
                    |> filled red
                    |> move (0,0)
                , circle 36
                    |> filled red 
                    |> move (20,20)
                , circle 36
                    |> filled red 
                    |> move (-20,20) 
                ]

             
    B)	Delete the “clock t …” block of code, and replace it in this format:
    functionName t = collage 300 300 
                                [ variableName 
                                    |> scale (abs(sin(t/1000)))
                                ]
    functionName: This can be any name you want to call what will happen (animation) to the shapes, such as heartBeat t
    collage ___ ___ This is how big the background will be (i.e. 300 by 300 pixels)
    variableName This name must be what you are trying to animate, in this case it would be the heart shape 
    (combined group of shapes).
     |> scale ((abs(sin(t/1000)))+0.5)  You can play around with the numbers here. For the heart, since we are scaling, 
    we need the abs absolute value function to scale only positively. The “sin” is a math trig function that is basically a 
    wave that goes up and down; here is a link to the function.
    
    HeartBeat Example: 
    
heartBeat t = collage 300 300 
                [ heart 
                    |> scale (abs(sin (t/1000)))
                ]

    
    C)	Change the “clock” variableName in main = Signal.map clock (every second) to your variable name (heart). 
    Also change (every second) to (every millisecond) so that the screen can re-load so fast that it looks 
    animated.
    
    Main Example: main = Signal.map heartBeat (every millisecond)

Great Job! You now have a beating heart.
>> Copy-Paste this piece of code inside your heartbeat t function: 
collage 300 300 
    [ heart 
        |> move ((50*(sin (t/500))),(50*(cos (t/500))))
    ]

	Here we animated the heart by having it move in a circle instead, by using the move function and having (50*sin (x), 50*cos (y))
    |> move ((50*(sin (t/500))),(50*(cos (t/500))))
     
>> Try changing heart to a different shape such as a ball, or anything you want. 
	Try changing the numbers around and see what happens
>> Try to use the rotate function by replacing the move function with  |> rotate (5*(sin (t/500))). 
>> You can even use all the functions to animate the shape, just remember to separate each animation line with the  |> 
(called an infix operator). 

Batman Example!
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Time exposing (..)

main = Signal.map animate (every millisecond)
  
animate t = collage 300 300 
    [ batman
        |> move ((50*(sin (t/1000))),(50*(cos (t/1000))))
        |> rotate (10*(t/5000))
        |> scale ((abs(sin (t/500))) + 0.7)
    ]

batman = group
    [ circle 400
        |> filled black
        |> move (0,0) 
    , circle 190
        |> filled darkGrey 
        |> move (0,0)
    , circle 180
        |> filled white 
        |> move (0,0)
    , circle 170
        |> filled darkGreen 
        |> move (0,0)
    , circle 160
        |> filled green
        |> move (0,0)
    , circle 150
        |> filled blue 
        |> move (0,0)
    , circle 140
        |> filled darkBlue
        |> move (0,0) 
    , circle 130
        |> filled yellow 
        |> move (0,0)
    , circle 120
        |> filled darkYellow
        |> move (0,0)
    , circle 110
        |> filled red
        |> move (0,0)
    , circle 100
        |> filled lightRed 
        |> move (0,0)
    , circle 50
        |> filled black
        |> move (0,0)
    , circle 50
        |> filled skinColor
        |> move (0,0) 
        |> scale 0.9
    , polygon [(-10,0),(0,-5),(10,0),(3,10),(-3,10)]
        |> filled black
        |> move (0,-4)
        |> scale 5
    , ngon 3 30
        |> filled black 
        |> move (29,35)
        |> rotate (degrees 70)
    , ngon 3 30
        |> filled black
        |> move (-29,35)
        |> rotate (degrees 110)
    , oval 40 20
        |> filled white
        |> move (25,0)
        |> rotate (degrees 30)
    , rect 45 15
        |> filled black
        |> move (25,8)
        |> rotate (degrees 20)
    , oval 40 20 
        |> filled white
        |> move (-25,0)
        |> rotate (degrees 150)
    , rect 45 15
        |> filled black
        |> move (-25,8)
        |> rotate (degrees 160)
    , rect 20 2
        |> filled black
        |> move (0,-35)
    , rect 5 2
        |> filled black
        |> move (-12,-36)
        |> rotate (degrees 20)
    , rect 5 2
        |> filled black
        |> move (12,-36)
        |> rotate (degrees 160)
    ]
   
skinColor = hsl 0.17 1 0.74



Have fun with animations and see what you can come up with!

                                
Previous Tutorial Back to Tutorials Next Tutorial