[{"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@docs lineBetween, line, svgPath\n\n\n# Style\n\n@docs withOutline, withStroke, withFill\n\n\n# Words\n\n@docs words, withFont\n\n\n# Images\n\n@docs image\n\n\n# Move Shapes\n\n@docs move, moveUp, moveDown, moveLeft, moveRight, moveX, moveY, moveAlong, moveAlongLoop\n\n\n# Customize Shapes\n\n@docs scale, scaleX, scaleY, rotate, fade\n\n\n# Named Shapes\n\n@docs withName, nameOf, clickedName\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, Audio\n\n\n# Colors\n\n@docs Color, rgb, transparent, 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# Audio\n\n@docs gameWithAudio, AudioPort\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\n# Calculations\n\n@docs center, extent, distanceTo, collidesWith, containsPoint, toPolygon\n@docs verticesOf, pointsOf, positionOf, scaleOf, rotationOf\n\n\n# Generating lists of coordinates (paths)\n\n@docs pathFromCommands, forward, turn, turnTo\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":["msg"],"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":"Audio","comment":" Find out things about the audio system, such as the time that the audio has\nbeen running in seconds, and whether the audio system is ready to use (available\nor not).\n","args":[],"type":"{ time : Basics.Float, available : Basics.Bool }"},{"name":"AudioPort","comment":" The AudioPort connects our Elm game to a piece of javascript in the html file the game is embedded in,\nso it can access the WebAudio API. Use in your game program as follows:\n\n    port module Main exposing (main)\n\n    import Eigenwijs.Playground\n\n    port toWebAudio : Eigenwijs.Playground.AudioPort msg\n\n","args":["msg"],"type":"Json.Encode.Value -> Platform.Cmd.Cmd 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\nWhen you use [`gameWithAudio`](#gameWithAudio), you have access to the audio\ncontext from the passed computer parameter, for instance to be able to use\nthe current audio time. This `audio` field is also available in the computer\nparameter passed to your update function. It is a `Maybe AudioContext`, to be\nable to still run your program even when the context is unavailable. (That can\nhappen if initialisation of the context via parsed program flags failed.)\n\n","args":[],"type":"{ mouse : Eigenwijs.Playground.Mouse, keyboard : Eigenwijs.Playground.Keyboard, screen : Eigenwijs.Playground.Screen, time : Eigenwijs.Playground.Time, audio : Eigenwijs.Playground.Audio }"},{"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, or ask for `computer.mouse.clickedNames`\nto see which named shapes are clicked.\n\n","args":[],"type":"{ x : Eigenwijs.Playground.Number, y : Eigenwijs.Playground.Number, down : Basics.Bool, click : Basics.Bool, clickedNames : List.List String.String }"},{"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 Eigenwijs.Playground.Msg)) -> 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 Eigenwijs.Playground.Msg)) -> 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":"center","comment":" Extracts the center from any shape.\n","type":"Eigenwijs.Playground.Shape msg -> ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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 msg"},{"name":"clickedName","comment":" Detect when a named shape is clicked. Use with `withName`.\n","type":"String.String -> Eigenwijs.Playground.Mouse -> Basics.Bool"},{"name":"collidesWith","comment":" Indicates whether two (groups of) shapes collide.\n","type":"Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg -> Basics.Bool"},{"name":"containsPoint","comment":" Returns true if the point (x, y) lies within the shape.\n","type":"( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Shape msg -> Basics.Bool"},{"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":"distanceTo","comment":" Calculates the distance between two shapes, taking their sizes into account:\n\n    shape1 =\n        circle red 50\n\n    shape2 =\n        circle red 20\n            |> move 100 40\n\n    distanceToCollision =\n        shape2\n            |> distanceTo shape1\n\n","type":"Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Number"},{"name":"extent","comment":" Calculates (the currently very crude approximation of) the extent (size) of any (group of) shape(s).\n","type":"Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Number"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"name":"forward","comment":" For use with pathFromCommands: move n steps forward.\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Cursor -> Eigenwijs.Playground.Cursor"},{"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.Msg)) -> (Eigenwijs.Playground.Computer -> memory -> memory) -> memory -> Platform.Program Json.Decode.Value (Eigenwijs.Playground.Game memory) Eigenwijs.Playground.Msg"},{"name":"gameInit","comment":" Game init function\n","type":"memory -> Json.Decode.Value -> ( 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.Msg)) -> Eigenwijs.Playground.Game memory -> Html.Html Eigenwijs.Playground.Msg"},{"name":"gameWithAudio","comment":" Create a game with web audio elements such as oscillators.\n\nThis is still a work in progress, more documentation and tuning of the api is to come.\n\n","type":"Eigenwijs.Playground.AudioPort Eigenwijs.Playground.Msg -> (Eigenwijs.Playground.Computer -> memory -> List.List WebAudio.Node) -> (Eigenwijs.Playground.Computer -> memory -> List.List (Eigenwijs.Playground.Shape Eigenwijs.Playground.Msg)) -> (Eigenwijs.Playground.Computer -> memory -> memory) -> memory -> Platform.Program Json.Decode.Value (Eigenwijs.Playground.Game memory) 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 msg) -> Eigenwijs.Playground.Shape msg"},{"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 msg"},{"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 msg"},{"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":"line","comment":" Draw a line with specified thickness from a list of coordinates\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Shape msg"},{"name":"lineBetween","comment":" Draw a line between two points with specified thickness\n","type":"( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Color -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"name":"moveAlong","comment":" Move a shape along a path, specified by a list of coordinate-pairs,\nand a number between 0 and 1, where 0 corresponds with the start of the\npath and 1 indicates arriving at the end, the last coordinate in the list.\nSo in the example below, the circle is moved halfway on the path:\n\n    circle red 50\n        |> moveAlong [ ( 100, 0 ), ( 200, 200 ), ( 400, 200 ) ] 0.5\n\n","type":"List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"name":"moveAlongLoop","comment":" Move a shape along a path, just like with moveAlong, but by adding the first\npoint also as the last one, we make sure that when amount reaches 1, we end up\nback at the beginning of the path. In this way you can keep looping from 0 to 1\nand continue from 0 again.\n","type":"List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"name":"nameOf","comment":" Return the name of a shape if it was given one.\n\n    let\n        namedSquare =\n            square red 50 |> withName \"The Square\"\n    in\n    case nameOf namedSquare of\n        Nothing ->\n            \"unnamed shape\"\n\n        Just name ->\n            \"a shape named \" ++ name\n\n","type":"Eigenwijs.Playground.Shape Eigenwijs.Playground.Msg -> Maybe.Maybe String.String"},{"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 msg"},{"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 msg"},{"name":"pathFromCommands","comment":" Make a list of coordinates starting from point (0, 0) adding new points\nfrom a recipe; a list of commands, such as:\n\n    main =\n        picture [ polygon green trousers ]\n\n    trousers =\n        pathFromCommands\n            [ forward 55\n            , turn -92\n            , forward 100\n            , turnTo 180\n            , forward 20\n            , turn -88\n            , forward 80\n            , turn 176\n            , forward 80\n            , turnTo 180\n            , forward 20\n            , turn -88\n            ]\n\n","type":"List.List Eigenwijs.Playground.CursorTransform -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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 msg"},{"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 Eigenwijs.Playground.PictureMsg) -> 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 Eigenwijs.Playground.PictureMsg) -> Html.Html Eigenwijs.Playground.PictureMsg"},{"name":"pointsOf","comment":" This function is the same as `verticesOf` (\"vertices\" is a more formal way\nof saying \"points\" or \"coordinates\").\n","type":"Eigenwijs.Playground.Shape msg -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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 msg"},{"name":"positionOf","comment":" Returns the position of a shape, as a pair (x, y).\n","type":"Eigenwijs.Playground.Shape msg -> ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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 msg"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"name":"rotationOf","comment":" Returns the angle of rotation of a shape.\n","type":"Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Number"},{"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 msg -> Eigenwijs.Playground.Shape msg"},{"name":"scaleOf","comment":" Returns the scaling set on a shape, as a pair (horizontalScaling, verticalScaling).\n","type":"Eigenwijs.Playground.Shape msg -> ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"name":"scaleX","comment":" Make a shape's width bigger or smaller. So if you wanted a [`triangle`](#triangle) to\nbe wider, you could say:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 20\n                |> scaleX 3\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"name":"scaleY","comment":" Make a shape's height bigger or smaller. So if you wanted a [`triangle`](#triangle) to\nbe taller, you could say:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ triangle black 20\n                |> scaleY 3\n            ]\n\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"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 msg"},{"name":"svgPath","comment":" Create a path from svg path string\n","type":"Eigenwijs.Playground.Color -> String.String -> Eigenwijs.Playground.Shape msg"},{"name":"toPolygon","comment":" Convert any shape to a polygon representation of it (a circle would get\ntranslated into an approximation of a circle using line segments, currently\nan octagon). This can be used to create a polygon from a group of arranged\nbasic shapes, as an alternative way definition; it is sometimes easier than\nenumerating all the points one by one as coordinate pairs.\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"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":"transparent","comment":" ","type":"Eigenwijs.Playground.Color"},{"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 msg"},{"name":"turn","comment":" For use with pathFromCommands: turn n degrees counter clockwise.\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Cursor -> Eigenwijs.Playground.Cursor"},{"name":"turnTo","comment":" For use with pathFromCommands: change direction to the angle n in degrees, turning counter clockwise.\n","type":"Eigenwijs.Playground.Number -> Eigenwijs.Playground.Cursor -> Eigenwijs.Playground.Cursor"},{"name":"verticesOf","comment":" Returns a list of vertices (points) corresponding to the circumference of\nthe shape. If the shape is circular, this returns an approximating polygon.\n","type":"Eigenwijs.Playground.Shape msg -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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":"withFill","comment":" Change the fill color of a shape. This also enables you to add a fill color\nto a line or svgPath shape.\n","type":"Eigenwijs.Playground.Color -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"name":"withFont","comment":" Change the font used for the words within shapes:\n\n    import Playground exposing (..)\n\n    main =\n        picture\n            [ words black \"Hello world\"\n                |> withFont \"sans-serif\"\n            ]\n\n","type":"String.String -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"name":"withName","comment":" Name a shape. This lets you set a name for a shape, so you can detect when\nit is clicked.\n\n    import Playground exposing (..)\n\n    main =\n        game view update {}\n\n    view computer memory =\n        [ square\n            (if computer.mouse |> clickedName \"little square\" then\n                red\n\n             else\n                green\n            )\n            30\n            |> withName \"little square\"\n        ]\n\n    update computer memory =\n        memory\n\n","type":"String.String -> Eigenwijs.Playground.Shape Eigenwijs.Playground.Msg -> Eigenwijs.Playground.Shape Eigenwijs.Playground.Msg"},{"name":"withOutline","comment":" Add an outline to shapes with specified color and thickness.\n","type":"Eigenwijs.Playground.Color -> Basics.Float -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"name":"withStroke","comment":" Add an outline to shapes with specified color and thickness.\n","type":"Eigenwijs.Playground.Color -> Basics.Float -> Eigenwijs.Playground.Shape msg -> Eigenwijs.Playground.Shape msg"},{"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 msg"},{"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# Compatibility with the original Playground library\n\nThis library exports the same functions and types except for (for the time being):\n\n  - oval, pentagon, hexagon, octagon (just some grunt work)\n  - image\n  - Color (Color is imported from the package avh4/elm-color)\n\nThe following primitives work in a (slightly) different way:\n\n  - words (are rendered using a pixel font - actually Mogee from the kuzminadya/mogeefont package)\n  - move (takes an additional z-coordinate)\n  - Shape (also adds a z-coordinate, and has roll, pitch, yaw instead of only a single angle)\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, cone, cube, block, prism, obj\n\n\n# Words\n\n@docs words\n\n\n# Move Shapes\n\n@docs move, moveX, moveY, moveZ, moveAlong, moveAlongLoop\n\n\n# Customize Shapes\n\n@docs scale, rotate, roll, pitch, yaw, fade\n\n\n# Groups, extrusion, optimization\n\n@docs group, extrude, pullUp, prerendered\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, networkGameWithCamera, Connection\n\n\n# Playground Cameras\n\n@docs isometric, orbit, eyesAt, lookAt, pan, tilt, zoom\n\n\n# Naming and calculations\n\n@docs withName, whereIs, center, extent, extents\n@docs positionOf\n\n\n# Physics\n\n@docs emptyWorld, withGravity, withShapes, withDynamicShapes\n@docs withWeight, kilograms, grams\n@docs weightOf, inKilograms, inGrams\n@docs simulate, simulateFor, shapesFromWorld\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 : Eigenwijs.Playground3d.Number }"},{"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":"{ screen : Eigenwijs.Playground3d.Screen, font : Maybe.Maybe Eigenwijs.Playground3d.Font }"},{"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":"center","comment":" Extracts the position from any shape.\n","type":"Eigenwijs.Playground3d.Shape -> ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number )"},{"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":"cone","comment":" Make cones:\n\n    spike =\n        cone 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":"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":"emptyWorld","comment":" Create an empty physics simulated world to add playground shapes to. Use it\nfor example like this:\n\n    init =\n        { world =\n            emptyWorld\n                |> withGravity 9.81\n                |> withShapes\n                    [ square black 500\n                    ]\n                |> withDynamicShapes\n                    [ cylinder blue 50 100 |> move 100 100 100 |> withWeight (kilograms 10)\n                    , cube yellow 50 |> move 60 90 300\n                    , block red 50 50 100 |> move 100 -100 150\n                    , sphere green 50 |> move 70 80 400\n                    ]\n        }\n\n","type":"Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"entity","comment":" Add a 3D shape to a Scene3D scene as an entity.\n","type":"Eigenwijs.Playground3d.Shape -> Scene3d.Entity Eigenwijs.Playground3d.Shape"},{"name":"extent","comment":" Calculates the extent from origin (radius) of a sphere that roughly circumscribes the (group of) shape(s).\nTODO: Needs a refactor where offset centers are taken into account within a group.\n","type":"Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Number"},{"name":"extents","comment":" Calculates the extents per axis of any (group of) shape(s). Extent in this case\nmeans from the center of the object to its edge (a \"radius\"), so it can directly\nbe used in calculations from the origin of the objects.\n","type":"Eigenwijs.Playground3d.Shape -> ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number )"},{"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":"grams","comment":" Specify mass (weight) in grams.\n","type":"Eigenwijs.Playground3d.Number -> Mass.Mass"},{"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":"inGrams","comment":" Return a mass (weight) in grams.\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Number"},{"name":"inKilograms","comment":" Return a mass (weight) in kilograms.\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Number"},{"name":"isometric","comment":" Create an isometric camera\n","type":"Eigenwijs.Playground3d.Camera"},{"name":"kilograms","comment":" Specify mass (weight) in kilograms.\n","type":"Eigenwijs.Playground3d.Number -> Mass.Mass"},{"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":"moveAlong","comment":" Move a shape along a path, specified by a list of coordinate-pairs,\nand a number between 0 and 1, where 0 corresponds with the start of the\npath and 1 indicates arriving at the end, the last coordinate in the list.\nSo in the example below, the circle is moved halfway on the path:\n\n    cube red 50\n        |> moveAlong [ ( 100, 0, 0 ), ( 200, 200, 0 ), ( 400, 200, 100 ) ] 0.5\n\n","type":"List.List ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number ) -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"moveAlongLoop","comment":" Move a shape along a path, just like with moveAlong, but by adding the first\npoint also as the last one, we make sure that when amount reaches 1, we end up\nback at the beginning of the path. In this way you can keep looping from 0 to 1\nand continue from 0 again.\n","type":"List.List ( Eigenwijs.Playground3d.Number, 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":"networkGameWithCamera","comment":" Create a network game using a specific camera for viewing the scene!\n","type":"(Eigenwijs.Playground3d.WithMessages memory -> Eigenwijs.Playground3d.Camera) -> 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":"obj","comment":" Make 3d objects from vertices and faces, such as a pyramid:\n\n    import Playground3d exposing (..)\n\n    main =\n        picture\n            [ obj\n                [ ( 1, 1, -1 )\n                , ( 1, -1, -1 )\n                , ( -1, -1, -1 )\n                , ( -1, 1, -1 )\n                , ( 0, 0, 1 )\n                ]\n                [ ( 1, 2, 3 )\n                , ( 3, 4, 1 )\n                , ( 1, 4, 5 )\n                , ( 5, 4, 3 )\n                , ( 3, 2, 5 )\n                , ( 5, 2, 1 )\n                ]\n            ]\n\n","type":"Color.Color -> List.List ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number ) -> List.List ( Basics.Int, Basics.Int, Basics.Int ) -> Eigenwijs.Playground3d.Shape"},{"name":"orange","comment":" ","type":"Color.Color"},{"name":"orbit","comment":" Create a camera orbiting the target set with `lookAt`, with a specified\nazimuth, elevation (in degrees) and distance\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera"},{"name":"pan","comment":" Pan the camera for a specified number of degrees.\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera -> Eigenwijs.Playground3d.Camera"},{"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":"positionOf","comment":" Returns the position of a shape, as a tuple (x, y, z).\n","type":"Eigenwijs.Playground3d.Shape -> ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number )"},{"name":"prerendered","comment":" 3D shapes can be quite intensive to render, so it is best to render the more\ncomplex shapes into an 3D entity once and then draw this prerendered version in\nthe view. You can still use transformation functions from the `Scene3d` package\nsuch as translation and rotation on the prerendered entities.\n\nFor instance if you would like to prerender parts of your snow dog avatar but\nstill want to animate its head:\n\n    snowdog time =\n        group\n            [ head white\n                |> prerendered\n                |> move 50 0 70\n                |> yaw (wave -30 30 6 time)\n                |> pitch (wave -10 10 3 time)\n            , group\n                [ cylinder white 15 80 |> pitch 90 |> moveZ 50\n                , leg |> move 35 10 20\n                , leg |> move 35 -10 20\n                , leg |> move -35 10 20\n                , leg |> move -35 -10 20\n                , cylinder white 7 50 |> pitch -45 |> move -50 0 75\n                ]\n                |> prerendered\n            ]\n\n    leg =\n        cylinder white 10 40\n\n    head color =\n        group\n            [ sphere color 25\n            , sphere color 10 |> move 25 0 -5\n            , sphere black 5 |> move 35 0 -5\n            , sphere black 5 |> move 17 12 5\n            , sphere black 5 |> move 17 -12 5\n            , triangle color 20\n                |> move -5 12 37\n                |> yaw 170\n                |> pitch 83\n                |> roll 2\n                |> scale 0.4\n            , triangle color 20\n                |> move -5 -12 37\n                |> yaw 190\n                |> pitch 83\n                |> roll -2\n                |> scale 0.4\n            ]\n\n","type":"Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"prism","comment":" Make a prism\n","type":"Color.Color -> 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":"shapesFromWorld","comment":" Get the shapes from the simulated world to be able to render them inside a\nview for example:\n\n    view computer memory =\n        shapesFromWorld memory.world\n\n","type":"Physics.World.World Eigenwijs.Playground3d.Shape -> List.List Eigenwijs.Playground3d.Shape"},{"name":"simulate","comment":" Simulate the world. For use in the `update` function:\n\n    update computer memory =\n        { memory\n            | world = simulate memory.world\n        }\n\n","type":"Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"simulateFor","comment":" Simulate the world with a step of a specified duration.\n","type":"Duration.Duration -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"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":"tilt","comment":" Tilt the camera for a specified number of degrees.\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera -> Eigenwijs.Playground3d.Camera"},{"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":"weightOf","comment":" Returns the weight of a shape as a Mass value (set with `withWeigth`).\n","type":"Eigenwijs.Playground3d.Shape -> Mass.Mass"},{"name":"whereIs","comment":" Finds out where named shapes are within a scene (another shape, maybe a group).\n","type":"String.String -> Eigenwijs.Playground3d.Shape -> List.List ( Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number, Eigenwijs.Playground3d.Number )"},{"name":"white","comment":" ","type":"Color.Color"},{"name":"withDynamicShapes","comment":" Add dynamic shapes to the simulated world. These shapes will have weight.\nThey are subject to gravity and other forces.\n","type":"List.List Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"withGravity","comment":" Add gravity (meters per second squared) to the simulated world.\n","type":"Eigenwijs.Playground3d.Number -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"withName","comment":" Name a shape. This lets you set a name for a shape, so you can detect when\nit is clicked.\n\n    import Playground exposing (..)\n\n    main =\n        game view update {}\n\n    view computer memory =\n        [ square\n            (if computer.mouse |> clickedName \"little square\" then\n                red\n\n             else\n                green\n            )\n            30\n            |> withName \"little square\"\n        ]\n\n    update computer memory =\n        memory\n\n","type":"String.String -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"name":"withShapes","comment":" Add static shapes to the simulated world. They will stay where they are\nput.\n","type":"List.List Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"withWeight","comment":" Set the weight (actually the mass) for a shape. For example:\n\n    cylinder blue 50 100 |> withWeight (kilograms 10)\n\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"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":"Color.Color -> String.String -> Eigenwijs.Playground3d.Shape"},{"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"},{"name":"zoom","comment":" Let the camera zoom in (factor > 1) or out (factor < 1, while greater than 0 -\nif not, the zoom factor will be just 1).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera -> Eigenwijs.Playground3d.Camera"}],"binops":[]}]