-- paste into a GameSlot -- create as many waves as you want -- CHALLENGE: use List.range and List.map to create many rows of waves, each one getting smaller -- CHALLENGE^2: add flying fish! myShapes model = [ manyWaves (rgb 0 120 200) 13 10 |> move ( repeatDistance 10 10 0 model.time, 0 ) |> scale 0.9 -- ^^^ when we scale the waves in back down, we also scale down the speed, why??? , manyWaves (rgb 0 150 255) 13 10 |> move ( repeatDistance 10 10 0 model.time, -20 ) ] -- we started with two waves created in the CurveCreator, as a model for ... twoWaves = curve (-200,0) [Pull (-173,-40) (-100,0), Pull (-70,-38) (0,0), Pull (0,0) (0,-85), Pull (0,-86) (-201,-88) ] |> filled (rgb 0 150 255) |> move (100,0) -- the manyWave function takes a colour, number of waves and a width and creates a single Bezier curve -- with 2*numWaves manyWaves clr numWaves width = let -- Pulls along the top of the "water box" pulls = -- step1: create a list of points [-numWaves, ... -2,-1,0,1,2 ... numWaves] List.range -numWaves numWaves -- setp2: turn each number into (x,y) coordinates of a point |> List.map ( \ idx -> (width * toFloat idx, 0) ) -- step3: turn each point into a pull |> List.map ( \ (x,y) -> Pull (x - 0.7 * width, y - width) (x,y) ) in curve (-200,0) ( pulls ++ [ Pull ( 150, -90) (150,-90), Pull (-150,-90) (-150,-90) ] ) |> filled clr -- same old Msg type, update and initial model type Msg = Tick Float GetKeyState update msg model = case msg of Tick t _ -> { time = t } init = { time = 0 } -- two functions from the Animation Slots -- repeat an animation for a given duration repeatDuration : Float -> Int -> Float -> Float -> Float repeatDuration speed duration startPosition time = speed * (time - toFloat duration * toFloat (floor time // duration)) + startPosition -- repeat an animation for a given distance repeatDistance : Float -> Float -> Float -> Float -> Float repeatDistance speed distance startPosition time = repeatDuration speed (round <| distance / speed) startPosition time