libmypaint.js - MyPaint brush engine for javaScript
A javascript port (emsctipten) of the awesome libmypaint brush engine :)
Play with the online demo!
var libmypaint = require("libmypaint"); // libmypaint.js is a UMD module...
var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);
//draw a green line :P
painter.setBrush(myBrush).setColor(0,255,0).stroke(100, 100).stroke(200,100);
A brush is just a JSON object. see MyPaint for brush examples.
Download the latest build (or the latest debug build).
libmypaint is a UMD module, and can work with CommonJS, AMD, and script tags:
CommonJS:
var libmypaint = require("libmypaint");
RequireJS:
require([ "libmypaint"], function(libmypaint){ ... });
Script tag
<script src="libmypaint.js"></script>
<script> console.log(window.libmypaint.INFO); </script>
Connecting Pointer Events:
var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);
var _lastTime = 0;
var _rect = canvas.getBoundingClientRect(); // assume no resize
canvas.addEventListener("pointermove", function(e) {
var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
var x = e.pageX - _rect.left;
var y = e.pageY - _rect.top;
_lastTime = e.timeStamp;
painter.stroke(x, y, dt, e.pressure, e.tiltX, e.tiltY);
});
var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);
var _lastTime = 0;
var _rect = canvas.getBoundingClientRect(); // assume no resize
canvas.addEventListener("mousemove", function(e) {
var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
var x = e.pageX - _rect.left;
var y = e.pageY - _rect.top;
_lastTime = e.timeStamp;
if (e.buttons === 1) // left mouse button is pressed?
painter.stroke(x,y,dt);
else
painter.hover(x, y, dt); // same as stroke() with pressure 0
});
var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);
var _lastTime = 0;
var _touching = false;
var _rect = canvas.getBoundingClientRect(); // assume no resize
canvas.addEventListener("touchend", function() { _touching = false});
canvas.addEventListener("touchmove", function(e) {
var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
var x = e.touches[0].pageX - _rect.left;
var y = e.touches[0].pageY - _rect.top;
if (_touching)
painter.stroke(x, y, dt);
else
painter.newStroke(x, y);
_lastTime = e.timeStamp;
_touching = true;
});
- make sure you install node, grunt-cli and emscripten SDK.
- update git sub modules, by running:
git submodule update --init --recursive
- run
npm install
- use one of the following build tasks:
grunt debug # clean & build a debug version of the library
grunt release # clean & build a release version of the library
grunt testbed # build & run the testbed against the debug version
grunt testbed:release # build & run the testbed against the release version
Painter is a thin wrapper around Bindings, with a simple drawing API that supports method chaining.
It also implements canvas drawing..
Usage:
var painter = Painter.fromCanvas(canvas);
painter.setBrush(brush)
.stroke(0, 100).stroke(100,100).stroke(100,0)
.hover(400, 400, 0.5).stroke(500, 400);
@param bindings: Bindings
Use the constructor directly only if your'e implementing your own drawing logic.
For normal usage, see Painter.fromCanvas()
@param canvas: HTMLCanvas or CanvasRenderingContext2D
Create a Painter object that can draw to canvas.
@param brush: Object - a JSON object, with brush settings.
@returns: this
Load all brush settings from a given JSON object...
see https://github.com/mypaint/mypaint/tree/master/brushes for brush examples.
NOTE: the brush parameter object will not be mutated.
@param r,g,b: Number - between 0 and 255, or an Array (e,g [r,g,b])
@returns: this
set current brush color... for example:
painter.setColor(255,0,0).setColor([255,255,0]);
NOTE: The next call to .setBrush() will reset this value.
@param x,y: Number - stroke position
@param dt: Number - delta time in seconds (optional), defaults to: 0.1
@param pressure: Number - pressure between 0 and 1 (optional), defaults to: 0.5
@param xtilt: Number - (optional), defaults to: 0
@param ytilt: Number - (optional), defaults to: 0
@returns: this
ask the brush engine to perform a stroke...
NOTE: for best results dt should be calculated from the input event (e.timeStamp).
@param x,y: Number - stroke position
@param dt: Number - delta time in seconds (optional), defaults to: 0.1
@returns: this
will perform a stroke with 0 pressure.
use this function when you can get hover events from the input system, but can't get pressure (e,g mouse).
@param x,y: Number - stroke position
@returns: this
resets brush state and renders a "ghost stroke" with pressure 0, and dt of 10 seconds.
use this function only when you can't get pressure & hover events from the input system (mobile touch screens etc..).
The low level bindings to libmypaint, each instance holds it's own emsctipten module. Use this class directly only if you don't want to use the Painter API.
@param drawDab: function(x,y,radius, r,g,b,a, hardness, alpha_eraser, aspect_ratio, angle, lock_alpha, colorize)
@param getColor: function(x, y, radius)
getColor() should return an Array with RGBA values ([r,g,b,a]), where each value is between 0 and 1.
drawDab() will be called to draw stuff...
See Painter for an example implementation of getColor() & drawDab() for canvas.
directly maps to the C function mypaint_brush_stroke_to()
@param brush: Object - a JSON object, with brush settings.
will load all brush settings from a given JSON object...
see https://github.com/mypaint/mypaint/tree/master/brushes for brush examples.
will destroy current brush & allocate new brush, used during .load_brush()
directly maps to the C function mypaint_brush_reset()
@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param value: Number
used during .load_brush(), and can be used to set color etc... for example:
my.set_brush_base_value("color_h", 0.0);
my.set_brush_base_value("color_s", 0.0);
my.set_brush_base_value("color_v", 1.0);
@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param input_name: String - the name of the mapping e,g "pressure"...
@param n: Number - number of mapping points.
Used during .load_brush(), and maps to the C function mypaint_brush_set_mapping_n().
Should be called before any .set_brush_mapping_point() calls to this mapping...
@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param input_name: String - the name of the mapping e,g "pressure"...
Used during .load_brush(), and maps to the C function mypaint_brush_set_mapping_point().