Repository files navigation

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

Reprocessing depends on bsb-native to build, which is very deprecated/unsupported.Unfortunately this means reprocessing is pretty unusable. End of an era :')LMK if you feel strongly working to get this building in another way and maybe we can merge it <3

Theinteractive docs are the simplest way to try reprocessing. (They are generated usingredoc!).

The 2nd simplest way to try is to clonereprocessing-example.

Seebelow for projects using Reprocessing!

npm install reprocessing

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

openReprocessing;letsetup= (env)=> {Env.size(~width=200, ~height=200, env);};letdraw= (_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,());

npm run build

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

There are a couple demos insideexamples. Runnpm i to install all deps andnpm run build to build to JS (default). Openindex.html in safari (or usepython -m SimpleHTTPServer 8000 to spawn a static server and go tolocalhost:8000 in chrome).

Seebelow for examples!

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

In general:

• Draw contains functions that draw to the screen (and affect drawing), likerect andimage.
• Env contains functions involving the environment (or window) you are running in. For example,mouse andsize.
• Utils contains many static helper functions from Processing such aslerp anddist.
• Constants contains some mathematical and color-related constants, likepi andgreen.

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

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!

There is a default font in Reprocessing that will be automatically used if you useDraw.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 theAngel Code font format. This is basically a bitmap of packed glyph textures along with a text file that describes it.

★★★ Check outfont-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:

letfont=Draw.loadFont(~filename, env);Draw.text(~font, ~body="Test!!!", ~pos=(10,10), env);

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.

• For state management, we encourage the use of thestate value that Reprocessing manages for the user. To use this, decide on a datatype representing the state and return the initial value fromsetup. This will be persisted behind the scenes and passed to every callback (such asdraw andmouseDown). Each callback should return the new value of the state (or the old value if it doesn't change).

• There are no built-in variables likewidth andmouseX. Instead, these are functions that are called, passing in an environment object that is always provided.

openReprocessing;letdraw= (state, env)=> {letw=Env.width(env);  print_endline("The current width is:"++ string_of_int(w))};

• The builtinmap function is calledremap instead to avoid confusion with the well-knownList.map function which maps over a list of values. As, according to the Processing docs, this function "Re-maps a number from one range to another.", this naming seems appropriate.

• Points are expressed as tuples. Instead of exposing amouseX andmouseY, there is amouse, which is a tuple of x and y values.

openReprocessing;letdraw= (state, env)=> {let (x,y)=Env.mouse(env);  print_endline("The current mouse position is:"++ (string_of_int(x)++ string_of_int(y)))};

• Gravitron
• Oh No! Zombies!
• 2048
• FlappyBird
• Chrome T-Rex
• Pong
• Ticky-Tacky
• Perlin Noise Flow Field
• L-System
• My Dear Farm
• Retro
• Game Of Life
• Tetris
• Purple Maze
• Egg
• Remandelbrot
• ReTurbo

• Wonky Game Physics in Reason and Lessons Learned
• Making a cross-platform mobile game in Reason/OCaml
• 2048 live-coding
• FlappyBird live-coding

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