[{"name":"Eigenwijs.Playground","comment":"\n\n\n# Playgrounds\n\n@docs picture, animation, game\n\n\n# Shapes\n\n@docs Shape, circle, oval, square, rectangle, triangle, pentagon, hexagon, octagon, polygon\n\n\n# Words\n\n@docs words\n\n\n# Images\n\n@docs image\n\n\n# Move Shapes\n\n@docs move, moveUp, moveDown, moveLeft, moveRight, moveX, moveY\n\n\n# Customize Shapes\n\n@docs scale, rotate, fade\n\n\n# Groups\n\n@docs group\n\n\n# Time\n\n@docs Time, spin, wave, zigzag, beginOfTime\n\n\n# Computer\n\n@docs Computer, Mouse, Screen, Keyboard, toX, toY, toXY\n\n\n# Colors\n\n@docs Color, rgb, red, orange, yellow, green, blue, purple, brown\n\n\n### Light Colors\n\n@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue, lightPurple, lightBrown\n\n\n### Dark Colors\n\n@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue, darkPurple, darkBrown\n\n\n### Shades of Grey\n\n@docs white, lightGrey, grey, darkGrey, lightCharcoal, charcoal, darkCharcoal, black\n\n\n### Alternate Spellings of Gray\n\n@docs lightGray, gray, darkGray\n\n\n### Numbers\n\n@docs Number\n\n\n# Playground Picture embeds\n\n@docs pictureInit, pictureView, pictureUpdate, pictureSubscriptions, Picture, PictureMsg\n\n\n# Playground Animation embeds\n\n@docs animationInit, animationView, animationUpdate, animationSubscriptions, Animation, AnimationMsg\n\n\n# Playground Game embeds\n\n@docs gameInit, gameView, gameUpdate, gameSubscriptions, Game, GameMsg\n\n","unions":[{"name":"Animation","comment":" The type for animations.\n","args":[],"cases":[]},{"name":"Color","comment":" Represents a color.\n\nThe colors below, like `red` and `green`, come from the [Tango palette][tango].\nIt provides a bunch of aesthetically reasonable colors. Each color comes with a\nlight and dark version, so you always get a set like `lightYellow`, `yellow`,\nand `darkYellow`.\n\n[tango]: https://en.wikipedia.org/wiki/Tango_Desktop_Project\n\n","args":[],"cases":[]},{"name":"Game","comment":" Game model containing the visibility status, custom data (memory) and the Computer state record.\n","args":["memory"],"cases":[]},{"name":"Shape","comment":" Shapes help you make a `picture`, `animation`, or `game`.\n\nRead on to see examples of [`circle`](#circle), [`rectangle`](#rectangle),\n[`words`](#words), [`image`](#image), and many more!\n\n","args":[],"cases":[]},{"name":"Time","comment":" The current time.\n\nHelpful when making an [`animation`](#animation) with functions like\n[`spin`](#spin), [`wave`](#wave), and [`zigzag`](#zigzag).\n\n","args":[],"cases":[]}],"aliases":[{"name":"AnimationMsg","comment":" Animation message alias\n","args":[],"type":"Eigenwijs.Playground.Msg"},{"name":"Computer","comment":" When writing a [`game`](#game), you can look up all sorts of information\nabout your computer:\n\n  - [`Mouse`](#Mouse) - Where is the mouse right now?\n  - [`Keyboard`](#Keyboard) - Are the arrow keys down?\n  - [`Screen`](#Screen) - How wide is the screen?\n  - [`Time`](#Time) - What time is it right now?\n\nSo you can use expressions like `computer.mouse.x` and `computer.keyboard.enter`\nin games where you want some mouse or keyboard interaction.\n\n","args":[],"type":"{ mouse : Eigenwijs.Playground.Mouse, keyboard : Eigenwijs.Playground.Keyboard, screen : Eigenwijs.Playground.Screen, time : Eigenwijs.Playground.Time }"},{"name":"GameMsg","comment":" Game message alias\n","args":[],"type":"Eigenwijs.Playground.Msg"},{"name":"Keyboard","comment":" Figure out what is going on with the keyboard.\n\nIf someone is pressing the UP and RIGHT arrows, you will see a value like this:\n\n    { up = True\n    , down = False\n    , left = False\n    , right = True\n    , space = False\n    , enter = False\n    , shift = False\n    , backspace = False\n    , keys = Set.fromList [ \"ArrowUp\", \"ArrowRight\" ]\n    }\n\nSo if you want to move a character based on arrows, you could write an update\nlike this:\n\n    update computer y =\n        if computer.keyboard.up then\n            y + 1\n\n        else\n            y\n\nCheck out [`toX`](#toX) and [`toY`](#toY) which make this even easier!\n\n**Note:** The `keys` set will be filled with the name of all keys which are\ndown right now. So you will see things like `\"a\"`, `\"b\"`, `\"c\"`, `\"1\"`, `\"2\"`,\n`\"Space\"`, and `\"Control\"` in there. Check out [this list][list] to see the\nnames used for all the different special keys! From there, you can use\n[`Set.member`][member] to check for whichever key you want. E.g.\n`Set.member \"Control\" computer.keyboard.keys`.\n\n[list]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\n[member]: /packages/elm/core/latest/Set#member\n\n","args":[],"type":"{ up : Basics.Bool, down : Basics.Bool, left : Basics.Bool, right : Basics.Bool, space : Basics.Bool, enter : Basics.Bool, shift : Basics.Bool, backspace : Basics.Bool, keys : Set.Set String.String }"},{"name":"Mouse","comment":" Figure out what is going on with the mouse.\n\nYou could draw a circle around the mouse with a program like this:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer memory =\n        [ circle yellow 40\n            |> moveX computer.mouse.x\n            |> moveY computer.mouse.y\n        ]\n\n    update computer memory =\n        memory\n\nYou could also use `computer.mouse.down` to change the color of the circle\nwhile the mouse button is down.\n\n","args":[],"type":"{ x : Eigenwijs.Playground.Number, y : Eigenwijs.Playground.Number, down : Basics.Bool, click : Basics.Bool }"},{"name":"Number","comment":" A number like `1` or `3.14` or `-120`.\n","args":[],"type":"Basics.Float"},{"name":"Picture","comment":" Picture model\n","args":[],"type":"Eigenwijs.Playground.Screen"},{"name":"PictureMsg","comment":" Picture message type\n","args":[],"type":"( Basics.Int, Basics.Int )"},{"name":"Screen","comment":" Get the dimensions of the screen. If the screen is 800 by 600, you will see\na value like this:\n\n    { width = 800\n    , height = 600\n    , top = 300\n    , left = -400\n    , right = 400\n    , bottom = -300\n    }\n\nThis can be nice when used with [`moveY`](#moveY) if you want to put something\non the bottom of the screen, no matter the dimensions.\n\n","args":[],"type":"{ width : Eigenwijs.Playground.Number, height : Eigenwijs.Playground.Number, top : Eigenwijs.Playground.Number, left : Eigenwijs.Playground.Number, right : Eigenwijs.Playground.Number, bottom : Eigenwijs.Playground.Number }"}],"values":[{"name":"animation","comment":" Create an animation!\n\nOnce you get comfortable using [`picture`](#picture) to layout shapes, you can\ntry out an `animation`. Here is square that zigzags back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square blue 40\n            |> moveX (zigzag -100 100 2 time)\n        ]\n\nWe need to define a `view` to make our animation work.\n\nWithin `view` we can use functions like [`spin`](#spin), [`wave`](#wave),\nand [`zigzag`](#zigzag) to move and rotate our shapes.\n\n","type":"(Eigenwijs.Playground.Time -> List.List Eigenwijs.Playground.Shape) -> Platform.Program () Eigenwijs.Playground.Animation Eigenwijs.Playground.Msg"},{"name":"animationInit","comment":" Animation init\n","type":"() -> ( Eigenwijs.Playground.Animation, Platform.Cmd.Cmd Eigenwijs.Playground.Msg )"},{"name":"animationSubscriptions","comment":" Animation subscriptions\n","type":"Platform.Sub.Sub Eigenwijs.Playground.Msg"},{"name":"animationUpdate","comment":" Animation update function\n","type":"Eigenwijs.Playground.Msg -> Eigenwijs.Playground.Animation -> Eigenwijs.Playground.Animation"},{"name":"animationView","comment":" Animation view\n","type":"Eigenwijs.Playground.Animation -> (Eigenwijs.Playground.Time -> List.List Eigenwijs.Playground.Shape) -> Html.Html Eigenwijs.Playground.Msg"},{"name":"beginOfTime","comment":" BeginOfTime\n","type":"Eigenwijs.Playground.Time"},{"name":"black","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"blue","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"brown","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"charcoal","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"circle","comment":" Make circles:\n\n    dot =\n        circle red 10\n\n    sun =\n        circle yellow 300\n\nYou give a color and then the radius. So the higher the number, the larger\nthe circle.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"darkBlue","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkBrown","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkCharcoal","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkGray","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkGreen","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkGrey","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkOrange","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkPurple","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkRed","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"darkYellow","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"fade","comment":" Fade a shape. This lets you make shapes see-through or even completely\ninvisible. Here is a shape that fades in and out:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square orange 30\n        , square blue 200\n            |> fade (zigzag 0 1 3 time)\n        ]\n\nThe number has to be between `0` and `1`, where `0` is totally transparent\nand `1` is completely solid.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"game","comment":" Create a game!\n\nOnce you get comfortable with [`animation`](#animation), you can try making a\ngame with the keyboard and mouse. Here is an example of a green square that\njust moves to the right:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer offset =\n        [ square green 40\n            |> moveRight offset\n        ]\n\n    update computer offset =\n        offset + 0.03\n\nThis shows the three important parts of a game:\n\n1.  `memory` - makes it possible to store information. So with our green square,\n    we save the `offset` in memory. It starts out at `0`.\n2.  `view` - lets us say which shapes to put on screen. So here we move our\n    square right by the `offset` saved in memory.\n3.  `update` - lets us update the memory. We are incrementing the `offset` by\n    a tiny amount on each frame.\n\nThe `update` function is called about 60 times per second, so our little\nchanges to `offset` start to add up pretty quickly!\n\nThis game is not very fun though! Making a `game` also gives you access to the\n[`Computer`](#Computer), so you can use information about the [`Mouse`](#Mouse)\nand [`Keyboard`](#Keyboard) to make it interactive! So here is a red square that\nmoves based on the arrow keys:\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square red 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        ( x + toX computer.keyboard\n        , y + toY computer.keyboard\n        )\n\nNotice that in the `update` we use information from the keyboard to update the\n`x` and `y` values. These building blocks let you make pretty fancy games!\n\n","type":"(Eigenwijs.Playground.Computer -> memory -> List.List Eigenwijs.Playground.Shape) -> (Eigenwijs.Playground.Computer -> memory -> memory) -> memory -> Platform.Program () (Eigenwijs.Playground.Game memory) Eigenwijs.Playground.Msg"},{"name":"gameInit","comment":" Game init function\n","type":"memory -> () -> ( Eigenwijs.Playground.Game memory, Platform.Cmd.Cmd Eigenwijs.Playground.Msg )"},{"name":"gameSubscriptions","comment":" Game subscriptions\n","type":"Eigenwijs.Playground.Game memory -> Platform.Sub.Sub Eigenwijs.Playground.Msg"},{"name":"gameUpdate","comment":" Game update function\n","type":"(Eigenwijs.Playground.Computer -> memory -> memory) -> Eigenwijs.Playground.Msg -> Eigenwijs.Playground.Game memory -> Eigenwijs.Playground.Game memory"},{"name":"gameView","comment":" Game view function\n","type":"(Eigenwijs.Playground.Computer -> memory -> List.List Eigenwijs.Playground.Shape) -> Eigenwijs.Playground.Game memory -> Html.Html Eigenwijs.Playground.Msg"},{"name":"gray","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"green","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"grey","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"group","comment":" Put shapes together so you can [`move`](#move) and [`rotate`](#rotate)\nthem as a group. Maybe you want to put a bunch of stars in the sky:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ star\n                |> move 100 100\n                |> rotate 5\n            , star\n                |> move -120 40\n                |> rotate 20\n            , star\n                |> move 80 -150\n                |> rotate 32\n            , star\n                |> move -90 -30\n                |> rotate -16\n            ]\n\n    star =\n        group\n            [ triangle yellow 20\n            , triangle yellow 20\n                |> rotate 180\n            ]\n\n","type":"List.List Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"hexagon","comment":" Make hexagons:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ hexagon lightYellow 50\n            ]\n\nThe number is the radius, the distance from the center to each point.\n\nIf you made more hexagons, you could [`move`](#move) them around to make a\nhoneycomb pattern!\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"image","comment":" Add some image from the internet:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ image 96 96 \"https://elm-lang.org/images/turtle.gif\"\n            ]\n\nYou provide the width, height, and then the URL of the image you want to show.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> String.String -> Eigenwijs.Playground.Shape"},{"name":"lightBlue","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightBrown","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightCharcoal","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightGray","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightGreen","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightGrey","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightOrange","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightPurple","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightRed","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"lightYellow","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"move","comment":" Move a shape by some number of pixels:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ square red 100\n                |> move -60 60\n            , square yellow 100\n                |> move 60 60\n            , square green 100\n                |> move 60 -60\n            , square blue 100\n                |> move -60 -60\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveDown","comment":" Move a shape down by some number of pixels. So if you wanted to put the sky\nabove the ground, you could move the sky up and the ground down:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ rectangle lightBlue 200 100\n                |> moveUp 50\n            , rectangle lightGreen 200 100\n                |> moveDown 50\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveLeft","comment":" Move shapes to the left.\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ circle yellow 10\n                |> moveLeft 80\n                |> moveUp 30\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveRight","comment":" Move shapes to the right.\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ square purple 20\n                |> moveRight 80\n                |> moveDown 100\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveUp","comment":" Move a shape up by some number of pixels. So if you wanted to make a tree\nyou could move the leaves up above the trunk:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ rectangle brown 40 200\n            , circle green 100\n                |> moveUp 180\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveX","comment":" Move the `x` coordinate of a shape by some amount. Here is a square that\nmoves back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square purple 20\n            |> moveX (wave 4 -200 200 time)\n        ]\n\nUsing `moveX` feels a bit nicer here because the movement may be positive or negative.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"moveY","comment":" Move the `y` coordinate of a shape by some amount. Maybe you want to make\ngrass along the bottom of the screen:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    update computer memory =\n        memory\n\n    view computer count =\n        [ rectangle green computer.screen.width 100\n            |> moveY computer.screen.bottom\n        ]\n\nUsing `moveY` feels a bit nicer when setting things relative to the bottom or\ntop of the screen, since the values are negative sometimes.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"octagon","comment":" Make octogons:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ octagon red 100\n            ]\n\nYou give the color and radius, so each point of this stop sign is 100 pixels\nfrom the center.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"orange","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"oval","comment":" Make ovals:\n\n    football =\n        oval brown 200 100\n\nYou give the color, and then the width and height. So our `football` example\nis 200 pixels wide and 100 pixels tall.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"pentagon","comment":" Make pentagons:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ pentagon darkGrey 100\n            ]\n\nYou give the color and then the radius. So the distance from the center to each\nof the five points is 100 pixels.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"picture","comment":" Make a picture! Here is a picture of a triangle with an eyeball:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle green 150\n            , circle white 40\n            , circle black 10\n            ]\n\n","type":"List.List Eigenwijs.Playground.Shape -> Platform.Program () Eigenwijs.Playground.Picture Eigenwijs.Playground.PictureMsg"},{"name":"pictureInit","comment":" Picture init function\n","type":"() -> ( Eigenwijs.Playground.Picture, Platform.Cmd.Cmd Eigenwijs.Playground.PictureMsg )"},{"name":"pictureSubscriptions","comment":" Picture subscriptions\n","type":"Eigenwijs.Playground.Picture -> Platform.Sub.Sub Eigenwijs.Playground.PictureMsg"},{"name":"pictureUpdate","comment":" Picture update function\n","type":"Eigenwijs.Playground.PictureMsg -> Eigenwijs.Playground.Picture -> ( Eigenwijs.Playground.Picture, Platform.Cmd.Cmd Eigenwijs.Playground.PictureMsg )"},{"name":"pictureView","comment":" Picture view function\n","type":"Eigenwijs.Playground.Picture -> List.List Eigenwijs.Playground.Shape -> Html.Html Eigenwijs.Playground.PictureMsg"},{"name":"polygon","comment":" Make any shape you want! Here is a very thin triangle:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ polygon black [ ( -10, -20 ), ( 0, 100 ), ( 10, -20 ) ]\n            ]\n\n**Note:** If you [`rotate`](#rotate) a polygon, it will always rotate around\n`(0,0)`. So it is best to build your shapes around that point, and then use\n[`move`](#move) or [`group`](#group) so that rotation makes more sense.\n\n","type":"Eigenwijs.Playground.Color -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Shape"},{"name":"purple","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"rectangle","comment":" Make rectangles. This example makes a red cross:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ rectangle red 20 60\n            , rectangle red 60 20\n            ]\n\nYou give the color, width, and then height. So the first shape is vertical\npart of the cross, the thinner and taller part.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"red","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"rgb","comment":" RGB stands for Red-Green-Blue. With these three parts, you can create any\ncolor you want. For example:\n\n    brightBlue =\n        rgb 18 147 216\n\n    brightGreen =\n        rgb 119 244 8\n\n    brightPurple =\n        rgb 94 28 221\n\nEach number needs to be between 0 and 255.\n\nIt can be hard to figure out what numbers to pick, so try using a color picker\nlike [paletton] to find colors that look nice together. Once you find nice\ncolors, click on the color previews to get their RGB values.\n\n[paletton]: http://paletton.com/\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Color"},{"name":"rotate","comment":" Rotate shapes in degrees.\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ words black \"These words are tilted!\"\n                |> rotate 10\n            ]\n\nThe degrees go **counter-clockwise** to match the direction of the\n[unit circle](https://en.wikipedia.org/wiki/Unit_circle).\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"scale","comment":" Make a shape bigger or smaller. So if you wanted some [`words`](#words) to\nbe larger, you could say:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ words black \"Hello, nice to see you!\"\n                |> scale 3\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape -> Eigenwijs.Playground.Shape"},{"name":"spin","comment":" Create an angle that cycles from 0 to 360 degrees over time.\n\nHere is an [`animation`](#animation) with a spinning triangle:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ triangle orange 50\n            |> rotate (spin 8 time)\n        ]\n\nIt will do a full rotation once every eight seconds. Try changing the `8` to\na `2` to make it do a full rotation every two seconds. It moves a lot faster!\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Time -> Eigenwijs.Playground.Number"},{"name":"square","comment":" Make squares. Here are two squares combined to look like an empty box:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ square purple 80\n            , square white 60\n            ]\n\nThe number you give is the dimension of each side. So that purple square would\nbe 80 pixels by 80 pixels.\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"toX","comment":" Turn the LEFT and RIGHT arrows into a number.\n\n    toX { left = False, right = False, ... } == 0\n    toX { left = True , right = False, ... } == -1\n    toX { left = False, right = True , ... } == 1\n    toX { left = True , right = True , ... } == 0\n\nSo to make a square move left and right based on the arrow keys, we could say:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer x =\n        [ square green 40\n            |> moveX x\n        ]\n\n    update computer x =\n        x + toX computer.keyboard\n\n","type":"Eigenwijs.Playground.Keyboard -> Eigenwijs.Playground.Number"},{"name":"toXY","comment":" If you just use `toX` and `toY`, you will move diagonal too fast. You will go\nright at 1 pixel per update, but you will go up/right at 1.41421 pixels per\nupdate.\n\nSo `toXY` turns the arrow keys into an `(x,y)` pair such that the distance is\nnormalized:\n\n    toXY { up = True , down = False, left = False, right = False, ... } == (1, 0)\n    toXY { up = True , down = False, left = False, right = True , ... } == (0.707, 0.707)\n    toXY { up = False, down = False, left = False, right = True , ... } == (0, 1)\n\nNow when you go up/right, you are still going 1 pixel per update.\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square green 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        let\n            ( dx, dy ) =\n                toXY computer.keyboard\n        in\n        ( x + dx, y + dy )\n\n","type":"Eigenwijs.Playground.Keyboard -> ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"name":"toY","comment":" Turn the UP and DOWN arrows into a number.\n\n    toY { up = False, down = False, ... } == 0\n    toY { up = True , down = False, ... } == 1\n    toY { up = False, down = True , ... } == -1\n    toY { up = True , down = True , ... } == 0\n\nThis can be used to move characters around in games just like [`toX`](#toX):\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square blue 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        ( x + toX computer.keyboard\n        , y + toY computer.keyboard\n        )\n\n","type":"Eigenwijs.Playground.Keyboard -> Eigenwijs.Playground.Number"},{"name":"triangle","comment":" Make triangles. So if you wanted to draw the Egyptian pyramids, you could\ndo a simple version like this:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle darkYellow 200\n            ]\n\nThe number is the \"radius\", so the distance from the center to each point of\nthe pyramid is `200`. Pretty big!\n\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape"},{"name":"wave","comment":" Smoothly wave between two numbers.\n\nHere is an [`animation`](#animation) with a circle that resizes:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ circle lightBlue (wave 50 90 7 time)\n        ]\n\nThe radius of the circle will cycles between 50 and 90 every seven seconds.\nIt kind of looks like it is breathing.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Time -> Eigenwijs.Playground.Number"},{"name":"white","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"words","comment":" Show some words!\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ words black \"Hello! How are you?\"\n            ]\n\nYou can use [`scale`](#scale) to make the words bigger or smaller.\n\n","type":"Eigenwijs.Playground.Color -> String.String -> Eigenwijs.Playground.Shape"},{"name":"yellow","comment":" ","type":"Eigenwijs.Playground.Color"},{"name":"zigzag","comment":" Zig zag between two numbers.\n\nHere is an [`animation`](#animation) with a rectangle that tips back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ rectangle lightGreen 20 100\n            |> rotate (zigzag -20 20 4 time)\n        ]\n\nIt gets rotated by an angle. The angle cycles from -20 degrees to 20 degrees\nevery four seconds.\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Time -> Eigenwijs.Playground.Number"}],"binops":[]},{"name":"Eigenwijs.Playground3d","comment":" **Beware that this is a project under heavy construction** - We are trying to\nincrementally work towards a library enabling folks familiar with the 2D\nPlayground, to add 3D elements to a 3D scene, and in this way enabling them to\ncontribute to a collaboratively developed game.\n\n\n# Playgrounds\n\n@docs picture, animation, game\n\n\n# Shapes\n\n@docs Shape, circle, square, rectangle, triangle, polygon, snake\n\n\n# 3D Shapes\n\n@docs sphere, cylinder, cube, block\n\n\n# Move Shapes\n\n@docs move, moveX, moveY, moveZ\n\n\n# Customize Shapes\n\n@docs scale, rotate, roll, pitch, yaw, fade\n\n\n# Groups and extrusion\n\n@docs group, extrude, pullUp\n\n\n# Time\n\n@docs Time, spin, wave, zigzag, beginOfTime, secondsBetween\n\n\n# Computer\n\n@docs Computer, Mouse, Screen, Keyboard, toX, toY, toXY\n\n\n# Colors\n\n@docs rgb, rgb255, red, orange, yellow, green, blue, purple, brown\n\n\n### Light Colors\n\n@docs lightRed, lightOrange, lightYellow, lightGreen, lightBlue, lightPurple, lightBrown\n\n\n### Dark Colors\n\n@docs darkRed, darkOrange, darkYellow, darkGreen, darkBlue, darkPurple, darkBrown\n\n\n### Shades of Grey\n\n@docs white, lightGrey, grey, darkGrey, lightCharcoal, charcoal, darkCharcoal, black\n\n\n### Alternate Spellings of Gray\n\n@docs lightGray, gray, darkGray\n\n\n### Numbers\n\n@docs Number\n\n\n# Playground Scene3d embeds\n\n@docs entity\n\n\n# Playground Picture embeds\n\n@docs pictureInit, pictureView, pictureUpdate, pictureSubscriptions, Picture\n\n\n# Playground Animation embeds\n\n@docs animationInit, animationView, animationUpdate, animationSubscriptions, Animation, AnimationMsg\n\n\n# Playground Game embeds\n\n@docs gameWithCamera, gameInit, gameView, gameUpdate, gameSubscriptions, Game, GameMsg\n@docs networkGame, Connection\n\n\n# Playground Cameras\n\n@docs isometric, eyesAt, lookAt\n\n","unions":[{"name":"Animation","comment":" The type for animations.\n","args":[],"cases":[]},{"name":"Game","comment":" Game model containing the visibility status, custom data (memory) and the Computer state record.\n","args":["memory"],"cases":[]},{"name":"Shape","comment":" Shapes help you make a `picture`, `animation`, or `game`.\n\nRead on to see examples of [`circle`](#circle), [`rectangle`](#rectangle),\n[`words`](#words), [`image`](#image), and many more!\n\n","args":[],"cases":[]},{"name":"Time","comment":" The current time.\n\nHelpful when making an [`animation`](#animation) with functions like\n[`spin`](#spin), [`wave`](#wave), and [`zigzag`](#zigzag).\n\n","args":[],"cases":[]}],"aliases":[{"name":"AnimationMsg","comment":" Animation message alias\n","args":[],"type":"Eigenwijs.Playground3d.Msg"},{"name":"Computer","comment":" When writing a [`game`](#game), you can look up all sorts of information\nabout your computer:\n\n  - [`Mouse`](#Mouse) - Where is the mouse right now?\n  - [`Keyboard`](#Keyboard) - Are the arrow keys down?\n  - [`Screen`](#Screen) - How wide is the screen?\n  - [`Time`](#Time) - What time is it right now?\n\nSo you can use expressions like `computer.mouse.x` and `computer.keyboard.enter`\nin games where you want some mouse or keyboard interaction.\n\n","args":[],"type":"{ inbox : List.List Eigenwijs.Playground3d.Message, secondsBeforeSend : Eigenwijs.Playground3d.Number, touch : { list : List.List Eigenwijs.Playground3d.Touch, current : Maybe.Maybe Eigenwijs.Playground3d.Touch, change : Maybe.Maybe Eigenwijs.Playground3d.Touch, previous : Maybe.Maybe Eigenwijs.Playground3d.Touch }, mouse : Eigenwijs.Playground3d.Mouse, keyboard : Eigenwijs.Playground3d.Keyboard, screen : Eigenwijs.Playground3d.Screen, time : Eigenwijs.Playground3d.Time }"},{"name":"Connection","comment":" A network Connection with server url, sender name, and the send interval\nin seconds.\n","args":[],"type":"{ server : String.String, name : String.String, sendIntervalInSeconds : Basics.Int }"},{"name":"GameMsg","comment":" Game message alias\n","args":[],"type":"Eigenwijs.Playground3d.Msg"},{"name":"Keyboard","comment":" Figure out what is going on with the keyboard.\n\nIf someone is pressing the UP and RIGHT arrows, you will see a value like this:\n\n    { up = True\n    , down = False\n    , left = False\n    , right = True\n    , space = False\n    , enter = False\n    , shift = False\n    , backspace = False\n    , keys = Set.fromList [ \"ArrowUp\", \"ArrowRight\" ]\n    }\n\nSo if you want to move a character based on arrows, you could write an update\nlike this:\n\n    update computer y =\n        if computer.keyboard.up then\n            y + 1\n\n        else\n            y\n\nCheck out [`toX`](#toX) and [`toY`](#toY) which make this even easier!\n\n**Note:** The `keys` set will be filled with the name of all keys which are\ndown right now. So you will see things like `\"a\"`, `\"b\"`, `\"c\"`, `\"1\"`, `\"2\"`,\n`\"Space\"`, and `\"Control\"` in there. Check out [this list][list] to see the\nnames used for all the different special keys! From there, you can use\n[`Set.member`][member] to check for whichever key you want. E.g.\n`Set.member \"Control\" computer.keyboard.keys`.\n\n[list]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\n[member]: /packages/elm/core/latest/Set#member\n\n","args":[],"type":"{ up : Basics.Bool, down : Basics.Bool, left : Basics.Bool, right : Basics.Bool, space : Basics.Bool, enter : Basics.Bool, shift : Basics.Bool, backspace : Basics.Bool, keys : Set.Set String.String }"},{"name":"Mouse","comment":" Figure out what is going on with the mouse.\n\nYou could draw a circle around the mouse with a program like this:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer memory =\n        [ circle yellow 40\n            |> moveX computer.mouse.x\n            |> moveY computer.mouse.y\n        ]\n\n    update computer memory =\n        memory\n\nYou could also use `computer.mouse.down` to change the color of the circle\nwhile the mouse button is down.\n\n","args":[],"type":"{ x : Eigenwijs.Playground3d.Number, y : Eigenwijs.Playground3d.Number, down : Basics.Bool, click : Basics.Bool }"},{"name":"Number","comment":" A number like `1` or `3.14` or `-120`.\n","args":[],"type":"Basics.Float"},{"name":"Picture","comment":" Picture model\n","args":[],"type":"Eigenwijs.Playground3d.Screen"},{"name":"Screen","comment":" Get the dimensions of the screen. If the screen is 800 by 600, you will see\na value like this:\n\n    { width = 800\n    , height = 600\n    , top = 300\n    , left = -400\n    , right = 400\n    , bottom = -300\n    }\n\nThis can be nice when used with [`moveY`](#moveY) if you want to put something\non the bottom of the screen, no matter the dimensions.\n\n","args":[],"type":"{ width : Eigenwijs.Playground3d.Number, height : Eigenwijs.Playground3d.Number, top : Eigenwijs.Playground3d.Number, left : Eigenwijs.Playground3d.Number, right : Eigenwijs.Playground3d.Number, bottom : Eigenwijs.Playground3d.Number }"}],"values":[{"name":"animation","comment":" Create an animation!\n\nOnce you get comfortable using [`picture`](#picture) to layout shapes, you can\ntry out an `animation`. Here is square that zigzags back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square blue 40\n            |> moveX (zigzag -100 100 2 time)\n        ]\n\nWe need to define a `view` to make our animation work.\n\nWithin `view` we can use functions like [`spin`](#spin), [`wave`](#wave),\nand [`zigzag`](#zigzag) to move and rotate our shapes.\n\n","type":"(Eigenwijs.Playground3d.Time -> List.List Eigenwijs.Playground3d.Shape) -> Platform.Program () Eigenwijs.Playground3d.Animation Eigenwijs.Playground3d.Msg"},{"name":"animationInit","comment":" Animation init\n","type":"() -> ( Eigenwijs.Playground3d.Animation, Platform.Cmd.Cmd Eigenwijs.Playground3d.Msg )"},{"name":"animationSubscriptions","comment":" Animation subscriptions\n","type":"Platform.Sub.Sub Eigenwijs.Playground3d.Msg"},{"name":"animationUpdate","comment":" Animation update function\n","type":"Eigenwijs.Playground3d.Msg -> Eigenwijs.Playground3d.Animation -> Eigenwijs.Playground3d.Animation"},{"name":"animationView","comment":" Animation view\n","type":"Eigenwijs.Playground3d.Animation -> (Eigenwijs.Playground3d.Time -> List.List Eigenwijs.Playground3d.Shape) -> Html.Html Eigenwijs.Playground3d.Msg"},{"name":"beginOfTime","comment":" BeginOfTime\n","type":"Eigenwijs.Playground3d.Time"},{"name":"black","comment":" ","type":"Color.Color"},{"name":"block","comment":" Make blocks. This example makes a red cross:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ block red 20 60 10\n            , block red 60 20 10\n            ]\n\nYou give the color, width, height, and then depth. So the first shape is the\nvertical part of the cross, the thinner and taller part.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"blue","comment":" ","type":"Color.Color"},{"name":"brown","comment":" ","type":"Color.Color"},{"name":"charcoal","comment":" ","type":"Color.Color"},{"name":"circle","comment":" Make circles:\n\n    dot =\n        circle red 10\n\n    sun =\n        circle yellow 300\n\nYou give a color and then the radius. So the higher the number, the larger\nthe circle.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"cube","comment":" Make cubes:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ cube blue 10\n            ]\n\nYou give the color, width, height, and then depth. So the first shape is the\nvertical part of the cross, the thinner and taller part.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"cylinder","comment":" Make cylinders:\n\n    pillar =\n        cylinder red 10 50\n\nYou give a color, the radius and then the height.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"darkBlue","comment":" ","type":"Color.Color"},{"name":"darkBrown","comment":" ","type":"Color.Color"},{"name":"darkCharcoal","comment":" ","type":"Color.Color"},{"name":"darkGray","comment":" ","type":"Color.Color"},{"name":"darkGreen","comment":" ","type":"Color.Color"},{"name":"darkGrey","comment":" ","type":"Color.Color"},{"name":"darkOrange","comment":" ","type":"Color.Color"},{"name":"darkPurple","comment":" ","type":"Color.Color"},{"name":"darkRed","comment":" ","type":"Color.Color"},{"name":"darkYellow","comment":" ","type":"Color.Color"},{"name":"entity","comment":" Add a 3D shape to a Scene3D scene as an entity.\n","type":"Eigenwijs.Playground3d.Shape -> Scene3d.Entity coordinates"},{"name":"extrude","comment":" Pull a 2D shape \"up\" to form a 3D body:\n\n    circle blue 20\n        |> extrude 50\n\nThis will create a flat circle \"extruded\" along the\nz-axis to form a 3D cylinder. The extruded form is\ncentered around the xy-plane.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"eyesAt","comment":" Create a camera looking from a point x y z, towards the origin (0, 0, 0)\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera"},{"name":"fade","comment":" Fade a shape. This lets you make shapes see-through or even completely\ninvisible. Here is a shape that fades in and out:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square orange 30\n        , square blue 200\n            |> fade (zigzag 0 1 3 time)\n        ]\n\nThe number has to be between `0` and `1`, where `0` is totally transparent\nand `1` is completely solid.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"game","comment":" Create a game!\n\nOnce you get comfortable with [`animation`](#animation), you can try making a\ngame with the keyboard and mouse. Here is an example of a green square that\njust moves to the right:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer offset =\n        [ square green 40\n            |> moveRight offset\n        ]\n\n    update computer offset =\n        offset + 0.03\n\nThis shows the three important parts of a game:\n\n1.  `memory` - makes it possible to store information. So with our green square,\n    we save the `offset` in memory. It starts out at `0`.\n2.  `view` - lets us say which shapes to put on screen. So here we move our\n    square right by the `offset` saved in memory.\n3.  `update` - lets us update the memory. We are incrementing the `offset` by\n    a tiny amount on each frame.\n\nThe `update` function is called about 60 times per second, so our little\nchanges to `offset` start to add up pretty quickly!\n\nThis game is not very fun though! Making a `game` also gives you access to the\n[`Computer`](#Computer), so you can use information about the [`Mouse`](#Mouse)\nand [`Keyboard`](#Keyboard) to make it interactive! So here is a red square that\nmoves based on the arrow keys:\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square red 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        ( x + toX computer.keyboard\n        , y + toY computer.keyboard\n        )\n\nNotice that in the `update` we use information from the keyboard to update the\n`x` and `y` values. These building blocks let you make pretty fancy games!\n\n","type":"(Eigenwijs.Playground3d.Computer -> memory -> List.List Eigenwijs.Playground3d.Shape) -> (Eigenwijs.Playground3d.Computer -> memory -> memory) -> memory -> Platform.Program () (Eigenwijs.Playground3d.Game memory) Eigenwijs.Playground3d.Msg"},{"name":"gameInit","comment":" Game init function\n","type":"memory -> () -> ( Eigenwijs.Playground3d.Game memory, Platform.Cmd.Cmd Eigenwijs.Playground3d.Msg )"},{"name":"gameSubscriptions","comment":" Game subscriptions\n","type":"Eigenwijs.Playground3d.Game memory -> Platform.Sub.Sub Eigenwijs.Playground3d.Msg"},{"name":"gameUpdate","comment":" Game update function\n","type":"(Eigenwijs.Playground3d.Computer -> memory -> memory) -> Eigenwijs.Playground3d.Msg -> Eigenwijs.Playground3d.Game memory -> Eigenwijs.Playground3d.Game memory"},{"name":"gameView","comment":" Game view function\n","type":"(memory -> Eigenwijs.Playground3d.Camera) -> (Eigenwijs.Playground3d.Computer -> memory -> List.List Eigenwijs.Playground3d.Shape) -> Eigenwijs.Playground3d.Game memory -> Html.Html Eigenwijs.Playground3d.Msg"},{"name":"gameWithCamera","comment":" Create a game using a specific camera for viewing the scene!\n","type":"(memory -> Eigenwijs.Playground3d.Camera) -> (Eigenwijs.Playground3d.Computer -> memory -> List.List Eigenwijs.Playground3d.Shape) -> (Eigenwijs.Playground3d.Computer -> memory -> memory) -> memory -> Platform.Program () (Eigenwijs.Playground3d.Game memory) Eigenwijs.Playground3d.Msg"},{"name":"gray","comment":" ","type":"Color.Color"},{"name":"green","comment":" ","type":"Color.Color"},{"name":"grey","comment":" ","type":"Color.Color"},{"name":"group","comment":" Put shapes together so you can [`move`](#move) and [`rotate`](#rotate)\nthem as a group. Maybe you want to put a bunch of stars in the sky:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ star\n                |> move 100 100\n                |> rotate 5\n            , star\n                |> move -120 40\n                |> rotate 20\n            , star\n                |> move 80 -150\n                |> rotate 32\n            , star\n                |> move -90 -30\n                |> rotate -16\n            ]\n\n    star =\n        group\n            [ triangle yellow 20\n            , triangle yellow 20\n                |> rotate 180\n            ]\n\n","type":"List.List Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"isometric","comment":" Create an isometric camera\n","type":"Eigenwijs.Playground3d.Camera"},{"name":"lightBlue","comment":" ","type":"Color.Color"},{"name":"lightBrown","comment":" ","type":"Color.Color"},{"name":"lightCharcoal","comment":" ","type":"Color.Color"},{"name":"lightGray","comment":" ","type":"Color.Color"},{"name":"lightGreen","comment":" ","type":"Color.Color"},{"name":"lightGrey","comment":" ","type":"Color.Color"},{"name":"lightOrange","comment":" ","type":"Color.Color"},{"name":"lightPurple","comment":" ","type":"Color.Color"},{"name":"lightRed","comment":" ","type":"Color.Color"},{"name":"lightYellow","comment":" ","type":"Color.Color"},{"name":"lookAt","comment":" Modify a camera to look at a specific point x y z\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera -> Eigenwijs.Playground3d.Camera"},{"name":"move","comment":" Move a shape by some number of pixels:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ square red 100\n                |> move -60 60 0\n            , square yellow 100\n                |> move 60 60 0\n            , square green 100\n                |> move 60 -60 0\n            , square blue 100\n                |> move -60 -60 0\n            ]\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"moveX","comment":" Move the `x` coordinate of a shape by some amount. Here is a square that\nmoves back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ square purple 20\n            |> moveX (wave 4 -200 200 time)\n        ]\n\nUsing `moveX` feels a bit nicer here because the movement may be positive or negative.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"moveY","comment":" Move the `y` coordinate of a shape by some amount. Maybe you want to make\ngrass along the bottom of the screen:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    update computer memory =\n        memory\n\n    view computer count =\n        [ rectangle green computer.screen.width 100\n            |> moveY computer.screen.bottom\n        ]\n\nUsing `moveY` feels a bit nicer when setting things relative to the bottom or\ntop of the screen, since the values are negative sometimes.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"moveZ","comment":" Move the `z` coordinate of a shape by some amount:\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"networkGame","comment":" Create a network game; a game that has a messages `inbox` field in Computer\nand a messages `outbox` as a field in its memory. The game takes a Connection\nparameter. Messages sent are tagged with your sender name, configured as\n`name` in the Connection.\n","type":"Eigenwijs.Playground3d.Connection -> (Eigenwijs.Playground3d.Computer -> Eigenwijs.Playground3d.WithMessages memory -> List.List Eigenwijs.Playground3d.Shape) -> (Eigenwijs.Playground3d.Computer -> Eigenwijs.Playground3d.WithMessages memory -> Eigenwijs.Playground3d.WithMessages memory) -> Eigenwijs.Playground3d.WithMessages memory -> Platform.Program () (Eigenwijs.Playground3d.Game (Eigenwijs.Playground3d.WithMessages memory)) Eigenwijs.Playground3d.Msg"},{"name":"orange","comment":" ","type":"Color.Color"},{"name":"picture","comment":" Make a picture! Here is a picture of a triangle with an eyeball:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle green 150\n            , circle white 40\n            , circle black 10\n            ]\n\n","type":"List.List Eigenwijs.Playground3d.Shape -> Platform.Program () Eigenwijs.Playground3d.Picture Eigenwijs.Playground3d.Msg"},{"name":"pictureInit","comment":" Picture init function\n","type":"() -> ( Eigenwijs.Playground3d.Picture, Platform.Cmd.Cmd Eigenwijs.Playground3d.Msg )"},{"name":"pictureSubscriptions","comment":" Picture subscriptions\n","type":"Eigenwijs.Playground3d.Picture -> Platform.Sub.Sub Eigenwijs.Playground3d.Msg"},{"name":"pictureUpdate","comment":" Picture update function\n","type":"Eigenwijs.Playground3d.Msg -> Eigenwijs.Playground3d.Picture -> ( Eigenwijs.Playground3d.Picture, Platform.Cmd.Cmd Eigenwijs.Playground3d.Msg )"},{"name":"pictureView","comment":" Picture view function\n","type":"Eigenwijs.Playground3d.Picture -> List.List Eigenwijs.Playground3d.Shape -> Html.Html Eigenwijs.Playground3d.Msg"},{"name":"pitch","comment":" Rotate shapes in degrees, along the Y axis:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 50\n                |> pitch 10\n            ]\n\n    Search Wikipedia for \"roll, pitch, yaw\" to find out why it is called \"pitch\". ;)\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"polygon","comment":" Make any shape you want! Here is a very thin triangle:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ polygon black [ ( -10, -20 ), ( 0, 100 ), ( 10, -20 ) ]\n            ]\n\n**Note:** If you [`rotate`](#rotate) a polygon, it will always rotate around\n`(0,0)`. So it is best to build your shapes around that point, and then use\n[`move`](#move) or [`group`](#group) so that rotation makes more sense.\n\n","type":"Color.Color -> List.List ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number ) -> Eigenwijs.Playground3d.Shape"},{"name":"pullUp","comment":" Pull a 2D shape \"up\" to form a 3D body:\n\n    circle blue 20\n        |> pullUp 50\n\nThis will create a flat circle \"pulled up\" (or \"extruded\") along the\nz-axis to form a 3D cylinder.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"purple","comment":" ","type":"Color.Color"},{"name":"rectangle","comment":" Make rectangles. This example makes a red cross:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ rectangle red 20 60\n            , rectangle red 60 20\n            ]\n\nYou give the color, width, and then height. So the first shape is vertical\npart of the cross, the thinner and taller part.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"red","comment":" ","type":"Color.Color"},{"name":"rgb","comment":" RGB stands for Red-Green-Blue. With these three parts, you can create any\ncolor you want. For example:\n\n    brightBlue =\n        rgb 0.1 0.6 1\n\n    brightGreen =\n        rgb 0.6 1 0.05\n\n    brightPurple =\n        rgb 0.4 0.1 0.8\n\nFor `rgb` each numer is expected to be a floating point number between 0 and 1.\nAlso see `rgb255`, where each number needs to be an integer between 0 and 255.\n\nIt can be hard to figure out what numbers to pick, so try using a color picker\nlike [paletton] to find colors that look nice together. Once you find nice\ncolors, click on the color previews to get their RGB values.\n\n[paletton]: http://paletton.com/\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Color.Color"},{"name":"rgb255","comment":" RGB stands for Red-Green-Blue. With these three parts, you can create any\ncolor you want. For example:\n\n    brightBlue =\n        rgb255 18 147 216\n\n    brightGreen =\n        rgb255 119 244 8\n\n    brightPurple =\n        rgb255 94 28 221\n\nFor `rgb255` each number needs to be an integer between 0 and 255.\nAlso see `rgb`, where each numer is expected to be a floating point number between 0 and 1.\n\nIt can be hard to figure out what numbers to pick, so try using a color picker\nlike [paletton] to find colors that look nice together. Once you find nice\ncolors, click on the color previews to get their RGB values.\n\n[paletton]: http://paletton.com/\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Color.Color"},{"name":"roll","comment":" Rotate shapes in degrees, along the X axis:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 50\n                |> roll 10\n            ]\n\n    Search Wikipedia for \"roll, pitch, yaw\" to find out why it is called \"roll\". ;)\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"rotate","comment":" Rotate shapes in degrees.\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 50\n                |> rotate 10\n            ]\n\nThe degrees go **counter-clockwise** to match the direction of the\n[unit circle](https://en.wikipedia.org/wiki/Unit_circle).\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"scale","comment":" Make a shape bigger or smaller. So if you wanted some [`words`](#words) to\nbe larger, you could say:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ words black \"Hello, nice to see you!\"\n                |> scale 3\n            ]\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"secondsBetween","comment":" Return the number of seconds between two instances of Time.\n","type":"Eigenwijs.Playground3d.Time -> Eigenwijs.Playground3d.Time -> Eigenwijs.Playground3d.Number"},{"name":"snake","comment":" Make a snake!\n","type":"Color.Color -> List.List ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number ) -> Eigenwijs.Playground3d.Shape"},{"name":"sphere","comment":" Make sphere:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ sphere green 10\n            ]\n\nYou give the color, width, height, and then depth. So the first shape is the\nvertical part of the cross, the thinner and taller part.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"spin","comment":" Create an angle that cycles from 0 to 360 degrees over time.\n\nHere is an [`animation`](#animation) with a spinning triangle:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ triangle orange 50\n            |> rotate (spin 8 time)\n        ]\n\nIt will do a full rotation once every eight seconds. Try changing the `8` to\na `2` to make it do a full rotation every two seconds. It moves a lot faster!\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Time -> Eigenwijs.Playground3d.Number"},{"name":"square","comment":" Make squares. Here are two squares combined to look like an empty box:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ square purple 80\n            , square white 60\n            ]\n\nThe number you give is the dimension of each side. So that purple square would\nbe 80 pixels by 80 pixels.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"toX","comment":" Turn the LEFT and RIGHT arrows into a number.\n\n    toX { left = False, right = False, ... } == 0\n    toX { left = True , right = False, ... } == -1\n    toX { left = False, right = True , ... } == 1\n    toX { left = True , right = True , ... } == 0\n\nSo to make a square move left and right based on the arrow keys, we could say:\n\n    import Playground exposing (..)\n\n    main =\n        game view update 0\n\n    view computer x =\n        [ square green 40\n            |> moveX x\n        ]\n\n    update computer x =\n        x + toX computer.keyboard\n\n","type":"Eigenwijs.Playground3d.Keyboard -> Eigenwijs.Playground3d.Number"},{"name":"toXY","comment":" If you just use `toX` and `toY`, you will move diagonal too fast. You will go\nright at 1 pixel per update, but you will go up/right at 1.41421 pixels per\nupdate.\n\nSo `toXY` turns the arrow keys into an `(x,y)` pair such that the distance is\nnormalized:\n\n    toXY { up = True , down = False, left = False, right = False, ... } == (1, 0)\n    toXY { up = True , down = False, left = False, right = True , ... } == (0.707, 0.707)\n    toXY { up = False, down = False, left = False, right = True , ... } == (0, 1)\n\nNow when you go up/right, you are still going 1 pixel per update.\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square green 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        let\n            ( dx, dy ) =\n                toXY computer.keyboard\n        in\n        ( x + dx, y + dy )\n\n","type":"Eigenwijs.Playground3d.Keyboard -> ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number )"},{"name":"toY","comment":" Turn the UP and DOWN arrows into a number.\n\n    toY { up = False, down = False, ... } == 0\n    toY { up = True , down = False, ... } == 1\n    toY { up = False, down = True , ... } == -1\n    toY { up = True , down = True , ... } == 0\n\nThis can be used to move characters around in games just like [`toX`](#toX):\n\n    import Playground exposing (..)\n\n    main =\n        game view update ( 0, 0 )\n\n    view computer ( x, y ) =\n        [ square blue 40\n            |> move x y\n        ]\n\n    update computer ( x, y ) =\n        ( x + toX computer.keyboard\n        , y + toY computer.keyboard\n        )\n\n","type":"Eigenwijs.Playground3d.Keyboard -> Eigenwijs.Playground3d.Number"},{"name":"triangle","comment":" Make triangles:\n\n    triangle blue 50\n\nYou give a color and then its size.\n\n","type":"Color.Color -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape"},{"name":"wave","comment":" Smoothly wave between two numbers.\n\nHere is an [`animation`](#animation) with a circle that resizes:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ circle lightBlue (wave 50 90 7 time)\n        ]\n\nThe radius of the circle will cycles between 50 and 90 every seven seconds.\nIt kind of looks like it is breathing.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Time -> Eigenwijs.Playground3d.Number"},{"name":"white","comment":" ","type":"Color.Color"},{"name":"yaw","comment":" Rotate shapes in degrees, along the Z axis:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 50\n                |> yaw 10\n            ]\n\n    Search Wikipedia for \"roll, pitch, yaw\" to find out why it is called \"yaw\". ;)\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"yellow","comment":" ","type":"Color.Color"},{"name":"zigzag","comment":" Zig zag between two numbers.\n\nHere is an [`animation`](#animation) with a rectangle that tips back and forth:\n\n    import Playground exposing (..)\n\n    main =\n        animation view\n\n    view time =\n        [ rectangle lightGreen 20 100\n            |> rotate (zigzag -20 20 4 time)\n        ]\n\nIt gets rotated by an angle. The angle cycles from -20 degrees to 20 degrees\nevery four seconds.\n\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Time -> Eigenwijs.Playground3d.Number"}],"binops":[]}]