Paint

Make drawings, animations, and games with Gleam!

Paint is a tiny embedded domain specific language (inspired by Gloss). Make pictures out of basic shapes then style, transform, and combine them using the provided functions.

Frame 3(2)

import paint as p
import paint/canvas

fn main() {
  let my_picture = p.combine([
    p.circle(50.0),
    p.circle(30.0) |> p.fill(p.colour_rgb(0, 200, 200)),
    p.rectangle(100.0, 50.0) |> p.rotate(p.angle_deg(30.0)),
    p.text("Hello world", 20) |> p.translate_y(-65.0),
  ])

  canvas.display(fn(_: canvas.Config) { my_picture }, "#canvas_id")
}

Want to learn more? Read the docs or browse the visual examples.

Currently, there is only a HTML canvas backend for displaying the pictures. Hopefully, I will have time to add other backends in the future (such as SVG). Feel free to contribute!

Logo

Lucy is borrowed from the Gleam branding page and the brush is made by Delapouite (game icons).

Changelog

The API is considered unstable until a 1.*.* release is published. Changes between versions can be found in the file CHANGELOG.md.

TODOs

Would be fun to investigate an API more similar to Haskell diagrams and Diagrammer.
Replace the color functions with gleam-community/colour
Support (bitmap) images
Split the library into multiple well structured modules (paint, canvas, event, etc.)
Allowing arbitrary css selectors instead of requiring ids in interact_... and display_...
Improve input handling for canvas.interact (more keys and mouse input)
Add another backend? SVG or maybe Raylib bindings (for either erlang or node).
Write a proper tutorial (and a nicer examples page).
More shapes, ellipse for example
(Maybe) support gradient fill

✨