eigenwijskids / elm-playground-eigenwijs / Eigenwijs.Playground3d

Beware that this is a project under heavy construction - We are trying to incrementally work towards a library enabling folks familiar with the 2D Playground, to add 3D elements to a 3D scene, and in this way enabling them to contribute to a collaboratively developed game.

Compatibility with the original Playground library

This library exports the same functions and types except for (for the time being):

The following primitives work in a (slightly) different way:

Playgrounds

picture : List Shape -> Platform.Program () Picture Msg

Make a picture! Here is a picture of a triangle with an eyeball:

import Playground exposing (..)

main =
    picture
        [ triangle green 150
        , circle white 40
        , circle black 10
        ]

animation : (Time -> List Shape) -> Platform.Program () Animation Msg

Create an animation!

Once you get comfortable using picture to layout shapes, you can try out an animation. Here is square that zigzags back and forth:

import Playground exposing (..)

main =
    animation view

view time =
    [ square blue 40
        |> moveX (zigzag -100 100 2 time)
    ]

We need to define a view to make our animation work.

Within view we can use functions like spin, wave, and zigzag to move and rotate our shapes.

game : (Computer -> memory -> List Shape) -> (Computer -> memory -> memory) -> memory -> Platform.Program () (Game memory) Msg

Create a game!

Once you get comfortable with animation, you can try making a game with the keyboard and mouse. Here is an example of a green square that just moves to the right:

import Playground exposing (..)

main =
    game view update 0

view computer offset =
    [ square green 40
        |> moveRight offset
    ]

update computer offset =
    offset + 0.03

This shows the three important parts of a game:

  1. memory - makes it possible to store information. So with our green square, we save the offset in memory. It starts out at 0.
  2. view - lets us say which shapes to put on screen. So here we move our square right by the offset saved in memory.
  3. update - lets us update the memory. We are incrementing the offset by a tiny amount on each frame.

The update function is called about 60 times per second, so our little changes to offset start to add up pretty quickly!

This game is not very fun though! Making a game also gives you access to the Computer, so you can use information about the Mouse and Keyboard to make it interactive! So here is a red square that moves based on the arrow keys:

import Playground exposing (..)

main =
    game view update ( 0, 0 )

view computer ( x, y ) =
    [ square red 40
        |> move x y
    ]

update computer ( x, y ) =
    ( x + toX computer.keyboard
    , y + toY computer.keyboard
    )

Notice that in the update we use information from the keyboard to update the x and y values. These building blocks let you make pretty fancy games!

Shapes


type Shape

Shapes help you make a picture, animation, or game.

Read on to see examples of circle, rectangle, words, image, and many more!

circle : Color -> Number -> Shape

Make circles:

dot =
    circle red 10

sun =
    circle yellow 300

You give a color and then the radius. So the higher the number, the larger the circle.

square : Color -> Number -> Shape

Make squares. Here are two squares combined to look like an empty box:

import Playground exposing (..)

main =
    picture
        [ square purple 80
        , square white 60
        ]

The number you give is the dimension of each side. So that purple square would be 80 pixels by 80 pixels.

rectangle : Color -> Number -> Number -> Shape

Make rectangles. This example makes a red cross:

import Playground exposing (..)

main =
    picture
        [ rectangle red 20 60
        , rectangle red 60 20
        ]

You give the color, width, and then height. So the first shape is vertical part of the cross, the thinner and taller part.

triangle : Color -> Number -> Shape

Make triangles:

triangle blue 50

You give a color and then its size.

polygon : Color -> List ( Number, Number ) -> Shape

Make any shape you want! Here is a very thin triangle:

import Playground exposing (..)

main =
    picture
        [ polygon black [ ( -10, -20 ), ( 0, 100 ), ( 10, -20 ) ]
        ]

Note: If you rotate a polygon, it will always rotate around (0,0). So it is best to build your shapes around that point, and then use move or group so that rotation makes more sense.

snake : Color -> List ( Number, Number, Number ) -> Shape

Make a snake!

3D Shapes

sphere : Color -> Number -> Shape

Make sphere:

import Playground exposing (..)

main =
    picture
        [ sphere green 10
        ]

You give the color, width, height, and then depth. So the first shape is the vertical part of the cross, the thinner and taller part.

cylinder : Color -> Number -> Number -> Shape

Make cylinders:

pillar =
    cylinder red 10 50

You give a color, the radius and then the height.

cube : Color -> Number -> Shape

Make cubes:

import Playground exposing (..)

main =
    picture
        [ cube blue 10
        ]

You give the color, width, height, and then depth. So the first shape is the vertical part of the cross, the thinner and taller part.

block : Color -> Number -> Number -> Number -> Shape

Make blocks. This example makes a red cross:

import Playground exposing (..)

main =
    picture
        [ block red 20 60 10
        , block red 60 20 10
        ]

You give the color, width, height, and then depth. So the first shape is the vertical part of the cross, the thinner and taller part.

Words

words : Color -> String -> Shape

Show some words!

import Playground exposing (..)

main =
    picture
        [ words black "Hello! How are you?"
        ]

You can use scale to make the words bigger or smaller.

Move Shapes

move : Number -> Number -> Number -> Shape -> Shape

Move a shape by some number of pixels:

import Playground exposing (..)

main =
    picture
        [ square red 100
            |> move -60 60 0
        , square yellow 100
            |> move 60 60 0
        , square green 100
            |> move 60 -60 0
        , square blue 100
            |> move -60 -60 0
        ]

moveX : Number -> Shape -> Shape

Move the x coordinate of a shape by some amount. Here is a square that moves back and forth:

import Playground exposing (..)

main =
    animation view

view time =
    [ square purple 20
        |> moveX (wave 4 -200 200 time)
    ]

Using moveX feels a bit nicer here because the movement may be positive or negative.

moveY : Number -> Shape -> Shape

Move the y coordinate of a shape by some amount. Maybe you want to make grass along the bottom of the screen:

import Playground exposing (..)

main =
    game view update 0

update computer memory =
    memory

view computer count =
    [ rectangle green computer.screen.width 100
        |> moveY computer.screen.bottom
    ]

Using moveY feels a bit nicer when setting things relative to the bottom or top of the screen, since the values are negative sometimes.

moveZ : Number -> Shape -> Shape

Move the z coordinate of a shape by some amount:

Customize Shapes

scale : Number -> Shape -> Shape

Make a shape bigger or smaller. So if you wanted some words to be larger, you could say:

import Playground exposing (..)

main =
    picture
        [ words black "Hello, nice to see you!"
            |> scale 3
        ]

rotate : Number -> Shape -> Shape

Rotate shapes in degrees.

import Playground exposing (..)

main =
    picture
        [ triangle black 50
            |> rotate 10
        ]

The degrees go counter-clockwise to match the direction of the unit circle.

roll : Number -> Shape -> Shape

Rotate shapes in degrees, along the X axis:

import Playground exposing (..)

main =
    picture
        [ triangle black 50
            |> roll 10
        ]

Search Wikipedia for "roll, pitch, yaw" to find out why it is called "roll". ;)

pitch : Number -> Shape -> Shape

Rotate shapes in degrees, along the Y axis:

import Playground exposing (..)

main =
    picture
        [ triangle black 50
            |> pitch 10
        ]

Search Wikipedia for "roll, pitch, yaw" to find out why it is called "pitch". ;)

yaw : Number -> Shape -> Shape

Rotate shapes in degrees, along the Z axis:

import Playground exposing (..)

main =
    picture
        [ triangle black 50
            |> yaw 10
        ]

Search Wikipedia for "roll, pitch, yaw" to find out why it is called "yaw". ;)

fade : Number -> Shape -> Shape

Fade a shape. This lets you make shapes see-through or even completely invisible. Here is a shape that fades in and out:

import Playground exposing (..)

main =
    animation view

view time =
    [ square orange 30
    , square blue 200
        |> fade (zigzag 0 1 3 time)
    ]

The number has to be between 0 and 1, where 0 is totally transparent and 1 is completely solid.

Groups and extrusion

group : List Shape -> Shape

Put shapes together so you can move and rotate them as a group. Maybe you want to put a bunch of stars in the sky:

import Playground exposing (..)

main =
    picture
        [ star
            |> move 100 100
            |> rotate 5
        , star
            |> move -120 40
            |> rotate 20
        , star
            |> move 80 -150
            |> rotate 32
        , star
            |> move -90 -30
            |> rotate -16
        ]

star =
    group
        [ triangle yellow 20
        , triangle yellow 20
            |> rotate 180
        ]

extrude : Number -> Shape -> Shape

Pull a 2D shape "up" to form a 3D body:

circle blue 20
    |> extrude 50

This will create a flat circle "extruded" along the z-axis to form a 3D cylinder. The extruded form is centered around the xy-plane.

pullUp : Number -> Shape -> Shape

Pull a 2D shape "up" to form a 3D body:

circle blue 20
    |> pullUp 50

This will create a flat circle "pulled up" (or "extruded") along the z-axis to form a 3D cylinder.

Time


type Time

The current time.

Helpful when making an animation with functions like spin, wave, and zigzag.

spin : Number -> Time -> Number

Create an angle that cycles from 0 to 360 degrees over time.

Here is an animation with a spinning triangle:

import Playground exposing (..)

main =
    animation view

view time =
    [ triangle orange 50
        |> rotate (spin 8 time)
    ]

It will do a full rotation once every eight seconds. Try changing the 8 to a 2 to make it do a full rotation every two seconds. It moves a lot faster!

wave : Number -> Number -> Number -> Time -> Number

Smoothly wave between two numbers.

Here is an animation with a circle that resizes:

import Playground exposing (..)

main =
    animation view

view time =
    [ circle lightBlue (wave 50 90 7 time)
    ]

The radius of the circle will cycles between 50 and 90 every seven seconds. It kind of looks like it is breathing.

zigzag : Number -> Number -> Number -> Time -> Number

Zig zag between two numbers.

Here is an animation with a rectangle that tips back and forth:

import Playground exposing (..)

main =
    animation view

view time =
    [ rectangle lightGreen 20 100
        |> rotate (zigzag -20 20 4 time)
    ]

It gets rotated by an angle. The angle cycles from -20 degrees to 20 degrees every four seconds.

beginOfTime : Time

BeginOfTime

secondsBetween : Time -> Time -> Number

Return the number of seconds between two instances of Time.

Computer


type alias Computer =
{ inbox : List Message
, secondsBeforeSend : Number
, touch : { list : List Touch
, current : Maybe Touch
, change : Maybe Touch
, previous : Maybe Touch }
, mouse : Mouse
, keyboard : Keyboard
, screen : Screen
, time : Time 
}

When writing a game, you can look up all sorts of information about your computer:

So you can use expressions like computer.mouse.x and computer.keyboard.enter in games where you want some mouse or keyboard interaction.


type alias Mouse =
{ x : Number
, y : Number
, down : Basics.Bool
, click : Basics.Bool 
}

Figure out what is going on with the mouse.

You could draw a circle around the mouse with a program like this:

import Playground exposing (..)

main =
    game view update 0

view computer memory =
    [ circle yellow 40
        |> moveX computer.mouse.x
        |> moveY computer.mouse.y
    ]

update computer memory =
    memory

You could also use computer.mouse.down to change the color of the circle while the mouse button is down.


type alias Screen =
{ width : Number
, height : Number
, top : Number
, left : Number
, right : Number
, bottom : Number 
}

Get the dimensions of the screen. If the screen is 800 by 600, you will see a value like this:

{ width = 800
, height = 600
, top = 300
, left = -400
, right = 400
, bottom = -300
}

This can be nice when used with moveY if you want to put something on the bottom of the screen, no matter the dimensions.


type alias Keyboard =
{ 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 String 
}

Figure out what is going on with the keyboard.

If someone is pressing the UP and RIGHT arrows, you will see a value like this:

{ up = True
, down = False
, left = False
, right = True
, space = False
, enter = False
, shift = False
, backspace = False
, keys = Set.fromList [ "ArrowUp", "ArrowRight" ]
}

So if you want to move a character based on arrows, you could write an update like this:

update computer y =
    if computer.keyboard.up then
        y + 1

    else
        y

Check out toX and toY which make this even easier!

Note: The keys set will be filled with the name of all keys which are down right now. So you will see things like "a", "b", "c", "1", "2", "Space", and "Control" in there. Check out this list to see the names used for all the different special keys! From there, you can use Set.member to check for whichever key you want. E.g. Set.member "Control" computer.keyboard.keys.

toX : Keyboard -> Number

Turn the LEFT and RIGHT arrows into a number.

toX { left = False, right = False, ... } == 0
toX { left = True , right = False, ... } == -1
toX { left = False, right = True , ... } == 1
toX { left = True , right = True , ... } == 0

So to make a square move left and right based on the arrow keys, we could say:

import Playground exposing (..)

main =
    game view update 0

view computer x =
    [ square green 40
        |> moveX x
    ]

update computer x =
    x + toX computer.keyboard

toY : Keyboard -> Number

Turn the UP and DOWN arrows into a number.

toY { up = False, down = False, ... } == 0
toY { up = True , down = False, ... } == 1
toY { up = False, down = True , ... } == -1
toY { up = True , down = True , ... } == 0

This can be used to move characters around in games just like toX:

import Playground exposing (..)

main =
    game view update ( 0, 0 )

view computer ( x, y ) =
    [ square blue 40
        |> move x y
    ]

update computer ( x, y ) =
    ( x + toX computer.keyboard
    , y + toY computer.keyboard
    )

toXY : Keyboard -> ( Number, Number )

If you just use toX and toY, you will move diagonal too fast. You will go right at 1 pixel per update, but you will go up/right at 1.41421 pixels per update.

So toXY turns the arrow keys into an (x,y) pair such that the distance is normalized:

toXY { up = True , down = False, left = False, right = False, ... } == (1, 0)
toXY { up = True , down = False, left = False, right = True , ... } == (0.707, 0.707)
toXY { up = False, down = False, left = False, right = True , ... } == (0, 1)

Now when you go up/right, you are still going 1 pixel per update.

import Playground exposing (..)

main =
    game view update ( 0, 0 )

view computer ( x, y ) =
    [ square green 40
        |> move x y
    ]

update computer ( x, y ) =
    let
        ( dx, dy ) =
            toXY computer.keyboard
    in
    ( x + dx, y + dy )

Colors

rgb : Number -> Number -> Number -> Color

RGB stands for Red-Green-Blue. With these three parts, you can create any color you want. For example:

brightBlue =
    rgb 0.1 0.6 1

brightGreen =
    rgb 0.6 1 0.05

brightPurple =
    rgb 0.4 0.1 0.8

For rgb each numer is expected to be a floating point number between 0 and 1. Also see rgb255, where each number needs to be an integer between 0 and 255.

It can be hard to figure out what numbers to pick, so try using a color picker like paletton to find colors that look nice together. Once you find nice colors, click on the color previews to get their RGB values.

rgb255 : Number -> Number -> Number -> Color

RGB stands for Red-Green-Blue. With these three parts, you can create any color you want. For example:

brightBlue =
    rgb255 18 147 216

brightGreen =
    rgb255 119 244 8

brightPurple =
    rgb255 94 28 221

For rgb255 each number needs to be an integer between 0 and 255. Also see rgb, where each numer is expected to be a floating point number between 0 and 1.

It can be hard to figure out what numbers to pick, so try using a color picker like paletton to find colors that look nice together. Once you find nice colors, click on the color previews to get their RGB values.

red : Color

orange : Color

yellow : Color

green : Color

blue : Color

purple : Color

brown : Color

Light Colors

lightRed : Color

lightOrange : Color

lightYellow : Color

lightGreen : Color

lightBlue : Color

lightPurple : Color

lightBrown : Color

Dark Colors

darkRed : Color

darkOrange : Color

darkYellow : Color

darkGreen : Color

darkBlue : Color

darkPurple : Color

darkBrown : Color

Shades of Grey

white : Color

lightGrey : Color

grey : Color

darkGrey : Color

lightCharcoal : Color

charcoal : Color

darkCharcoal : Color

black : Color

Alternate Spellings of Gray

lightGray : Color

gray : Color

darkGray : Color

Numbers


type alias Number =
Basics.Float

A number like 1 or 3.14 or -120.

Playground Scene3d embeds

entity : Font -> Shape -> Scene3d.Entity coordinates

Add a 3D shape to a Scene3D scene as an entity.

Playground Picture embeds

pictureInit : () -> ( Picture, Platform.Cmd.Cmd Msg )

Picture init function

pictureView : Picture -> List Shape -> Html Msg

Picture view function

pictureUpdate : Msg -> Picture -> ( Picture, Platform.Cmd.Cmd Msg )

Picture update function

pictureSubscriptions : Picture -> Platform.Sub.Sub Msg

Picture subscriptions


type alias Picture =
{ screen : Screen
, font : Maybe Font 
}

Picture model

Playground Animation embeds

animationInit : () -> ( Animation, Platform.Cmd.Cmd Msg )

Animation init

animationView : Animation -> (Time -> List Shape) -> Html Msg

Animation view

animationUpdate : Msg -> Animation -> Animation

Animation update function

animationSubscriptions : Platform.Sub.Sub Msg

Animation subscriptions


type Animation

The type for animations.


type alias AnimationMsg =
Msg

Animation message alias

Playground Game embeds

gameWithCamera : (memory -> Camera) -> (Computer -> memory -> List Shape) -> (Computer -> memory -> memory) -> memory -> Platform.Program () (Game memory) Msg

Create a game using a specific camera for viewing the scene!

gameInit : memory -> () -> ( Game memory, Platform.Cmd.Cmd Msg )

Game init function

gameView : (memory -> Camera) -> (Computer -> memory -> List Shape) -> Game memory -> Html Msg

Game view function

gameUpdate : (Computer -> memory -> memory) -> Msg -> Game memory -> Game memory

Game update function

gameSubscriptions : Game memory -> Platform.Sub.Sub Msg

Game subscriptions


type Game memory

Game model containing the visibility status, custom data (memory) and the Computer state record.


type alias GameMsg =
Msg

Game message alias

networkGame : Connection -> (Computer -> WithMessages memory -> List Shape) -> (Computer -> WithMessages memory -> WithMessages memory) -> WithMessages memory -> Platform.Program () (Game (WithMessages memory)) Msg

Create a network game; a game that has a messages inbox field in Computer and a messages outbox as a field in its memory. The game takes a Connection parameter. Messages sent are tagged with your sender name, configured as name in the Connection.


type alias Connection =
{ server : String
, name : String
, sendIntervalInSeconds : Number 
}

A network Connection with server url, sender name, and the send interval in seconds.

Playground Cameras

isometric : Camera

Create an isometric camera

eyesAt : Number -> Number -> Number -> Camera

Create a camera looking from a point x y z, towards the origin (0, 0, 0)

lookAt : Number -> Number -> Number -> Camera -> Camera

Modify a camera to look at a specific point x y z