Home

Awesome

Reprocessing

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).

Example

The interactive docs are the simplest way to try reprocessing. (They are generated using redoc!).

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

See below for projects using Reprocessing!

<!--! ```reason;shared(sandbox) [@bs.val] external sandboxCanvasId: string = ""; [@bs.val] external sandboxCanvas: 'canvas = ""; [@bs.val] external containerDiv: 'node = ""; [@bs.send] external addEventListener: ('node, string, 'eventT => unit) => unit = "addEventListener"; let id = sandboxCanvasId; addEventListener(containerDiv, "mouseleave", (_) => Reprocessing.playPause(id, false) |> ignore); addEventListener(containerDiv, "mouseenter", (_) => Reprocessing.playPause(id, true) |> ignore); Reprocessing.setScreenId(sandboxCanvasId); ``` -->

Getting Started

npm install reprocessing

Code Example

Clone reprocessing-example and follow instructions there to setup a new project.

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, ());

Build

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.

Demo

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).

See below for examples!

FAQs

Where do I find x function?

There are a few modules in Reprocessing that store most functions you will want to use. The best way to find one is to use the search on the docs site: https://schmavery.github.io/reprocessing/

In general:

Why do some functions have an "f" at the end?

Several utility functions that would otherwise accept either an integer or a float in Processing expose a version with an f suffix, which supports floats. Ex: random vs randomf. This lets you use whichever you prefer without needing to convert all the time.

When do I run loadImage or loadFont?

It is best to run these functions in the setup function. They are fairly expensive to run and setup is usually the easiest place to load your assets once. Then you can keep a reference to them in your state and draw them as many times as you want!

How do I use different fonts when drawing text?

There is a default font in Reprocessing that will be automatically used if you use Draw.text without providing a font. However, you frequently want to have your own font!

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.

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);

Why is there no support for 3D drawing?

The original goal for reprocessing was to make something extremely easy to use and build real (2d) games and experiences with in ReasonML. Processing's 2D API does an amazing job at making graphics approachable. It would be really neat to be able to extend this to 3D creations but I do tend to feel that the 3D API is significantly more complex in some ways. It adds several new concepts such as 3d shapes, texture/materials/lighting, and we'd need to extend several functions to optionally support a third dimension. It also doesn't let you avoid the matrix functions which can be counterintuitive and camera logic gets more involved. We may consider trying to add support in the future but it currently isn't on the roadmap.

Some Differences from Processing

open Reprocessing;
let draw = (state, env) => {
  let w = Env.width(env);
  print_endline("The current width is:" ++ string_of_int(w))
};
open Reprocessing;
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)))
};

Projects using Reprocessing

Talks and articles about Reprocessing

Please open a PR to add any cool projects, talks or articles about Reprocessing that are missing above!