The jsui Object

The following section describes properties and methods that are specific to jsui. See the Max Object section on the js Object for properties and methods that are common to both the js and jsui object.

function bang() {
  sketch.glclear()
  sketch.glcolor(0.5, 0.7, 0.3)
  sketch.moveto(0.25, -0.25)
  sketch.circle(0.3)
  refresh()
}

jsui Event Handler Methods Overview

Since the jsui object is a user interface object, it can receive and process user interface events. Currently the only user interface events which are supported are related to mouse activity and resizing off the jsui object. If the following methods are defined by your Javascript code, they will be called to handle these user interface events. All mouse events handlers should be defined with have a standard form of

function on<eventname>(
  x,
  y,
  button,
  modifier1,
  shift,
  capslock,
  option,
  modifier2
) {
  // do something
}

The modifier1 argument is the command key state on Macintosh, and the control key state on PC, and the modifier2 argument is the control key state on Macintosh, and the right button state on PC. Modifier state is 1 if down/held, or 0 if not. If your event handler is not concerned with any trailing arguments, they can be omitted.

One potentially confusing thing is that mouse events are in absolute screen coordinates, with (0,0) as left top, and (width, height) as right bottom corners of the jsui object, while Sketch's drawing coordinates are in relative world coordinates, with (0,0) as the center, +1 top, -1 bottom, and x coordinates using a uniform scale based on the y coordinates. To convert between screen and world coordinates, use sketch.screentoworld(x,y) and sketch.worldtoscreen(x,y,z). For example,

function onclick(x, y) {
  sketch.moveto(sketch.screentoworld(x, y))
  sketch.framecircle(0.1)
  refresh()
}