Download as PDF, PPTX
![tuple1 = (2,“three”)
tuple2 = (2,“three”, [4, 5])](https://image.slidesharecdn.com/myadventurewithelmwide-141205105807-conversion-gate01/75/My-adventure-with-Elm-53-2048.jpg)
![tuple4 = (,) 2 “three”
tuple5 = (,,) 2 “three” [4, 5]](https://image.slidesharecdn.com/myadventurewithelmwide-141205105807-conversion-gate01/75/My-adventure-with-Elm-54-2048.jpg)
![tuple1 = (2,“three”)
tuple2 = (2,“three”, [4, 5])](https://crownmelresort.com/image.slidesharecdn.com/myadventurewithelmwide-141205105807-conversion-gate01/75/My-adventure-with-Elm-53-2048.jpg)
![tuple4 = (,) 2 “three”
tuple5 = (,,) 2 “three” [4, 5]](https://crownmelresort.com/image.slidesharecdn.com/myadventurewithelmwide-141205105807-conversion-gate01/75/My-adventure-with-Elm-54-2048.jpg)
Uploaded byYan Cui
My adventure with Elm
The document outlines a personal exploration of implementing reactive programming concepts using Elm, illustrated through a game where a platform is moved by keyboard inputs. It discusses state management, signal transformations, and data structures, emphasizing the ease of managing behavioral transformations over state maintenance. The author also touches on the stable marriage problem and how to approach its implementation in a modular way.
More Related Content
My adventure with Elm
- 1. My adventure withELM SCORE 42 by Yan Cui
- 2.
- 3. Hi, my nameis Yan Cui.
- 5. I’m not anexpert on Elm.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. private var arrowKeyUp:Bool;! privatevar arrowKeyDown:Bool;! ! private var platform1:Platform;! private var platform2:Platform;! private var ball:Ball;
- 13. 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;! ! }! }
- 14. function keyUp(event:KeyboardEvent):Void {! !if (event.keyCode == 38) {! ! ! arrowKeyUp = false;! ! } else if (event.keyCode == 40) {! ! ! arrowKeyDown = false;! ! }! }
- 15. 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;! ! }! }
- 16. 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;! ! }! }
- 17.
- 18.
- 19.
- 20. mental model input statenew state behaviour { x; y } { x; y-speed } { x; y } { x; y+speed } timer { x; y } { x; y } draw platform … … … …
- 21. transformation let y =f(x) Imperative Functional x.f() mutation
- 22. “one thing I’mdiscovering is that transforming data is easier to think about than maintaining state.” ! - Dave Thomas
- 23.
- 24.
- 25. 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
- 26. 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
- 27. 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
- 28. UP! ! !{ x=0, y=1 }! DOWN! ! { x=0, y=-1 }! LEFT!! ! { x=-1, y=0 }! RIGHT! ! { x=1, y=0 } Keyboard.arrows
- 29. 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
- 30. 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
- 31. 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
- 32. 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
- 33. 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
- 34. Rx Dart Elm ObservableStream Signal = =
- 35.
- 38. Idea See inAction
- 42.
- 43.
- 44. add x y= x + y
- 45. add : Int-> Int -> Int add x y = x + y
- 46. calcAngle start end= let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
- 47. calcAngle start end= let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
- 48. calcAngle start end= let distH = end.x - start.x distV = end.y - start.y in atan2 distV distH
- 49. multiply x y =x * y triple = multiply 3
- 50. multiply x y =x * y triple = multiply 3
- 51. double list =List.map (x -> x * 2) list
- 52. double list =List.map ((*) 2) list
- 53. tuple1 = (2,“three”) tuple2= (2,“three”, [4, 5])
- 54. tuple4 = (,)2 “three” tuple5 = (,,) 2 “three” [4, 5]
- 55. x = {age=42, name=“foo” }
- 56.
- 57.
- 58. x.age x.name -- 42 -- “foo” .agex .name x -- 42 -- “foo”
- 59. -- clone andupdate y = { x | name <- "bar" }
- 60. type alias Character= { age : Int, name : String }
- 61. type alias Nameda = { a | name : String } type alias Aged a = { a | age : Int }
- 62. lady : Named( Aged { } ) lady = { name=“foo”, age=42 }
- 63. getName : Namedx -> String getName { name } = name
- 64. getName : Namedx -> String getName { name } = name ! getName lady -- “foo”
- 65. type Status =Flying Pos Speed | Exploding Radius | Exploded
- 66.
- 67. type Status =Flying Pos Speed | Exploding Radius | Exploded sums : choice between variants of a type
- 68. products : tupleof types type Status = Flying Pos Speed | Exploding Radius | Exploded
- 69. drawCircle x yradius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
- 70. drawCircle x yradius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y) filled : Color -> Shape -> Form
- 71. drawCircle x yradius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
- 72. drawCircle x yradius = circle radius |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y)
- 73. “…a clean designis one that supports visual thinking so people can meet their informational needs with a minimum of conscious effort.” ! - Daniel Higginbotham (www.visualmess.com)
- 74. Whilst talking withan 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
- 75. public void DoSomething(intx, int y)! {! Foo(y,! Bar(x,! Zoo(Monkey())));! } how we read CODE
- 76. public void DoSomething(intx, int y)! {! Foo(y,! Bar(x,! Zoo(Monkey())));! } 2.bottom-to-top 1.right-to-left how we read CODE
- 77. Whilst talking withan 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
- 78. “…a clean designis one that supports visual thinking so people can meet their informational needs with a minimum of conscious effort.”
- 79. drawCircle x yradius = radius |> circle |> filled (rgb 150 170 150) |> alpha 0.5 |> move (x, y) 2.top-to-bottom 1. left-to-right
- 80. drawCircle : Int-> Int -> Float -> Form
- 81. drawCircle x y= circle >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
- 82. drawCircle x y= circle >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y) circle : Float -> Shape
- 83. drawCircle x y= (Float -> Shape) >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y)
- 84. drawCircle x y= (Float -> Shape) >> filled (rgb 150 170 150) >> alpha 0.5 >> move (x, y) Shape -> Form
- 85. drawCircle x y= (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
- 86. drawCircle x y= (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
- 87. drawCircle x y= (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
- 88. drawCircle x y= (Float -> Shape) >> (Shape -> Form) >> alpha 0.5 >> move (x, y)
- 89. drawCircle x y= (Float -> Form) >> alpha 0.5 >> move (x, y)
- 90. drawCircle x y= (Float -> Form) >> (Form -> Form) >> move (x, y)
- 91. drawCircle x y= (Float -> Form) >> (Form -> Form) >> move (x, y)
- 92. drawCircle x y= (Float -> Form) >> move (x, y)
- 93. drawCircle x y= (Float -> Form) >> (Form -> Form)
- 94. drawCircle x y= (Float -> Form) >> (Form -> Form)
- 95. drawCircle x y= (Float -> Form)
- 96. drawCircle : Int-> Int -> (Float -> Form)
- 97. greet name = casename of "Yan" -> “hi, theburningmonk" _ -> “hi,“ ++ name
- 98. greet name = casename of "Yan" -> “hi, theburningmonk" _ -> “hi,“ ++ name
- 99. fizzbuzz n = if| n % 15 == 0 -> "fizz buzz" | n % 3 == 0 -> "fizz" | n % 5 == 0 -> "buzz" | otherwise -> show n
- 100.
- 101.
- 102.
- 103. Mouse.position : Signal(Int, Int)
- 104. Mouse.position : Signal(Int, Int)
- 105. Mouse.position : Signal(Int, Int) (10, 23) (3, 16) (8, 10) (12, 5) (18, 3)
- 106.
- 107. Keyboard.lastPressed : SignalInt H E L L O space
- 108. Keyboard.lastPressed : SignalInt H E L L O space 72 69 76 76 79 32
- 109. map : (a-> b) -> Signal a -> Signal b
- 110.
- 111. Signal of numof pixels in window
- 112. ((w, h) ->w*h) <~ Window.dimensions
- 113. ((w, h) ->w*h) <~ Window.dimensions Signal (Int, Int)(Int, Int) -> Int
- 114. ((w, h) ->w*h) <~ Window.dimensions Signal (Int, Int)(Int, Int) -> Int Signal Int
- 115. (10, 10) (15,10) (18, 12) 100 150 216 ((w, h) -> w*h) <~ Window.dimensions
- 116. map2 : (a-> b -> c) -> Signal a -> Signal b -> Signal c
- 117.
- 118. (,) <~ Window.width~ Window.height Signal Int a -> b -> (a, b) Signal Int
- 119. (,) <~ Window.width~ Window.height Signal Int Int -> Int -> (Int, Int) Signal Int
- 120. map3 : (a-> b -> c -> d) -> Signal a -> Signal b -> Signal c -> Signal d
- 121. (,,) <~ signalA~ signalB ~ signalC
- 122. map4 : … map5: … map6 : … map7 : … map8 : …
- 123. foldp : (a-> b -> b) -> b -> Signal a -> Signal b
- 124. foldp : (a-> b -> b) -> b -> Signal a -> Signal b
- 125. foldp (_ n-> n + 1) 0 Mouse.clicks
- 126. foldp (_ n-> n + 1) 0 Mouse.clicks
- 127. foldp (_ n-> n + 1) 0 Mouse.clicks
- 128. 1 3 425 foldp (_ n -> n + 1) 0 Mouse.clicks
- 129. UP { x=0, y=1 } DOWN { x=0, y=-1 } LEFT { x=-1, y=0 } RIGHT { x=1, y=0 }
- 130. merge : Signala -> Signal a -> Signal a mergeMany : List (Signal a) -> Signal a …
- 131. Js Interop, WebGL HTML layout, dependencymanagement, etc.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 149.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173. Type error betweenlines 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
- 174.
- 182.