⚠️ Oops! This page doesn't appear to define a type called _.


Build Status Build status

This is a high-level drawing library, inspired by Processing, allowing you to write code that'll run on the web (using WebGL) and natively (using OpenGL).


The web environment is the simplest way to try reprocessing. (It uses an older verison of the Reason syntax though, we're working on fixing that).

The 2nd simplest way to try is to clone reprocessing-example.

See below for projects using Reprocessing!

Getting Started

npm install schmavery/reprocessing


open Reprocessing;

let setup = (env) => {
  Env.size(~width=200, ~height=200, env);

let draw = (_state, env) => {
  Draw.background(Constants.black, env);
  Draw.fill(Constants.red, env);
  Draw.rect(~pos=(50, 50), ~width=100, ~height=100, env)

run(~setup, ~draw, ());
[@@@ocaml.ppx.context { cookies = [] }]
external sandboxCanvasId : string = ""[@@bs.val ]
external sandboxCanvas : 'canvas = ""[@@bs.val ]
external containerDiv : 'node = ""[@@bs.val ]
external addEventListener :
  'node -> string -> ('eventT -> unit) -> unit = "addEventListener"[@@bs.send
let id = sandboxCanvasId
let _ =
  addEventListener containerDiv "mouseleave"
    (fun _  -> (Reprocessing.playPause id false) |> ignore)
let _ =
  addEventListener containerDiv "mouseenter"
    (fun _  -> (Reprocessing.playPause id true) |> ignore)
let _ = Reprocessing.setScreenId sandboxCanvasId
open Reprocessing
let setup env = Env.size ~width:200 ~height:200 env
let draw _state env =
  Draw.background Constants.black env;
  Draw.fill Constants.red env;
  Draw.rect ~pos:(50, 50) ~width:100 ~height:100 env
let _ = run ~setup ~draw ()


npm run build

This will draw a simple red square on a black background. Compare this to reglexampleproject, which takes 200+ lines to do the exact same thing. This difference is even more notable on bigger projects. Check out the code for a draggable red square.


There are a couple demos inside examples. Run npm i to install all deps and npm run build to build to JS (default). Open index.html in safari (or use python -m SimpleHTTPServer 8000 to spawn a static server and go to localhost:8000 in chrome).

Run npm run build:bytecode to build to a bytecode executable and run ./lib/bs/bytecode/index.byte.

Run npm run build:native to build to a native executable and run ./lib/bs/native/index.native.

See also FlappyBird or 2048 for slightly bigger examples.

Some Differences from Processing

let draw = (state, env) => {
  let (x, y) = Env.mouse(env);
  print_endline("The current mouse position is:" ++ (string_of_int(x) ++ string_of_int(y)))
[@@@ocaml.ppx.context { cookies = [] }]
open Reprocessing
let draw state env =
  let (x,y) = Env.mouse env in
    ("The current mouse position is:" ^
       ((string_of_int x) ^ (string_of_int y)))

Using Fonts

The story for using fonts in your Reprocessing app is still under some development to make it nicer. Right now we have support for writing text in a font defined in the Angel Code font format. This is basically a bitmap of packed glyph textures along with a text file that describes it.

Check out font-generator for a tool that can take any truetype or opentype font and output font files that Reprocessing can use.

The assets folder of this repo also has an example of a font that can be copied to your project and used. In order to use a font once you have the files:

  let font = Draw.loadFont(~filename, env);
  Draw.text(~font, ~body="Test!!!", ~pos=(10, 10), env);
[@@@ocaml.ppx.context { cookies = [] }]
open Reprocessing
let fn filename env =
  let font = Draw.loadFont ~filename env in
  Draw.text ~font ~body:"Test!!!" ~pos:(10, 10) env

Projects using Reprocessing