Random

So far we have only seen commands to make HTTP requests, but we can command other things as well, like generating random values! So we are going to make an app that rolls dice, producing a random number between 1 and 6.

Click the blue “Edit” button to see this example in action. Generate a couple random numbers, and look through the code to try to figure out how it works. Click the blue button now!

Edit

  1. import Browser
  2. import Html exposing (..)
  3. import Html.Events exposing (..)
  4. import Random
  8. -- MAIN
  11. main =
  12.   Browser.element
  13.     { init = init
  14.     , update = update
  15.     , subscriptions = subscriptions
  16.     , view = view
  17.     }
  21. -- MODEL
  24. type alias Model =
  25.   { dieFace : Int
  26.   }
  29. init : () -> (Model, Cmd Msg)
  30. init _ =
  31.   ( Model 1
  32.   , Cmd.none
  33.   )
  37. -- UPDATE
  40. type Msg
  41.   = Roll
  42.   | NewFace Int
  45. update : Msg -> Model -> (Model, Cmd Msg)
  46. update msg model =
  47.   case msg of
  48.     Roll ->
  49.       ( model
  50.       , Random.generate NewFace (Random.int 1 6)
  51.       )
  53.     NewFace newFace ->
  54.       ( Model newFace
  55.       , Cmd.none
  56.       )
  60. -- SUBSCRIPTIONS
  63. subscriptions : Model -> Sub Msg
  64. subscriptions model =
  65.   Sub.none
  69. -- VIEW
  72. view : Model -> Html Msg
  73. view model =
  74.   div []
  75.     [ h1 [] [ text (String.fromInt model.dieFace) ]
  76.     , button [ onClick Roll ] [ text "Roll" ]
  77.     ]

The new thing here is command issued in the update function:

  1. Random.generate NewFace (Random.int 1 6)

Generating random values works a bit different than in languages like JavaScript, Python, Java, etc. So let’s see how it works in Elm!

Random Generators

We are using the elm/random package for this. The Random module in particular.

The core idea is that we have random Generator that describes how to generate a random value. For example:

  1. import Random
  3. probability : Random.Generator Float
  4. probability =
  5.   Random.float 0 1
  7. roll : Random.Generator Int
  8. roll =
  9.   Random.int 1 6
  11. usuallyTrue : Random.Generator Bool
  12. usuallyTrue =
  13.   Random.weighted (80, True) [ (20, False) ]

So here we have three random generators. The roll generator is saying it will produce an Int, and more specifically, it will produce an integer between 1 and 6 inclusive. Likewise, the usuallyTrue generator is saying it will produce a Bool, and more specifically, it will be true 80% of the time.

The point is that we are not actually generating the values yet. We are just describing how to generate them. From there you use the Random.generate to turn it into a command:

  1. generate : (a -> msg) -> Generator a -> Cmd msg

When the command is performed, the Generator produces some value, and then that gets turned into a message for your update function. So in our example, the Generator produces a value between 1 and 6, and then it gets turned into a message like NewFace 1 or NewFace 4. That is all we need to know to get our random dice rolls, but generators can do quite a bit more!

Combining Generators

Once we have some simple generators like probability and usuallyTrue, we can start snapping them together with functions like map3. Imagine we want to make a simple slot machine. We could create a generator like this:

  1. import Random
  3. type Symbol = Cherry | Seven | Bar | Grapes
  5. symbol : Random.Generator Symbol
  6. symbol =
  7.   Random.uniform Cherry [ Seven, Bar, Grapes ]
  9. type alias Spin =
  10.   { one : Symbol
  11.   , two : Symbol
  12.   , three : Symbol
  13.   }
  15. spin : Random.Generator Spin
  16. spin =
  17.   Random.map3 Spin symbol symbol symbol

We first create Symbol to describe the pictures that can appear on the slot machine. We then create a random generator that generates each symbol with equal probability.

From there we use map3 to combine them into a new spin generator. It says to generate three symbols and then put them together into a Spin.

The point here is that from small building blocks, we can create a Generator that describes pretty complex behavior. And then from our application, we just have to say something like Random.generate NewSpin spin to get the next random value.

Exercises: Here are a few ideas to make the example code on this page a bit more interesting!

  • Instead of showing a number, show the die face as an image.
  • Instead of showing an image of a die face, use elm/svg to draw it yourself.
  • Create a weighted die with Random.weighted.
  • Add a second die and have them both roll at the same time.
  • Have the dice flip around randomly before they settle on a final value.