my adventure with elm
DESCRIPTION
In this talk I introduced Functional Reactive Programming and ELM and finished off with a live demo building a complete game of snake in Elm. Code for the demo can be found at : https://github.com/theburningmonk/elm-snakeTRANSCRIPT
![Page 1: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/1.jpg)
My adventure with ELM
SCORE 42
by Yan Cui
![Page 2: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/2.jpg)
agenda
![Page 3: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/3.jpg)
Hi, my name is Yan Cui.
![Page 4: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/4.jpg)
![Page 5: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/5.jpg)
I’m not an expert on Elm.
![Page 6: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/6.jpg)
![Page 7: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/7.jpg)
Function Reactive Programming?
![Page 8: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/8.jpg)
Value over Time
![Page 9: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/9.jpg)
Time
Value
![Page 10: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/10.jpg)
Time
ValueSignal
![Page 11: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/11.jpg)
Move Up
Move Down
![Page 12: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/12.jpg)
private var arrowKeyUp:Bool;!private var arrowKeyDown:Bool;!!private var platform1:Platform;!private var platform2:Platform;!private var ball:Ball;
![Page 13: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/13.jpg)
function keyDown(event:KeyboardEvent):Void {!! if (currentGameState == Paused &&!! ! event.keyCode == 32) {!! ! setGameState(Playing);!! } else if (event.keyCode == 38) {!! ! arrowKeyUp = true;!! } else if (event.keyCode == 40) {!! ! arrowKeyDown = true;!! }!}
![Page 14: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/14.jpg)
function keyUp(event:KeyboardEvent):Void {!! if (event.keyCode == 38) {!! ! arrowKeyUp = false;!! } else if (event.keyCode == 40) {!! ! arrowKeyDown = false;!! }!}
![Page 15: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/15.jpg)
function everyFrame(event:Event):Void {!! if(currentGameState == Playing){!! ! if (arrowKeyUp) {!! ! ! platform1.y -= platformSpeed;!! ! }!! ! if (arrowKeyDown) {!! ! ! platform1.y += platformSpeed;!! ! }!! ! if (platform1.y < 5) platform1.y = 5;!! ! if (platform1.y > 395) platform1.y = 395;!! }!}
![Page 16: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/16.jpg)
function everyFrame(event:Event):Void {!! if(currentGameState == Playing){!! ! if (arrowKeyUp) {!! ! ! platform1.y -= platformSpeed;!! ! }!! ! if (arrowKeyDown) {!! ! ! platform1.y += platformSpeed;!! ! }!! ! if (platform1.y < 5) platform1.y = 5;!! ! if (platform1.y > 395) platform1.y = 395;!! }!}
![Page 17: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/17.jpg)
source files
state changes
![Page 18: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/18.jpg)
source files execution
![Page 19: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/19.jpg)
source files execution
![Page 20: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/20.jpg)
mental model
input state new state behaviour
{ x; y } { x; y-speed }
{ x; y } { x; y+speed }
timer { x; y } { x; y } draw platform
… … … …
![Page 21: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/21.jpg)
transformation
let y = f(x)
Imperative Functional
x.f()
mutation
![Page 22: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/22.jpg)
“one thing I’m discovering is that transforming data is easier to think about than
maintaining state.” !
- Dave Thomas
![Page 23: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/23.jpg)
transformations simplify problem decomposition
![Page 24: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/24.jpg)
Move Up
Move Down
![Page 25: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/25.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 26: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/26.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 27: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/27.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 28: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/28.jpg)
UP! ! ! { x=0, y=1 }!DOWN! ! { x=0, y=-1 }!LEFT!! ! { x=-1, y=0 }!RIGHT! ! { x=1, y=0 }
Keyboard.arrows
![Page 29: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/29.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 30: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/30.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 31: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/31.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 32: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/32.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 33: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/33.jpg)
type alias Platform = {x:Int, y:Int}!defaultPlatform = {x=5, y=0}!!delta = Time.fps 20!input = Signal.sampleOn delta Keyboard.arrows!!cap x = max 5 <| min x 395!!p1 : Signal Platform!p1 = foldp (\{x, y} s -> {s | y <- cap <| s.y + 5*y}) ! ! defaultPlatform! ! input
![Page 34: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/34.jpg)
Rx Dart ElmObservable Stream Signal= =
![Page 36: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/36.jpg)
![Page 37: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/37.jpg)
![Page 38: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/38.jpg)
Idea See in Action
![Page 39: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/39.jpg)
![Page 40: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/40.jpg)
![Page 41: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/41.jpg)
![Page 43: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/43.jpg)
Elm Basics
![Page 44: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/44.jpg)
add x y = x + y
![Page 45: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/45.jpg)
add : Int -> Int -> Intadd x y = x + y
![Page 46: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/46.jpg)
calcAngle start end = let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
![Page 47: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/47.jpg)
calcAngle start end = let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
![Page 48: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/48.jpg)
calcAngle start end = let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
![Page 49: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/49.jpg)
multiply x y = x * y triple = multiply 3
![Page 50: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/50.jpg)
multiply x y = x * y triple = multiply 3
![Page 51: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/51.jpg)
double list = List.map (\x -> x * 2) list
![Page 52: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/52.jpg)
double list = List.map ((*) 2) list
![Page 53: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/53.jpg)
tuple1 = (2, “three”) tuple2 = (2, “three”, [4, 5])
![Page 54: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/54.jpg)
tuple4 = (,) 2 “three” tuple5 = (,,) 2 “three” [4, 5]
![Page 55: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/55.jpg)
x = { age=42, name=“foo” }
![Page 56: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/56.jpg)
lightweight, labelled data structure
![Page 57: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/57.jpg)
x.age x.name
-- 42 -- “foo”
![Page 58: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/58.jpg)
x.age x.name
-- 42 -- “foo”
.age x
.name x-- 42 -- “foo”
![Page 59: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/59.jpg)
-- clone and update y = { x | name <- "bar" }
![Page 60: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/60.jpg)
type alias Character = { age : Int, name : String }
![Page 61: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/61.jpg)
type alias Named a = { a | name : String } type alias Aged a = { a | age : Int }
![Page 62: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/62.jpg)
lady : Named ( Aged { } ) lady = { name=“foo”, age=42 }
![Page 63: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/63.jpg)
getName : Named x -> String getName { name } = name
![Page 64: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/64.jpg)
getName : Named x -> String getName { name } = name !
getName lady -- “foo”
![Page 65: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/65.jpg)
type Status = Flying Pos Speed | Exploding Radius | Exploded
![Page 66: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/66.jpg)
aka. “sums-and-products”
data structures
![Page 67: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/67.jpg)
type Status = Flying Pos Speed | Exploding Radius | Exploded
sums : choice between variants of a type
![Page 68: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/68.jpg)
products : tuple of types
type Status = Flying Pos Speed | Exploding Radius | Exploded
![Page 69: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/69.jpg)
drawCircle x y radius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
![Page 70: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/70.jpg)
drawCircle x y radius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
filled : Color -> Shape -> Form
![Page 71: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/71.jpg)
drawCircle x y radius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
![Page 72: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/72.jpg)
drawCircle x y radius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
![Page 73: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/73.jpg)
“…a clean design is one that supports visual thinking so
people can meet their informational needs with a
minimum of conscious effort.” !
- Daniel Higginbotham (www.visualmess.com)
![Page 74: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/74.jpg)
Whilst talking with an ex-colleague, a question came up on how to implement the Stable Marriage problem using a message passing approach. Naturally, I wanted to answer that question with Erlang!!!Let’s first dissect the problem and decide what processes we need and how they need to interact with one another.!!The stable marriage problem is commonly stated as:!Given n men and n women, where each person has ranked all members of the opposite sex with a unique number between 1 and n in order of preference, marry the men and women together such that there are no two people of opposite sex who would both rather have each other than their current partners. If there are no such people, all the marriages are “stable”. (It is assumed that the participants are binary gendered and that marriages are not same-sex).!From the problem description, we can see that we need:!* a module for man!* a module for woman!* a module for orchestrating the experiment!In terms of interaction between the different modules, I imagined something along the lines of…
2. top-to-bottom1.left-to-right
how we read ENGLISH
![Page 75: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/75.jpg)
public void DoSomething(int x, int y)!{! Foo(y,! Bar(x,! Zoo(Monkey())));!}
how we read CODE
![Page 76: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/76.jpg)
public void DoSomething(int x, int y)!{! Foo(y,! Bar(x,! Zoo(Monkey())));!}
2. bottom-to-top
1.right-to-left
how we read CODE
![Page 77: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/77.jpg)
Whilst talking with an ex-colleague, a question came up on how to implement the Stable Marriage problem using a message passing approach. Naturally, I wanted to answer that question with Erlang!!!Let’s first dissect the problem and decide what processes we need and how they need to interact with one another.!!The stable marriage problem is commonly stated as:!Given n men and n women, where each person has ranked all members of the opposite sex with a unique number between 1 and n in order of preference, marry the men and women together such that there are no two people of opposite sex who would both rather have each other than their current partners. If there are no such people, all the marriages are “stable”. (It is assumed that the participants are binary gendered and that marriages are not same-sex).!From the problem description, we can see that we need:!* a module for man!* a module for woman!* a module for orchestrating the experiment!In terms of interaction between the different modules, I imagined something along the lines of…
2. top-to-bottom
1.left-to-right
how we read ENGLISH
public void DoSomething(int x, int y)!{! Foo(y,! Bar(x,! Zoo(Monkey())));!}
2. top-to-bottom
1.right-to-left
how we read CODE
![Page 78: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/78.jpg)
“…a clean design is one that supports visual thinking so
people can meet their informational needs with a
minimum of conscious effort.”
![Page 79: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/79.jpg)
drawCircle x y radius = radius |> circle |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
2. top-to-bottom
1. left-to-right
![Page 80: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/80.jpg)
drawCircle : Int -> Int -> Float -> Form
![Page 81: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/81.jpg)
drawCircle x y = circle >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
![Page 82: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/82.jpg)
drawCircle x y = circle >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
circle : Float -> Shape
![Page 83: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/83.jpg)
drawCircle x y = (Float -> Shape) >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
![Page 84: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/84.jpg)
drawCircle x y = (Float -> Shape) >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
Shape -> Form
![Page 85: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/85.jpg)
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 86: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/86.jpg)
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 87: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/87.jpg)
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 88: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/88.jpg)
drawCircle x y = (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
![Page 89: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/89.jpg)
drawCircle x y = (Float -> Form) >> alpha 0.5 >> move (x, y)
![Page 90: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/90.jpg)
drawCircle x y = (Float -> Form) >> (Form -> Form) >> move (x, y)
![Page 91: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/91.jpg)
drawCircle x y = (Float -> Form) >> (Form -> Form) >> move (x, y)
![Page 92: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/92.jpg)
drawCircle x y = (Float -> Form) >> move (x, y)
![Page 93: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/93.jpg)
drawCircle x y = (Float -> Form) >> (Form -> Form)
![Page 94: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/94.jpg)
drawCircle x y = (Float -> Form) >> (Form -> Form)
![Page 95: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/95.jpg)
drawCircle x y = (Float -> Form)
![Page 96: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/96.jpg)
drawCircle : Int -> Int -> (Float -> Form)
![Page 97: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/97.jpg)
greet name = case name of "Yan" -> “hi, theburningmonk" _ -> “hi, “ ++ name
![Page 98: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/98.jpg)
greet name = case name of "Yan" -> “hi, theburningmonk" _ -> “hi, “ ++ name
![Page 99: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/99.jpg)
fizzbuzz n = if | n % 15 == 0 -> "fizz buzz" | n % 3 == 0 -> "fizz" | n % 5 == 0 -> "buzz" | otherwise -> show n
![Page 100: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/100.jpg)
Mouse.position Mouse.clicks
Mouse.isDown …
![Page 101: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/101.jpg)
Window.dimension Window.width Window.height
![Page 102: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/102.jpg)
Time.every Time.fps
Time.timestamp Time.delay
…
![Page 103: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/103.jpg)
Mouse.position : Signal (Int, Int)
![Page 104: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/104.jpg)
Mouse.position : Signal (Int, Int)
![Page 105: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/105.jpg)
Mouse.position : Signal (Int, Int)
(10, 23) (3, 16) (8, 10) (12, 5) (18, 3)
![Page 106: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/106.jpg)
Keyboard.lastPressed : Signal Int
![Page 107: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/107.jpg)
Keyboard.lastPressed : Signal Int
H E L L O space
![Page 108: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/108.jpg)
Keyboard.lastPressed : Signal Int
H E L L O space
72 69 76 76 79 32
![Page 109: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/109.jpg)
map : (a -> b) -> Signal a -> Signal b
![Page 110: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/110.jpg)
<~
![Page 111: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/111.jpg)
Signal of num of pixels in window
![Page 112: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/112.jpg)
(\(w, h) -> w*h) <~ Window.dimensions
![Page 113: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/113.jpg)
(\(w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
![Page 114: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/114.jpg)
(\(w, h) -> w*h) <~ Window.dimensions
Signal (Int, Int)(Int, Int) -> Int
Signal Int
![Page 115: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/115.jpg)
(10, 10) (15, 10) (18, 12)
100 150 216
(\(w, h) -> w*h) <~ Window.dimensions
![Page 116: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/116.jpg)
map2 : (a -> b -> c) -> Signal a -> Signal b -> Signal c
![Page 117: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/117.jpg)
~
![Page 118: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/118.jpg)
(,) <~ Window.width ~ Window.height
Signal Int
a -> b -> (a, b)
Signal Int
![Page 119: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/119.jpg)
(,) <~ Window.width ~ Window.height
Signal Int
Int -> Int -> (Int, Int)
Signal Int
![Page 120: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/120.jpg)
map3 : (a -> b -> c -> d) -> Signal a -> Signal b -> Signal c -> Signal d
![Page 121: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/121.jpg)
(,,) <~ signalA ~ signalB ~ signalC
![Page 122: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/122.jpg)
map4 : … map5 : … map6 : … map7 : … map8 : …
![Page 123: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/123.jpg)
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 124: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/124.jpg)
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
![Page 125: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/125.jpg)
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 126: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/126.jpg)
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 127: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/127.jpg)
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 128: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/128.jpg)
1 3 42 5
foldp (\_ n -> n + 1) 0 Mouse.clicks
![Page 129: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/129.jpg)
UP { x=0, y=1 } DOWN { x=0, y=-1 } LEFT { x=-1, y=0 } RIGHT { x=1, y=0 }
![Page 130: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/130.jpg)
merge : Signal a -> Signal a -> Signal a mergeMany : List (Signal a) -> Signal a …
![Page 131: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/131.jpg)
Js Interop, WebGL
HTML layout, dependency management,
etc.
![Page 132: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/132.jpg)
![Page 133: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/133.jpg)
8 segments
![Page 134: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/134.jpg)
direction
![Page 135: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/135.jpg)
change
change
no changenot allowed
direction
![Page 136: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/136.jpg)
direction
![Page 137: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/137.jpg)
direction
![Page 138: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/138.jpg)
direction
![Page 139: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/139.jpg)
direction
![Page 140: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/140.jpg)
direction
cherry
![Page 141: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/141.jpg)
direction
YUM YUM YUM!
![Page 142: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/142.jpg)
direction
+1 segment
![Page 143: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/143.jpg)
![Page 144: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/144.jpg)
![Page 145: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/145.jpg)
![Page 146: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/146.jpg)
![Page 147: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/147.jpg)
![Page 148: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/148.jpg)
![Page 149: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/149.jpg)
Demo
![Page 150: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/150.jpg)
![Page 151: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/151.jpg)
![Page 152: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/152.jpg)
![Page 153: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/153.jpg)
![Page 154: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/154.jpg)
![Page 155: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/155.jpg)
![Page 156: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/156.jpg)
![Page 157: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/157.jpg)
![Page 158: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/158.jpg)
![Page 159: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/159.jpg)
![Page 160: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/160.jpg)
![Page 161: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/161.jpg)
![Page 162: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/162.jpg)
![Page 163: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/163.jpg)
![Page 164: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/164.jpg)
![Page 165: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/165.jpg)
![Page 166: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/166.jpg)
github.com/theburningmonk/elm-snake
github.com/theburningmonk/elm-missile-command
Missile Command
Snake
![Page 168: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/168.jpg)
the����������� ������������������ not����������� ������������������ so����������� ������������������ great����������� ������������������ things
![Page 169: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/169.jpg)
Type error between lines 63 and 85: case gameState of
NotStarted -> if | userInput == Space -> Started (defaultSnake,Nothing)
| True -> gameState Started ({segments,direction},cherry) -> let arrow = case userInput
of Arrow arrow -> arrow
_ -> {x = 0, y = 0} newDirection = getNewDirection
arrow direction newHead = getNewSegment
(List.head segments) newDirection newTail = List.take
((List.length segments) - 1) segments
(w,h) = windowDims isGameOver = (List.any
(\t -> t == newHead) newTail) ||
(((fst newHead) > ((toFloat w) / 2)) || (((snd newHead) > ((toFloat h) / 2)) || (((fst newHead) <
((toFloat (-w)) / 2)) || ((snd newHead) <
((toFloat (-h)) / 2))))) in if | isGameOver -> NotStarted
| True -> Started
({segments = newHead :: newTail, direction = newDirection},
cherry) ! Expected Type: {}
Actual Type: Snake.Input
cryptic error messages
![Page 170: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/170.jpg)
breaking changes
![Page 171: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/171.jpg)
![Page 172: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/172.jpg)
![Page 173: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/173.jpg)
![Page 174: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/174.jpg)
![Page 175: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/175.jpg)
![Page 176: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/176.jpg)
![Page 177: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/177.jpg)
![Page 178: My adventure with Elm](https://reader033.vdocuments.site/reader033/viewer/2022050922/559e02531a28ab366a8b4690/html5/thumbnails/178.jpg)
@theburningmonk
github.com/theburningmonk
theburningmonk.com