Graphics

In this section we will look at the one of the key features of Elm, Graphics. Doing graphics in a functional programming languages allows us to use the composability of functional languages to make our graphics programs more compositional. As an example will see how the programs reflect the compositonal nature of the way transformations act on graphical Shapes.

Let us get started by drawing some simple shapes.

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

main : Element
main =
  collage 300 300
    [makeSquare blue 50]

makeSquare color size =
  filled color (square size)

You can just enter this code in the online editor/runner.

Now let us see if we can understand how this code works. At the top of the code you are seeing a set of import statements. This enxures that the elm compiler includes the packages containing all the functions we want to use. In this case the packages are Color, Graphics.Element and Graphics.Collage.

Now let us look at the function main what it does is to construct a graphics Element which then gets displayed. The graphics Element is constructed by calling the function collage which takes as input two integers (which define the dimensions of the collage) and a list of Form objects that it then converts to graphics Elements. The signature of the collage function which makes all this explicit is as follows:

collage : Int -> Int -> List Form -> Element

We need to understand two more functions to get the full picture:

• First we create a Shape using the function square which creates a square with the given edge length (side). square : Float -> Shape

• Then we pass this Shape to the function filled which takes the Shape and a color and returns a Form which can be passed to collage. filled : Color -> Shape -> Form

That is all there is to it!

Exercises

1. Try changing colors and sizes on the square to see how this all works.

2. Using the documentation see if you can create a red circle. (Hint: Create a new function makeCircle similar to makeSquare.)

3. Try and make a blue square of side 40 and a circle of radius 60. (Hint: collage will accept a list of Shape Forms.)

You will find the complete documentation for the Graphics.Collage package at this link

More Shapes

Let us create a few more shapes using functions that are defined in Graphics-Collage. The shapes we will consider are:

• Triangle
• Rectangle
• NGon with n sides
• NGon with n vertices

--Simple Shapes
makeSquare color size =
  filled color (square size)

makeTriangle color size =
  filled color (ngon 3 size)

makeRectangle color length width =
  filled color (rect length width)

makeCircle color size =
  filled color (circle size)

makeNgon n color size =
  filled color (ngon n size)

makePolygon color vertices  =
  filled color (polygon vertices)

vertices = [  (0,0)
            , (50,10)
            , (20,50)
            , (80,50)
            ]

Exercises

1. Write code that makes a blue pentagon.

2. Write code to make a red hexagon.

Shapes with Fills and Outlines

So far we looked at shapes which were filled with a chosen color. But we can also make figure with outlines as shown below:

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

makeSquareOutlined : Color.Color -> Float -> Graphics.Collage.Form
makeSquareOutlined color size =
 square size
 |>outlined (solid color)

main =
  collage 300 300
    [makeSquareOutlined blue 50]

Exercises

1. Write code the makes a square with a dashed outline. (Hint you can use the function dashed instead of )

Transforming Shapes

Now that we have a set of shapes to work with we can look at functions that transform them.

Making a Star - using triangles and transformations

Once we understand transformations we can use them to create more complex shapes and figures.

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

main : Element
main =
  collage 300 300 (star blue)

triangle color size angle =
  ngon 3 size
  |>filled color
  |> rotate (degrees angle)

star color = map2 (triangle color) [100,100] [30, 90]