[{"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, svgShape\n\n\n# Sounds\n\n@docs sound\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, minkowski\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":"minkowski","comment":" Calculate the Minkovski \"difference\" as used for computing intersection of\nconvex shapes: see <https://en.wikipedia.org/wiki/Minkowski_addition>\nIt is the Minkovski sum, where for each point in list `a` a list of new points\nis generated consisting where the `a` point's coordinates are subtracted from\neach point in `b`. The resulting list of points form a shape that will only\ncontain the origin if the two convex shapes intersect.\n","type":"List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number ) -> List.List ( Eigenwijs.Playground.Number, Eigenwijs.Playground.Number )"},{"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":"sound","comment":" Add sound to your picture, animation or game!\n\n    main =\n        picture [ circle yellow 50, sound \"https://example.com/sound.mp3\" ]\n\n","type":"String.String -> 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":"svgShape","comment":" Use an svg image as a shape\n","type":"Svg.Svg msg -> 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.Playground.Experimental","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# Sounds\n\n@docs sound\n\n\n# Style\n\n@docs withOutline, withStroke, withFill, clip, only, cutTo\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# Hyperlinking\n\n@docs link\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, minkowski\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.Experimental.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.Experimental.Mouse, keyboard : Eigenwijs.Playground.Experimental.Keyboard, screen : Eigenwijs.Playground.Experimental.Screen, time : Eigenwijs.Playground.Experimental.Time, audio : Eigenwijs.Playground.Experimental.Audio }"},{"name":"GameMsg","comment":" Game message alias\n","args":[],"type":"Eigenwijs.Playground.Experimental.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.Experimental.Number, y : Eigenwijs.Playground.Experimental.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.Experimental.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.Experimental.Number, height : Eigenwijs.Playground.Experimental.Number, top : Eigenwijs.Playground.Experimental.Number, left : Eigenwijs.Playground.Experimental.Number, right : Eigenwijs.Playground.Experimental.Number, bottom : Eigenwijs.Playground.Experimental.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.Experimental.Time -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg)) -> Platform.Program () Eigenwijs.Playground.Experimental.Animation Eigenwijs.Playground.Experimental.Msg"},{"name":"animationInit","comment":" Animation init\n","type":"() -> ( Eigenwijs.Playground.Experimental.Animation, Platform.Cmd.Cmd Eigenwijs.Playground.Experimental.Msg )"},{"name":"animationSubscriptions","comment":" Animation subscriptions\n","type":"Platform.Sub.Sub Eigenwijs.Playground.Experimental.Msg"},{"name":"animationUpdate","comment":" Animation update function\n","type":"Eigenwijs.Playground.Experimental.Msg -> Eigenwijs.Playground.Experimental.Animation -> Eigenwijs.Playground.Experimental.Animation"},{"name":"animationView","comment":" Animation view\n","type":"Eigenwijs.Playground.Experimental.Animation -> (Eigenwijs.Playground.Experimental.Time -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg)) -> Html.Html Eigenwijs.Playground.Experimental.Msg"},{"name":"beginOfTime","comment":" BeginOfTime\n","type":"Eigenwijs.Playground.Experimental.Time"},{"name":"black","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"blue","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"brown","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"center","comment":" Extracts the center from any shape.\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number )"},{"name":"charcoal","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"clickedName","comment":" Detect when a named shape is clicked. Use with `withName`.\n","type":"String.String -> Eigenwijs.Playground.Experimental.Mouse -> Basics.Bool"},{"name":"clip","comment":" Clip a shape using another shape.\n\n    circle red 50\n        |> clip (rectangle 100 10)\n\n","type":"List.List (Eigenwijs.Playground.Experimental.Shape msg) -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"collidesWith","comment":" Indicates whether two (groups of) shapes collide.\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg -> Basics.Bool"},{"name":"containsPoint","comment":" Returns true if the point (x, y) lies within the shape.\n","type":"( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Shape msg -> Basics.Bool"},{"name":"cutTo","comment":" `cutTo` is the same as clip but might confuse less (experimental).\n\n    circle red 50\n        |> cutTo (rectangle 100 10)\n\n","type":"List.List (Eigenwijs.Playground.Experimental.Shape msg) -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"darkBlue","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkBrown","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkCharcoal","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkGray","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkGreen","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkGrey","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkOrange","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkPurple","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkRed","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"darkYellow","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Number"},{"name":"extent","comment":" Calculates (the currently very crude approximation of) the extent (size) of any (group of) shape(s).\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"forward","comment":" For use with pathFromCommands: move n steps forward.\n","type":"Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Cursor -> Eigenwijs.Playground.Experimental.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.Experimental.Computer -> memory -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg)) -> (Eigenwijs.Playground.Experimental.Computer -> memory -> memory) -> memory -> Platform.Program Json.Decode.Value (Eigenwijs.Playground.Experimental.Game memory) Eigenwijs.Playground.Experimental.Msg"},{"name":"gameInit","comment":" Game init function\n","type":"memory -> Json.Decode.Value -> ( Eigenwijs.Playground.Experimental.Game memory, Platform.Cmd.Cmd Eigenwijs.Playground.Experimental.Msg )"},{"name":"gameSubscriptions","comment":" Game subscriptions\n","type":"Eigenwijs.Playground.Experimental.Game memory -> Platform.Sub.Sub Eigenwijs.Playground.Experimental.Msg"},{"name":"gameUpdate","comment":" Game update function\n","type":"(Eigenwijs.Playground.Experimental.Computer -> memory -> memory) -> Eigenwijs.Playground.Experimental.Msg -> Eigenwijs.Playground.Experimental.Game memory -> Eigenwijs.Playground.Experimental.Game memory"},{"name":"gameView","comment":" Game view function\n","type":"(Eigenwijs.Playground.Experimental.Computer -> memory -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg)) -> Eigenwijs.Playground.Experimental.Game memory -> Html.Html Eigenwijs.Playground.Experimental.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.Experimental.AudioPort Eigenwijs.Playground.Experimental.Msg -> (Eigenwijs.Playground.Experimental.Computer -> memory -> List.List WebAudio.Node) -> (Eigenwijs.Playground.Experimental.Computer -> memory -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg)) -> (Eigenwijs.Playground.Experimental.Computer -> memory -> memory) -> memory -> Platform.Program Json.Decode.Value (Eigenwijs.Playground.Experimental.Game memory) Eigenwijs.Playground.Experimental.Msg"},{"name":"gray","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"green","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"grey","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Shape msg) -> Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> String.String -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"lightBlue","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightBrown","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightCharcoal","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightGray","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightGreen","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightGrey","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightOrange","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightPurple","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightRed","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"lightYellow","comment":" ","type":"Eigenwijs.Playground.Experimental.Color"},{"name":"line","comment":" Draw a line with specified thickness from a list of coordinates\n","type":"Eigenwijs.Playground.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"lineBetween","comment":" Draw a line between two points with specified thickness\n","type":"( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"link","comment":" Make a shape link to a website:\n\n    circle red 50\n        |> link \"https://elm-lang.org\"\n\n","type":"String.String -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"minkowski","comment":" Calculate the Minkovski \"difference\" as used for computing intersection of\nconvex shapes: see <https://en.wikipedia.org/wiki/Minkowski_addition>\nIt is the Minkovski sum, where for each point in list `a` a list of new points\nis generated consisting where the `a` point's coordinates are subtracted from\neach point in `b`. The resulting list of points form a shape that will only\ncontain the origin if the two convex shapes intersect.\n","type":"List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number )"},{"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.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Shape Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"only","comment":" `only` is the same as clip and might read better (experimental).\n\n    circle red 50\n        |> only (rectangle 100 10)\n\n","type":"List.List (Eigenwijs.Playground.Experimental.Shape msg) -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"orange","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.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.Experimental.CursorTransform -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.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.Experimental.Shape Eigenwijs.Playground.Experimental.PictureMsg) -> Platform.Program () Eigenwijs.Playground.Experimental.Picture Eigenwijs.Playground.Experimental.PictureMsg"},{"name":"pictureInit","comment":" Picture init function\n","type":"() -> ( Eigenwijs.Playground.Experimental.Picture, Platform.Cmd.Cmd Eigenwijs.Playground.Experimental.PictureMsg )"},{"name":"pictureSubscriptions","comment":" Picture subscriptions\n","type":"Eigenwijs.Playground.Experimental.Picture -> Platform.Sub.Sub Eigenwijs.Playground.Experimental.PictureMsg"},{"name":"pictureUpdate","comment":" Picture update function\n","type":"Eigenwijs.Playground.Experimental.PictureMsg -> Eigenwijs.Playground.Experimental.Picture -> ( Eigenwijs.Playground.Experimental.Picture, Platform.Cmd.Cmd Eigenwijs.Playground.Experimental.PictureMsg )"},{"name":"pictureView","comment":" Picture view function\n","type":"Eigenwijs.Playground.Experimental.Picture -> List.List (Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.PictureMsg) -> Html.Html Eigenwijs.Playground.Experimental.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.Experimental.Shape msg -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.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.Experimental.Color -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number ) -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"positionOf","comment":" Returns the position of a shape, as a pair (x, y).\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.Number )"},{"name":"purple","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"red","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"rotationOf","comment":" Returns the angle of rotation of a shape.\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"scaleOf","comment":" Returns the scaling set on a shape, as a pair (horizontalScaling, verticalScaling).\n","type":"Eigenwijs.Playground.Experimental.Shape msg -> ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"sound","comment":" Add sound to your picture, animation or game!\n\n    main =\n        picture [ circle yellow 50, sound \"https://example.com/sound.mp3\" ]\n\n","type":"String.String -> Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Time -> Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"svgPath","comment":" Create a path from svg path string\n","type":"Eigenwijs.Playground.Experimental.Color -> String.String -> Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Keyboard -> Eigenwijs.Playground.Experimental.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.Experimental.Keyboard -> ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.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.Experimental.Keyboard -> Eigenwijs.Playground.Experimental.Number"},{"name":"transparent","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"turn","comment":" For use with pathFromCommands: turn n degrees counter clockwise.\n","type":"Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Cursor -> Eigenwijs.Playground.Experimental.Cursor"},{"name":"turnTo","comment":" For use with pathFromCommands: change direction to the angle n in degrees, turning counter clockwise.\n","type":"Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Cursor -> Eigenwijs.Playground.Experimental.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.Experimental.Shape msg -> List.List ( Eigenwijs.Playground.Experimental.Number, Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Time -> Eigenwijs.Playground.Experimental.Number"},{"name":"white","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Color -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Shape Eigenwijs.Playground.Experimental.Msg -> Eigenwijs.Playground.Experimental.Shape Eigenwijs.Playground.Experimental.Msg"},{"name":"withOutline","comment":" Add an outline to shapes with specified color and thickness.\n","type":"Eigenwijs.Playground.Experimental.Color -> Basics.Float -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"withStroke","comment":" Add an outline to shapes with specified color and thickness.\n","type":"Eigenwijs.Playground.Experimental.Color -> Basics.Float -> Eigenwijs.Playground.Experimental.Shape msg -> Eigenwijs.Playground.Experimental.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.Experimental.Color -> String.String -> Eigenwijs.Playground.Experimental.Shape msg"},{"name":"yellow","comment":" ","type":"Eigenwijs.Playground.Experimental.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.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Number -> Eigenwijs.Playground.Experimental.Time -> Eigenwijs.Playground.Experimental.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# Cameras (views)\n\n@docs isometric, orbit, viewFrom, eyesAt, lookAt, pan, tilt, shift, zoom\n\n\n# Naming and calculations\n\n@docs withName, nameOf, whereIs, center, extent, extents\n@docs positionOf\n\n\n# Physics\n\n\n## Physics world\n\n@docs emptyWorld, withGravity, withShapes, withDynamicShapes\n@docs simulate, simulateFor, shapesFromWorld, shapeNamed\n\n\n## Physics shape properties\n\n@docs withWeight, withMass, kilograms, grams\n@docs weightOf, massOf, inKilograms, inGrams\n@docs withFriction, frictionOf\n@docs withBounciness, bouncinessOf\n\n\n## Physics updates and actions\n\n@docs updateWorldShapes, updateShapeNamed\n@docs moveTo, moveBy, moveIn, moveForward\n@docs rotateAround\n@docs pushForward, pushBackward, pushLeft, pushRight, pushUp, pushDown, push\n@docs transform\n\n\n## Physics constraints\n\n@docs lockPositionTo, keepDistanceTo, hingeTo\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":"bouncinessOf","comment":" Return the set amount of bounciness for the given shape. If not set this\nvalue is 0, the physics calculations default.\n","type":"Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Number"},{"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":"frictionOf","comment":" Return the set amount of friction for the given shape. If not set this\nvalue is 0.3, the physics calculations default.\n","type":"Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Number"},{"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":"hingeTo","comment":" Connect a shape to another shape with the specified name via a hinge\nconstraint that keeps the relative positions and allows rotation along the\ny-axes of the shapes (relative to the individual shapes).\n","type":"String.String -> 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":"keepDistanceTo","comment":" Connect a shape to another shape with the specified name via a constraint\nthat keeps the distance of the shape to the named shape fixed.\n","type":"String.String -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"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":"lockPositionTo","comment":" Connect a shape to another shape with the specified name via a constraint\nthat keeps the position of the shape relative to the named shape fixed.\n","type":"String.String -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"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":"massOf","comment":" Returns the mass of a shape as a Mass value (set with `withMass`).\n","type":"Eigenwijs.Playground3d.Shape -> Mass.Mass"},{"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":"moveBy","comment":" Move a shape that was added to the physics world by a specified\ntranslation relative to the world.\n","type":"Vector3d.Vector3d Length.Meters Physics.Coordinates.WorldCoordinates -> Eigenwijs.Playground3d.Action"},{"name":"moveForward","comment":" Move a shape that was added to the physics world forward along its\nx-axis (so it is relative to the current orientation of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"moveIn","comment":" Move a shape that was added to the physics world in a specified\ndirection relative to the shape.\n","type":"Direction3d.Direction3d Physics.Coordinates.BodyCoordinates -> Length.Length -> Eigenwijs.Playground3d.Action"},{"name":"moveTo","comment":" ","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"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":"nameOf","comment":" Return the name of the given shape; if no name was set it returns an empty\nstring `\"\"`.\n","type":"Eigenwijs.Playground3d.Shape -> String.String"},{"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":"push","comment":" Push a shape that was added to the physics world along a specified\naxis relative to the shape, with an amount of force (Newtons), at a\nspecific point on the shape (specified relative to the shape).\n","type":"{ force : Force.Force, direction : Direction3d.Direction3d Physics.Coordinates.BodyCoordinates, at : Point3d.Point3d Length.Meters Physics.Coordinates.BodyCoordinates } -> Eigenwijs.Playground3d.Action"},{"name":"pushBackward","comment":" Push a shape that was added to the physics world backward (in the\nopposite direction of the x-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"pushDown","comment":" Push a shape that was added to the physics world down (in the\nopposite direction of the z-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"pushForward","comment":" Push a shape that was added to the physics world forward (in the\ndirection of the x-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"pushLeft","comment":" Push a shape that was added to the physics world the left (in the\nopposite direction of the y-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"pushRight","comment":" Push a shape that was added to the physics world to the right (in the\ndirection of the y-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"name":"pushUp","comment":" Push a shape that was added to the physics world up (in the\ndirection of the z-axis of the shape).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Action"},{"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":"rotateAround","comment":" Rotate a shape that was added to the physics world along a specified\naxis relative to the shape.\n","type":"Axis3d.Axis3d Length.Meters Physics.Coordinates.WorldCoordinates -> Angle.Angle -> Eigenwijs.Playground3d.Action"},{"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":"shapeNamed","comment":" Search the world for a shape with the specified name. Return `Nothing` if\nno shape is found, and `Just shape` when it was found. It returns only the\nfirst shape found.\n","type":"String.String -> Physics.World.World Eigenwijs.Playground3d.Shape -> Maybe.Maybe Eigenwijs.Playground3d.Shape"},{"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":"shift","comment":" Shift the camera along the x, y, and z axis (in centimeters).\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Camera -> Eigenwijs.Playground3d.Camera"},{"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":"transform","comment":" Transform a shape that was added to the physics world using the familiar\ntransforms of the playground, such as `roll`, `pitch`, `yaw`, `move` and\n`scale`.\n","type":"List.List (Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape) -> Eigenwijs.Playground3d.Action"},{"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":"updateShapeNamed","comment":" Update the shape(s) with the specified name using actions such as\n`pushForward` and `transform`.\n","type":"String.String -> List.List Eigenwijs.Playground3d.Action -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"updateWorldShapes","comment":" Update the shapes added to the physics world using actions such as\n`pushForward`.\n","type":"(Eigenwijs.Playground3d.Shape -> List.List Eigenwijs.Playground3d.Action) -> Physics.World.World Eigenwijs.Playground3d.Shape -> Physics.World.World Eigenwijs.Playground3d.Shape"},{"name":"viewFrom","comment":" Return a camera with the location and orientation of the specified shape.\nAs if the shape would be the eyes! 8)\n","type":"Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Camera"},{"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` or\n`withMass`).\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":"withBounciness","comment":" Set the amount of bounciness for a shape. The default bounciness is 0.\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> Eigenwijs.Playground3d.Shape"},{"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":"withFriction","comment":" Set the amount of friction for a shape. The default friction is 0.3.\n","type":"Eigenwijs.Playground3d.Number -> Eigenwijs.Playground3d.Shape -> 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":"withMass","comment":" Set the mass for a shape. For example:\n\n    cylinder blue 50 100 |> withMass (kilograms 10)\n\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Shape -> 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":[]},{"name":"Eigenwijs.Playground3d.Experimental","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, objFile\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# Music and sound\n\n@docs sound\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# Configurations\n\n@docs configuration, withCamera, withObjUrls\n@docs configuredPicture, configuredAnimation, configuredGame\n@docs Configuration, Connection\n\n\n# Cameras (views)\n\n@docs isometric, orbit, viewFrom, eyesAt, lookAt, pan, tilt, shift, zoom\n\n\n# Naming and calculations\n\n@docs withName, nameOf, whereIs, center, extent, extents\n@docs positionOf\n\n\n# Physics\n\n\n## Physics world\n\n@docs emptyWorld, withGravity, withShapes, withDynamicShapes\n@docs simulate, simulateFor, shapesFromWorld, shapeNamed\n\n\n## Physics shape properties\n\n@docs withWeight, withMass, kilograms, grams\n@docs weightOf, massOf, inKilograms, inGrams\n@docs withFriction, frictionOf\n@docs withBounciness, bouncinessOf\n\n\n## Physics updates and actions\n\n@docs updateWorldShapes, updateShapeNamed\n@docs moveTo, moveBy, moveIn, moveForward\n@docs rotateAround\n@docs pushForward, pushBackward, pushLeft, pushRight, pushUp, pushDown, push\n@docs transform\n\n\n## Physics constraints\n\n@docs lockPositionTo, keepDistanceTo, hingeTo\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 gameInit, gameView, gameUpdate, gameSubscriptions, Game, GameMsg\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.Experimental.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.Experimental.Message, secondsBeforeSend : Eigenwijs.Playground3d.Experimental.Number, touch : { list : List.List Eigenwijs.Playground3d.Experimental.Touch, current : Maybe.Maybe Eigenwijs.Playground3d.Experimental.Touch, change : Maybe.Maybe Eigenwijs.Playground3d.Experimental.Touch, previous : Maybe.Maybe Eigenwijs.Playground3d.Experimental.Touch }, mouse : Eigenwijs.Playground3d.Experimental.Mouse, keyboard : Eigenwijs.Playground3d.Experimental.Keyboard, screen : Eigenwijs.Playground3d.Experimental.Screen, time : Eigenwijs.Playground3d.Experimental.Time }"},{"name":"Configuration","comment":" Configuration type to hold customizations for camera and keep\na list of obj file urls to load at init.\n","args":["memory"],"type":"{ camera : Maybe.Maybe (memory -> Eigenwijs.Playground3d.Experimental.Camera), network : Maybe.Maybe Eigenwijs.Playground3d.Experimental.Connection, objUrls : List.List String.String }"},{"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.Experimental.Number }"},{"name":"GameMsg","comment":" Game message alias\n","args":[],"type":"Eigenwijs.Playground3d.Experimental.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.Experimental.Number, y : Eigenwijs.Playground3d.Experimental.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.Experimental.Screen, font : Maybe.Maybe Eigenwijs.Playground3d.Experimental.Font, objFiles : Eigenwijs.Playground3d.Experimental.ObjLibrary }"},{"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.Experimental.Number, height : Eigenwijs.Playground3d.Experimental.Number, top : Eigenwijs.Playground3d.Experimental.Number, left : Eigenwijs.Playground3d.Experimental.Number, right : Eigenwijs.Playground3d.Experimental.Number, bottom : Eigenwijs.Playground3d.Experimental.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.Experimental.Time -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> Platform.Program () Eigenwijs.Playground3d.Experimental.Animation Eigenwijs.Playground3d.Experimental.Msg"},{"name":"animationInit","comment":" Animation init\n","type":"(Eigenwijs.Playground3d.Experimental.Time -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> Eigenwijs.Playground3d.Experimental.Configuration () -> () -> ( Eigenwijs.Playground3d.Experimental.Animation, Platform.Cmd.Cmd Eigenwijs.Playground3d.Experimental.Msg )"},{"name":"animationSubscriptions","comment":" Animation subscriptions\n","type":"Platform.Sub.Sub Eigenwijs.Playground3d.Experimental.Msg"},{"name":"animationUpdate","comment":" Animation update function\n","type":"Eigenwijs.Playground3d.Experimental.Msg -> Eigenwijs.Playground3d.Experimental.Animation -> Eigenwijs.Playground3d.Experimental.Animation"},{"name":"animationView","comment":" Animation view\n","type":"Eigenwijs.Playground3d.Experimental.Animation -> (Eigenwijs.Playground3d.Experimental.Time -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> Html.Html Eigenwijs.Playground3d.Experimental.Msg"},{"name":"beginOfTime","comment":" BeginOfTime\n","type":"Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"blue","comment":" ","type":"Color.Color"},{"name":"bouncinessOf","comment":" Return the set amount of bounciness for the given shape. If not set this\nvalue is 0, the physics calculations default.\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"brown","comment":" ","type":"Color.Color"},{"name":"center","comment":" Extracts the position from any shape.\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"configuration","comment":" Use `configuration` to configure a picture, animation or game.\n\n    polytest =\n        \"obj/polytest.obj.txt\"\n\n    main =\n        configuration\n            |> withObjUrls [ polytest ]\n            |> configuredAnimation view\n\n    view time =\n        [ if spin 1 time > 180 then\n            objFile red polytest\n                |> scale 0.5\n                |> moveZ 100\n\n          else\n            cube green 100\n                |> moveZ 50\n        ]\n\n","type":"Eigenwijs.Playground3d.Experimental.Configuration memory"},{"name":"configuredAnimation","comment":" Create a configured animation - see `configuration`.\n","type":"(Eigenwijs.Playground3d.Experimental.Time -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> Eigenwijs.Playground3d.Experimental.Configuration () -> Platform.Program () Eigenwijs.Playground3d.Experimental.Animation Eigenwijs.Playground3d.Experimental.Msg"},{"name":"configuredGame","comment":" Create a configured game - see `configuration`.\n","type":"(Eigenwijs.Playground3d.Experimental.Computer -> memory -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> (Eigenwijs.Playground3d.Experimental.Computer -> memory -> memory) -> memory -> Eigenwijs.Playground3d.Experimental.Configuration memory -> Platform.Program () (Eigenwijs.Playground3d.Experimental.Game memory) Eigenwijs.Playground3d.Experimental.Msg"},{"name":"configuredPicture","comment":" Create a configured picture - see `configuration`.\n","type":"List.List Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Configuration memory -> Platform.Program () Eigenwijs.Playground3d.Experimental.Picture Eigenwijs.Playground3d.Experimental.Msg"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Shape"},{"name":"entity","comment":" Add a 3D shape to a Scene3D scene as an entity.\n","type":"Eigenwijs.Playground3d.Experimental.ObjLibrary -> Eigenwijs.Playground3d.Experimental.Shape -> Maybe.Maybe (Scene3d.Entity Obj.Decode.ObjCoordinates)"},{"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.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"eyesAt","comment":" Create a camera looking from a point x y z, towards the origin (0, 0, 0)\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"frictionOf","comment":" Return the set amount of friction for the given shape. If not set this\nvalue is 0.3, the physics calculations default.\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Number"},{"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.Experimental.Computer -> memory -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> (Eigenwijs.Playground3d.Experimental.Computer -> memory -> memory) -> memory -> Platform.Program () (Eigenwijs.Playground3d.Experimental.Game memory) Eigenwijs.Playground3d.Experimental.Msg"},{"name":"gameInit","comment":" Game init function\n","type":"memory -> Eigenwijs.Playground3d.Experimental.Configuration memory -> () -> ( Eigenwijs.Playground3d.Experimental.Game memory, Platform.Cmd.Cmd Eigenwijs.Playground3d.Experimental.Msg )"},{"name":"gameSubscriptions","comment":" Game subscriptions\n","type":"Eigenwijs.Playground3d.Experimental.Game memory -> Platform.Sub.Sub Eigenwijs.Playground3d.Experimental.Msg"},{"name":"gameUpdate","comment":" Game update function\n","type":"(Eigenwijs.Playground3d.Experimental.Computer -> memory -> memory) -> Eigenwijs.Playground3d.Experimental.Msg -> Eigenwijs.Playground3d.Experimental.Game memory -> Eigenwijs.Playground3d.Experimental.Game memory"},{"name":"gameView","comment":" Game view function\n","type":"(memory -> Eigenwijs.Playground3d.Experimental.Camera) -> (Eigenwijs.Playground3d.Experimental.Computer -> memory -> List.List Eigenwijs.Playground3d.Experimental.Shape) -> Eigenwijs.Playground3d.Experimental.Game memory -> Html.Html Eigenwijs.Playground3d.Experimental.Msg"},{"name":"grams","comment":" Specify mass (weight) in grams.\n","type":"Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"hingeTo","comment":" Connect a shape to another shape with the specified name via a hinge\nconstraint that keeps the relative positions and allows rotation along the\ny-axes of the shapes (relative to the individual shapes).\n","type":"String.String -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"inGrams","comment":" Return a mass (weight) in grams.\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"inKilograms","comment":" Return a mass (weight) in kilograms.\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"isometric","comment":" Create an isometric camera\n","type":"Eigenwijs.Playground3d.Experimental.Camera"},{"name":"keepDistanceTo","comment":" Connect a shape to another shape with the specified name via a constraint\nthat keeps the distance of the shape to the named shape fixed.\n","type":"String.String -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"kilograms","comment":" Specify mass (weight) in kilograms.\n","type":"Eigenwijs.Playground3d.Experimental.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":"lockPositionTo","comment":" Connect a shape to another shape with the specified name via a constraint\nthat keeps the position of the shape relative to the named shape fixed.\n","type":"String.String -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"lookAt","comment":" Modify a camera to look at a specific point x y z\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera -> Eigenwijs.Playground3d.Experimental.Camera"},{"name":"massOf","comment":" Returns the mass of a shape as a Mass value (set with `withMass`).\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> Mass.Mass"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number ) -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number ) -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"moveBy","comment":" Move a shape that was added to the physics world by a specified\ntranslation relative to the world.\n","type":"Vector3d.Vector3d Length.Meters Physics.Coordinates.WorldCoordinates -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"moveForward","comment":" Move a shape that was added to the physics world forward along its\nx-axis (so it is relative to the current orientation of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"moveIn","comment":" Move a shape that was added to the physics world in a specified\ndirection relative to the shape.\n","type":"Direction3d.Direction3d Physics.Coordinates.BodyCoordinates -> Length.Length -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"moveTo","comment":" ","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"moveZ","comment":" Move the `z` coordinate of a shape by some amount:\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"nameOf","comment":" Return the name of the given shape; if no name was set it returns an empty\nstring `\"\"`.\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> String.String"},{"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.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number ) -> List.List ( Basics.Int, Basics.Int, Basics.Int ) -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"objFile","comment":" Use an obj file model by url as a shape. You can create obj file models\nusing tools like Blender or search for premade ones online.\n","type":"Color.Color -> String.String -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera"},{"name":"pan","comment":" Pan the camera for a specified number of degrees.\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera -> Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> Platform.Program () Eigenwijs.Playground3d.Experimental.Picture Eigenwijs.Playground3d.Experimental.Msg"},{"name":"pictureInit","comment":" Picture init function\n","type":"List.List Eigenwijs.Playground3d.Experimental.Shape -> () -> ( Eigenwijs.Playground3d.Experimental.Picture, Platform.Cmd.Cmd Eigenwijs.Playground3d.Experimental.Msg )"},{"name":"pictureSubscriptions","comment":" Picture subscriptions\n","type":"Eigenwijs.Playground3d.Experimental.Picture -> Platform.Sub.Sub Eigenwijs.Playground3d.Experimental.Msg"},{"name":"pictureUpdate","comment":" Picture update function\n","type":"List.List Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Msg -> Eigenwijs.Playground3d.Experimental.Picture -> ( Eigenwijs.Playground3d.Experimental.Picture, Platform.Cmd.Cmd Eigenwijs.Playground3d.Experimental.Msg )"},{"name":"pictureView","comment":" Picture view function\n","type":"Eigenwijs.Playground3d.Experimental.Picture -> List.List Eigenwijs.Playground3d.Experimental.Shape -> Html.Html Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number ) -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"positionOf","comment":" Returns the position of a shape, as a tuple (x, y, z).\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.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.Experimental.ObjLibrary -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"prism","comment":" Make a prism\n","type":"Color.Color -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"purple","comment":" ","type":"Color.Color"},{"name":"push","comment":" Push a shape that was added to the physics world along a specified\naxis relative to the shape, with an amount of force (Newtons), at a\nspecific point on the shape (specified relative to the shape).\n","type":"{ force : Force.Force, direction : Direction3d.Direction3d Physics.Coordinates.BodyCoordinates, at : Point3d.Point3d Length.Meters Physics.Coordinates.BodyCoordinates } -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushBackward","comment":" Push a shape that was added to the physics world backward (in the\nopposite direction of the x-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushDown","comment":" Push a shape that was added to the physics world down (in the\nopposite direction of the z-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushForward","comment":" Push a shape that was added to the physics world forward (in the\ndirection of the x-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushLeft","comment":" Push a shape that was added to the physics world the left (in the\nopposite direction of the y-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushRight","comment":" Push a shape that was added to the physics world to the right (in the\ndirection of the y-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"name":"pushUp","comment":" Push a shape that was added to the physics world up (in the\ndirection of the z-axis of the shape).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Action"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"rotateAround","comment":" Rotate a shape that was added to the physics world along a specified\naxis relative to the shape.\n","type":"Axis3d.Axis3d Length.Meters Physics.Coordinates.WorldCoordinates -> Angle.Angle -> Eigenwijs.Playground3d.Experimental.Action"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"secondsBetween","comment":" Return the number of seconds between two instances of Time.\n","type":"Eigenwijs.Playground3d.Experimental.Time -> Eigenwijs.Playground3d.Experimental.Time -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"shapeNamed","comment":" Search the world for a shape with the specified name. Return `Nothing` if\nno shape is found, and `Just shape` when it was found. It returns only the\nfirst shape found.\n","type":"String.String -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Maybe.Maybe Eigenwijs.Playground3d.Experimental.Shape"},{"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.Experimental.Shape -> List.List Eigenwijs.Playground3d.Experimental.Shape"},{"name":"shift","comment":" Shift the camera along the x, y, and z axis (in centimeters).\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera -> Eigenwijs.Playground3d.Experimental.Camera"},{"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.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"simulateFor","comment":" Simulate the world with a step of a specified duration.\n","type":"Duration.Duration -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"snake","comment":" Make a snake!\n","type":"Color.Color -> List.List ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number ) -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"sound","comment":" Add sound to your picture, animation or game!\n\n    main =\n        picture [ circle yellow 50, sound \"https://example.com/sound.mp3\" ]\n\n","type":"String.String -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Time -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"tilt","comment":" Tilt the camera for a specified number of degrees.\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera -> Eigenwijs.Playground3d.Experimental.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.Experimental.Keyboard -> Eigenwijs.Playground3d.Experimental.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.Experimental.Keyboard -> ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.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.Experimental.Keyboard -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"transform","comment":" Transform a shape that was added to the physics world using the familiar\ntransforms of the playground, such as `roll`, `pitch`, `yaw`, `move` and\n`scale`.\n","type":"List.List (Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape) -> Eigenwijs.Playground3d.Experimental.Action"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"updateShapeNamed","comment":" Update the shape(s) with the specified name using actions such as\n`pushForward` and `transform`.\n","type":"String.String -> List.List Eigenwijs.Playground3d.Experimental.Action -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"updateWorldShapes","comment":" Update the shapes added to the physics world using actions such as\n`pushForward`.\n","type":"(Eigenwijs.Playground3d.Experimental.Shape -> List.List Eigenwijs.Playground3d.Experimental.Action) -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"viewFrom","comment":" Return a camera with the location and orientation of the specified shape.\nAs if the shape would be the eyes! 8)\n","type":"Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Camera"},{"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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Time -> Eigenwijs.Playground3d.Experimental.Number"},{"name":"weightOf","comment":" Returns the weight of a shape as a Mass value (set with `withWeigth` or\n`withMass`).\n","type":"Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> List.List ( Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number, Eigenwijs.Playground3d.Experimental.Number )"},{"name":"white","comment":" ","type":"Color.Color"},{"name":"withBounciness","comment":" Set the amount of bounciness for a shape. The default bounciness is 0.\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"withCamera","comment":" Configure the camera; a function that given the memory outputs a camera.\n\n    main =\n        configuration\n            |> withCamera camera\n            |> configuredGame view update init\n\n    camera memory =\n        eyesAt 500 500 500\n            |> lookAt 0 0 0\n\n","type":"(memory -> Eigenwijs.Playground3d.Experimental.Camera) -> Eigenwijs.Playground3d.Experimental.Configuration memory -> Eigenwijs.Playground3d.Experimental.Configuration memory"},{"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.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"withFriction","comment":" Set the amount of friction for a shape. The default friction is 0.3.\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"withGravity","comment":" Add gravity (meters per second squared) to the simulated world.\n","type":"Eigenwijs.Playground3d.Experimental.Number -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape"},{"name":"withMass","comment":" Set the mass for a shape. For example:\n\n    cylinder blue 50 100 |> withMass (kilograms 10)\n\n","type":"Mass.Mass -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.Shape"},{"name":"withObjUrls","comment":" Configure the list of obj file urls (obj files hold 3d models made with\ntools like Blender or found online).\n\n    polytest =\n        \"obj/polytest.obj.txt\"\n\n    main =\n        configuration\n            |> withObjUrls [ polytest ]\n            |> configuredGame view update init\n\n","type":"List.List String.String -> Eigenwijs.Playground3d.Experimental.Configuration memory -> Eigenwijs.Playground3d.Experimental.Configuration memory"},{"name":"withShapes","comment":" Add static shapes to the simulated world. They will stay where they are\nput.\n","type":"List.List Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.Shape -> Physics.World.World Eigenwijs.Playground3d.Experimental.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.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Shape -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Time -> Eigenwijs.Playground3d.Experimental.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.Experimental.Number -> Eigenwijs.Playground3d.Experimental.Camera -> Eigenwijs.Playground3d.Experimental.Camera"}],"binops":[]}]