A simple game library providing p5js bindings for Gleam in a functional style to make basic games and animations. Heavily inspired by the Racket library 2htdp/universe.
This project is primarily made up of
- A bun script that is used to generate bindings for p5js class methods
- Script is based on script created for glare
- A wrapper game engine that provides a functional interface to p5js
An example generated maze
An example ball spawner
To use this library you will need to build your gleam project and include it in an html file. The html file must import p5js as a module before the generated javascript file. The easiest way to do this is to load the p5js library from a CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ball Spawner</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.2/lib/p5.js"></script>
<script type="module">
import { main } from "./ball_spawner.js";
main();
</script>
</head>
<body></body>
</html>Once you have an html file with p5js and your output module setup, add the library to your project by running the following command
gleam add p5js_gleamThen add a call to the create_sketch function in your main function.
import p5js_gleam.{type P5}
import p5js_gleam/bindings as p5
fn setup(p: P5) -> String {
p5.create_canvas(p, 800.0, 600.0)
"Hello, world!"
}
fn draw(p: P5, state: String) {
p5.background(p, "#ffffff")
p5.fill(p, "#000000")
p5.text(p, state, 400.0, 300.0)
}
pub fn main() {
p5js_gleam.create_sketch(init: setup, draw: draw)
|> p5.start_sketch
}To see the library in action you can download and serve one of the examples in the examples directory.
To generate the FFI bindings you will need bun installed. Once you have bun installed run
bun run ./scripts/generate_p5.ts