Creating a Sketch

How to create a sketch

Create a js file in the sketches/ folder.

In this sketch file, create an anonymous function. This function will be set as the init function of the sketch.

Set this.label to the name of the sketch. Can alternately set it to an array of names if you want to define multiple sketches in one file.

Really only need this.label and the this.render function, the latter of which gets called every frame.

Drawing in a sketch

You can use functions such as mLine (two points), mCurve (many points in a line), mDrawRect, mDrawOval, etc.

Most of these drawing functions are defined in mat.js, look through that for some information.

Also see mText(string, [x,y]) for text rendering. If you use this, you have to first call textHeight(...) to set the text size, or it'll be tiny/invisible. Use this.mScale to make the text size relative to the scale of the sketch. All together:

textHeight(this.mScale(.5));
// Set text height to 1/4 of height of sketch
// (in -1...1 bounding box)

These functions have these coordinates: -1 to 1 left to right, -1 to 1 bottom to top, within the bounding box of the sketch. These lines are used for both the rendering and the recognizer. Each line or curve is one stroke, and remember, stroke count matters!

You can live edit sketches using the "show code" sketch radial menu command (bottom-right + drag). Hit backquote (`) to reinterpret the code after you're done editing.

There's also this.afterSketch, which should be called within this.render:

this.afterSketch(function(){
    // Here insert code that will run only
    // after the sketch is interpreted.
    // Put this in your this.render function.
});

Things drawn here aren't used in the recognizer, so you can draw with wild abandon.

There's also this.duringSketch, which is for things that should only be drawn while you're recognizing it.

Want to modify your sketch's transformation matrix? It's called m (not this.m, just m). See sketches/s2c.js as an example. This gets reset to the identity matrix at the beginning of every render call.

Change color with the color(...) function. Takes a string, typical Javascript/CSS-esque color strings such as "rgb(255, 128, 0)".

Want something to animate? Use the global variable time.

Interactivity

Interacting with the mouse?

this.onPress = function(p) {
    // use p.x, p.y
    // both are from -1 to 1
}

this.onDrag = function(p) {
    // same here
}

Can also do onCmdPress and onCmdDrag, which are alternate inputs that activate after you hit the bottom-left "cmd" option in the sketch radial menu.

Another possibility for input is the this.onSwipe array, which allows you to define 8 different operations for 8 different swipe directions, e.g.:

this.onSwipe[0] = ["Description for help mode", function() {
    // Do whatever you like here
}];

These show up in the help mode overlay, which is nice.