package elm_playground

You can search for identifiers within the package.

in-package search v0.2.0

On This Page

OCaml Elm Playground

Package contains no libraries

elm_playground

OCaml Elm Playground

Create pictures, animations, and games with OCaml!

This is a port of the excellent Elm playground package to OCaml.

This is the package I wanted when I was learning programming. Start by putting shapes on screen and work up to making games. I hope this package will be fun for a broad range of ages and backgrounds!

Pictures

A picture is a list of shapes. For example, this picture combines a brown rectangle and a green circle to make a tree

open Playground

let app =
  picture [
    rectangle brown 40. 200.;
    circle green 100.
      |> move_up 100.;
  ]

let main = Playground_platform.run_app app

Play around to get familiar with all the different shapes and transformations in the library.

Animations

An animation is a list of shapes that changes over time. For example, here is a spinning triangle:

open Playground

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

let app = animation view

let main = Playground_platform.run_app app

It will do a full spin every 8 seconds.

Maybe try making a car with spinning octogons as wheels? Try using Playground.wave to move things back-and-forth? Try using Playground.zigzag to fade things in-and-out?

Games

A game lets you use input from the mouse and keyboard to change your picture. For example, here is a square that moves around based on the arrow keys:

open Playground

let view _computer (x, y) = [ 
  square blue 40.
   |> move x y
 ]

let update computer (x, y) =
  (x +. to_x computer.keyboard, y +. to_y computer.keyboard)

let app = 
  game view update (0., 0.)

let main = Playground_platform.run_app app

Every game has three important parts:

memory - Store information. Our example stores (x,y) coordinates.
update - Update the memory based on mouse movements, key presses, etc. Our example moves the (x,y) coordinate around based on the arrow keys.
view - Turn the memory into a picture. Our example just shows one blue square at the (x,y) coordinate we have been tracking in memory.

When you start making fancier games, you will store fancier things in memory. There is a lot of room to develop your programming skills here: Making lists, using records, creating custom types, etc.