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.

An instance of Sketch which may be drawn into. A simple example is below. See the Sketch Object for a complete description of the properties and methods of the Sketch object.


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

copies the contents of this.sketch to the screen.

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

If defined, will receive all initial click events. The button argument will always be on. If defined, will receive all double click events. The button argument will always be on. If defined, will receive all dragging events. The button argument will be on while dragging, and off when the dragging has stopped. If defined, will receive all idle mouse events while the mouse is over the rectangle occupied by jsui object. The button argument will always be off. If defined, will receive the first idle mouse event as the mouse leaves the rectangle occupied by the jsui object. The button argument will always be off. If defined, will receive any resize events with the new width and height.