class Sketch

Interface to an OpenGL-backed drawing context

Every custom UI made with jsui or JSPainter has access to a default Sketch object bound to the global variable "sketch". Use this object to render to the OpenGL-backed drawing context available to all UI objects. Often this is the only instance of the Sketch object that you will use. If you want to render sprites, have multiple layers of images, or create alpha channels, you can construct new instances of the Sketch object.

Index

Constructors

• new Sketch(width, height)

Properties

• depthbuffer
• fsaa
• size

Methods

• beginstroke(stroke_style)
• circle(radius, theta_start, theta_end)
• copypixels(source_obj, destination_x, destination_y, source_x, source_y, width, height)
• cube(scale_x, scale_y, scale_z)
• cylinder(radius1, radius2, mag, theta_start, theta_end)
• default2d()
• default3d()
• depthatpixel(x, y)
• ellipse(radius1, radius2, theta_start, theta_end)
• endstroke()
• font(font_name)
• fontsize(size)
• framecircle(radius, theta_start, theta_end)
• frameellipse(radius1, radius2, theta_start, theta_end)
• framequad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
• frametri(x1, y1, z1, x2, y2, z2, x3, y3, z3)
• freepeer()
• getpixel(x, y)
• gettextinfo(text)
• glbegin(prim_type)
• glbindtexture(image)
• glblendfunc(src_func, dst_func)
• glclear()
• glclearcolor(red, green, blue, alpha)
• glclearcolor(colors)
• glcleardepth(depth)
• glclipplane(plane, coeff1, coeff2, coeff3, coeff4)
• glclipplane(planeValues)
• glcolor(red, green, blue, alpha)
• glcolor(colors)
• glcolormask(red, green, blue, alpha)
• glcolormask(colors)
• glcolormaterial(face, mode)
• glcullface(face)
• gldepthmask(onoff)
• gldepthrange(near, far)
• gldisable(capability)
• gledgeflag(onoff)
• glenable(capability)
• glend()
• glfinish()
• glflush()
• glfog(parameter_name, values)
• glfrustum(left, right, bottom, top, near, far)
• glfrustum(frustrumValues)
• glhint(target, mode)
• gllight(light, parameter_name, values)
• gllightmodel(light, model)
• gllinestipple(factor, bit_pattern)
• gllinewidth(width)
• glloadidentity()
• glloadmatrix(matrix_array)
• gllogicop(op)
• glmaterial()
• glmatrixmode(mode)
• glmultmatrix(matrix_array)
• glnormal(x, y, z)
• glortho(left, right, bottom, top, near, far)
• glortho(orthoValues)
• glpointsize(size)
• glpolygonmode(face, mode)
• glpolygonoffset(factor, units)
• glpopattrib()
• glpopmatrix()
• glpushattrib()
• glpushmatrix()
• glrect(x1, y1, x2, y2)
• glrect(rectValues)
• glrotate(angle, x, y, z)
• glrotate(rotateValues)
• glscale(x, y, z)
• glscale(scaleValues)
• glscissor(x, y, width, height)
• glscissor(scissorValues)
• glshademodel(mode)
• gltexcoord(s, t)
• gltexenv(parameter_name, val1, val2, val3, val4)
• gltexgen(coord, parameter_name, val1, val2, val3, val4)
• gltexparameter(parameter_name, val1, val2, val3, val4)
• gltranslate(x, y, z)
• gltranslate(translateValues)
• glulookat(eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z)
• glulookat(lookatValues)
• gluortho2d(left, right, bottom, top)
• gluortho2d(orthoValues)
• gluperspective(fovy, aspect, near, far)
• gluperspective(perspectiveValues)
• glvertex(x, y, z)
• glvertex(vertexValues)
• glviewport(x, y, width, height)
• glviewport(viewportValues)
• line(dx, dy, dz)
• linesegment(x1, y1, z1, x2, y2, z2)
• lineto(x, y, z)
• move(dx, dy, dz)
• moveto(x, y, z)
• ortho3d()
• plane(scale_x1, scale_y1, scale_x2, scale_y2)
• point(x, y, z)
• quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
• restorecontext()
• roundedplane(round_amount, scale_x1, scale_y1)
• screentoworld(x, y, depth)
• setcontext()
• setpixel(x, y, red, green, blue, alpha)
• shapeorient(rotation_x, rotation_y, rotation_z)
• shapeprim(draw_prim)
• shapeslice(slice_a, slice_b)
• sphere(radius, theta1_start, theta1_end, theta2_start, theta2_end)
• strokeparam(parameter_name, value)
• strokeparam(parameter_name, red, green, blue, alpha)
• strokeparam(parameter_name, order)
• strokeparam(parameter_name, red, green, blue, alpha)
• strokeparam(parameter_name, active)
• strokeparam(parameter_name, width)
• strokeparam(parameter_name, slice_count)
• strokepoint(x, y, z)
• text(text)
• textalign(align_x, align_y)
• torus(major_radius, minor_radius, theta1_start, theta1_end, theta2_start, theta2_end)
• tri(x1, y1, z1, x2, y2, z2, x3, y3, z3)
• worldtoscreen(x, y, z)

new Sketch(width, height)

new Sketch(width?: number, height?: number);

Create a new Sketch instance

beginstroke(stroke_style)

Begin definition of a stroked path

beginstroke(stroke_style: "basic2d" | "line");

circle(radius, theta_start, theta_end)

Draw a circle or an arc

Draws a filled circle with radius specified by the radius argument at the current drawing position. If theta_start and theta_end are specified, then an arc will be drawn instead of a full circle. Affected by shapeorient, shapeslice, and shapeprim values.

circle(radius: number, theta_start?: number, theta_end?: number);

copypixels(source_obj, destination_x, destination_y, source_x, source_y, width, height)

Copy pixels from one object to the current sketch

Copies pixels from the source object to the location specified by the destination_x and destination_y arguments. The initial x and y offset into the source and size of the rectangle copied can be speified by the source_x, source_y, width and height arguments. If these are not present, an x and y offset of zero and width and height equal to the source image is assumed. No scaling of pixels is supported. If blending is enabled in the destination sketch object, alpha blending will be performed and the current alpha color will also be applied globally. he copypixels method is much faster than obtaining the equivalent result using glbindtexture() to texture a plane, and is the recommended means of drawing images when scaling and rotation are not required.

copypixels(
  source_obj: Sketch | Image,
  destination_x: number,
  destination_y: number,
  source_x?: number,
  source_y?: number,
  width?: number,
  height?: number,
);

cube(scale_x, scale_y, scale_z)

Draw a cube

The cube will have width = 2 * scale_x, height = 2 * scale_y, and depth = 2 * scale_z, and will be centered at the current drawing position. By default, scale_y and scale_z will be equal to scale_x. Affected by shapeorient, shapeslice, and shapeprim values.

cube(scale_x: number, scale_y?: number, scale_z?: number);

cylinder(radius1, radius2, mag, theta_start, theta_end)

Draw a cylinder or cylindrical arc

Draws a cylinder with top radius specified by the radius1 argument, bottom radius specified by the radius2 argument, length specified by the mag argument, and center point at the current drawing position. If the theta_start and theta_end arguments are specified, then a cylindrical wedge will be drawn instead of a full cylinder. Affected by shapeorient, shapeslice, and shapeprim values.

cylinder(
  radius1: number,
  radius2: number,
  mag: number,
  theta_start?: number,
  theta_end?: number,
);

default2d()

Set the default graphics state for 2d rendering

The default2d method is a simple way to set the graphics state to default properties useful for 2D graphics. It is called everytime your object is resized if default2d() has been called more recently than default3d(). It is essentially equivalent to the following set of calls:

default2d();

Example

with (sketch) {
  glpolygonmode("front_and_back", "fill");
  glpointsize(1);
  gllinewidth(1);
  gldisable("depth_test");
  gldisable("fog");
  glcolor(0, 0, 0, 1);
  glshademodel("smooth");
  gldisable("lighting");
  gldisable("normalize");
  gldisable("texture");
  glmatrixmode("projection");
  glloadidentity();
  glortho(-aspect, aspect, -1, 1, -1, 100);
  glmatrixmode("modelview");
  glloadidentity();
  glulookat(0, 0, 2, 0, 0, 0, 0, 0, 1);
  glclearcolor(1, 1, 1, 1);
  glclear();
  glenable("blend");
  glblendfunc("src_alpha", "one_minus_src_alpha");
}

default3d()

Set the default graphics state for 3d rendering

The default3d method is a simple way to set the graphics state to default properties useful for 3D graphics. It is called everytime the jsui object is resized if default3d() has been called more recently than default2d(). It is essentially equivalent to the following set of calls:

default3d();

Example

with (sketch) {
  glpolygonmode("front_and_back", "fill");
  glpointsize(1);
  gllinewidth(1);
  glenable("depth_test");
  glenable("fog");
  glcolor(0, 0, 0, 1);
  glshademodel("smooth");
  gllightmodel("two_side", "true");
  glenable("lighting");
  glenable("light0");
  glenable("normalize");
  gldisable("texture");
  glmatrixmode("projection");
  glloadidentity();
  gluperspective(default_lens_angle, aspect, 0.1, 100);
  glmatrixmode("modelview");
  glloadidentity();
  glulookat(0, 0, 2, 0, 0, 0, 0, 0, 1);
  glclearcolor(1, 1, 1, 1);
  glclear();
  glenable("blend");
  glblendfunc("src_alpha", "one_minus_src_alpha");
}

depthatpixel(x, y)

Get the depth at a given pixel

Returns the depth value associated with the currently rendered pixel at a given absolute screen coordinate.

depthatpixel(x: number, y: number): number;

depthbuffer number

Enable or disable the depth buffer.

ellipse(radius1, radius2, theta_start, theta_end)

Draw an ellipse or elliptical arc

Draws a filled ellipse with radii specified by the radius1 and radius2 arguments. If theta_start and theta_end are specified, then an arc will be drawn instead of a full ellipse. Affected by shapeorient, shapeslice, and shapeprim values.

ellipse(
  radius1: number,
  radius2: number,
  theta_start?: number,
  theta_end?: number,
);

endstroke()

End definition of a path and render it

endstroke();

font(font_name)

Set the current font

font(font_name: string);

fontsize(size)

Set the font size in points

fontsize(size: number);

framecircle(radius, theta_start, theta_end)

Draw a framed circle or arc

Draws a framed circle with radius specified by the radius argument at the current drawing position. If theta_start and theta_end are specified, then an arc will be drawn instead of a full circle. Affected by shapeorient, shapeslice, and shapeprim values.

framecircle(radius: number, theta_start?: number, theta_end?: number);

frameellipse(radius1, radius2, theta_start, theta_end)

Draw a framed ellipse or elliptical arc

Draws a framed ellipse with radii specified by the radius1 and radius2 arguments. If theta_start and theta_end are specified, then an arc will be drawn instead of a full ellipse. Affected by shapeorient, shapeslice, and shapeprim values.

frameellipse(
  radius1: number,
  radius2: number,
  theta_start?: number,
  theta_end?: number,
);

framequad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Draw a framed quadrilateral

After this method has been called, the drawing position is updated to the location specified by the x4, y4, and z4 arguments.

framequad(
  x1: number,
  y1: number,
  z1: number,
  x2: number,
  y2: number,
  z2: number,
  x3: number,
  y3: number,
  z3: number,
  x4: number,
  y4: number,
  z4: number,
);

frametri(x1, y1, z1, x2, y2, z2, x3, y3, z3)

Draw a framed triangle

After this method has been called, the drawing position is updated to the location specified by the x3, y3, and z3 arguments.

frametri(
  x1: number,
  y1: number,
  z1: number,
  x2: number,
  y2: number,
  z2: number,
  x3: number,
  y3: number,
  z3: number,
);

freepeer()

Free the native C peer

Frees data from the native C peer (created when making a Sketch object), which is not considered by the JavaScript garbage collector, and may consume lots of memory until the garbage collector decides to run based JS allocated memory. Once called, the Sketch object is not available for any other use. It's not necessary to call this function, as the memory will be freed eventually, but you can call it whenever you're done with your Sketch object.

freepeer();

fsaa number

Enable or disable full-scene anti-aliasing.

getpixel(x, y)

Get the pixel data at a given point

Returns an array containing the pixel value at the specified location. This array is ordered RGBA, i.e. array element 0 is red, 1, green, 2, blue, 3 alpha. Color values are floating point numbers in the range 0.-1.

getpixel(x: number, y: number): [number, number, number, number];

gettextinfo(text)

Get the rendered size of text

Returns an array containing the width and height of the given string in absolute screen coordinates, taking into account the current font and fontsize.

gettextinfo(text: string): [number, number];

glbegin(prim_type)

Begin drawing using low level OpenGL functions

The low level OpenGL function calls (all beginning with gl) are thin wrappers around direct calls to the graphics engine. Typically, use these function calls between calls to Sketch.glbegin() and Sketch.glend(). For many of these functions, look up the documentation for the OpenGL function with the same (or very similar) name.

glbegin(prim_type: DrawingPrimitiveType);

Example

var sx = 1.0;
var sy = 1.0;
var tx = 0.0;
var ty = 0.0;
function draw() {
  // refers to the global "sketch" object
  sketch.glclear();

  sketch.glcolor(1, 0, 0);
  sketch.glbegin("lines");

  // draw x axis
  glvertex(Math.min(tx + sx * -1, -1), ty, 0);
  glvertex(Math.max(tx + sx * 1, 1), ty, 0);

  // draw y axis
  glvertex(tx, Math.min(ty + sy * -1, -1), 0);
  glvertex(tx, Math.max(ty + sy * 1, 1), 0);
}

glbindtexture(image)

Apply the given texture to subsequent drawing calls

Note: this method also calls glenable(texture)

glbindtexture(image: Image);

glblendfunc(src_func, dst_func)

glblendfunc(src_func: string, dst_func: string);

glclear()

Clear the drawing context

glclear();

glclearcolor(red, green, blue, alpha)

Set the color to fill the context with using Sketch.glclear()

glclearcolor(red: number, green: number, blue: number, alpha: number = 1);

glclearcolor(colors)

glclearcolor(colors: number[]);

glcleardepth(depth)

Set the depth to fill the context with using Sketch.glclear()

glcleardepth(depth: number);

glclipplane(plane, coeff1, coeff2, coeff3, coeff4)

glclipplane(
  plane: number,
  coeff1: number,
  coeff2: number,
  coeff3: number,
  coeff4: number,
);

glclipplane(planeValues)

glclipplane(planeValues: number[]);

glcolor(red, green, blue, alpha)

Set the color for subsequent drawing calls

glcolor(red: number, green: number, blue: number, alpha: number = 1);

glcolor(colors)

glcolor(colors: number[]);

glcolormask(red, green, blue, alpha)

glcolormask(red: number, green: number, blue: number, alpha: number = 1);

glcolormask(colors)

glcolormask(colors: number[]);

glcolormaterial(face, mode)

glcolormaterial(face: number, mode: number);

glcullface(face)

glcullface(face: number);

gldepthmask(onoff)

gldepthmask(onoff: number);

gldepthrange(near, far)

gldepthrange(near: number, far: number);

gldisable(capability)

Disable a drawing capaility.

Usually "blend", "line_smooth", or "texture"

gldisable(capability: string);

gledgeflag(onoff)

gledgeflag(onoff: number);

glenable(capability)

Enable a drawing capaility.

Usually "blend", "line_smooth", or "texture"

glenable(capability: string);

glend()

glend();

glfinish()

glfinish();

glflush()

glflush();

glfog(parameter_name, values)

glfog(parameter_name: string, ...values: number);

glfrustum(left, right, bottom, top, near, far)

glfrustum(
  left: number,
  right: number,
  bottom: number,
  top: number,
  near: number,
  far: number,
);

glfrustum(frustrumValues)

glfrustum(frustrumValues: number[]);

glhint(target, mode)

glhint(target: string, mode: number);

gllight(light, parameter_name, values)

gllight(light: string, parameter_name: string, ...values: number);

gllightmodel(light, model)

gllightmodel(light: string, model: number);

gllinestipple(factor, bit_pattern)

gllinestipple(factor: any, bit_pattern: any);

gllinewidth(width)

gllinewidth(width: number);

glloadidentity()

Load the identity matrix

glloadidentity();

glloadmatrix(matrix_array)

glloadmatrix(matrix_array: number[]);

gllogicop(op)

gllogicop(op: number);

glmaterial()

glmaterial();

glmatrixmode(mode)

glmatrixmode(mode: string);

glmultmatrix(matrix_array)

glmultmatrix(matrix_array: number[]);

glnormal(x, y, z)

glnormal(x: number, y: number, z: number);

glortho(left, right, bottom, top, near, far)

glortho(
  left: number,
  right: number,
  bottom: number,
  top: number,
  near: number,
  far: number,
);

glortho(orthoValues)

glortho(orthoValues: number[]);

glpointsize(size)

glpointsize(size: number);

glpolygonmode(face, mode)

glpolygonmode(face: number, mode: number);

glpolygonoffset(factor, units)

glpolygonoffset(factor: number, units: number);

glpopattrib()

glpopattrib();

glpopmatrix()

glpopmatrix();

glpushattrib()

glpushattrib();

glpushmatrix()

glpushmatrix();

glrect(x1, y1, x2, y2)

glrect(x1: number, y1: number, x2: number, y2: number);

glrect(rectValues)

glrect(rectValues: number[]);

glrotate(angle, x, y, z)

glrotate(angle: number, x: number, y: number, z: number);

glrotate(rotateValues)

glrotate(rotateValues: number[]);

glscale(x, y, z)

glscale(x: number, y: number, z: number);

glscale(scaleValues)

glscale(scaleValues: number[]);

glscissor(x, y, width, height)

glscissor(x: number, y: number, width: number, height: number);

glscissor(scissorValues)

glscissor(scissorValues: number[]);

glshademodel(mode)

glshademodel(mode: number);

gltexcoord(s, t)

gltexcoord(s: number, t: number);

gltexenv(parameter_name, val1, val2, val3, val4)

gltexenv(
  parameter_name: string,
  val1: number,
  val2: number,
  val3: number,
  val4: number,
);

gltexgen(coord, parameter_name, val1, val2, val3, val4)

gltexgen(
  coord: number[],
  parameter_name: string,
  val1: number,
  val2: number,
  val3: number,
  val4: number,
);

gltexparameter(parameter_name, val1, val2, val3, val4)

gltexparameter(
  parameter_name: string,
  val1: number,
  val2: number,
  val3: number,
  val4: number,
);

gltranslate(x, y, z)

gltranslate(x: number, y: number, z: number);

gltranslate(translateValues)

gltranslate(translateValues: number[]);

glulookat(eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z)

glulookat(
  eye_x: number,
  eye_y: number,
  eye_z: number,
  center_x: number,
  center_y: number,
  center_z: number,
  up_x: number,
  up_y: number,
  up_z: number,
);

glulookat(lookatValues)

glulookat(lookatValues: number[]);

gluortho2d(left, right, bottom, top)

gluortho2d(left: number, right: number, bottom: number, top: number);

gluortho2d(orthoValues)

gluortho2d(orthoValues: number[]);

gluperspective(fovy, aspect, near, far)

gluperspective(fovy: number, aspect: number, near: number, far: number);

gluperspective(perspectiveValues)

gluperspective(perspectiveValues: number[]);

glvertex(x, y, z)

glvertex(x: number, y: number, z: number);

glvertex(vertexValues)

glvertex(vertexValues: number[]);

glviewport(x, y, width, height)

glviewport(x: number, y: number, width: number, height: number);

glviewport(viewportValues)

glviewport(viewportValues: number[]);

line(dx, dy, dz)

Draw a line relative to the current position

Draws a line from the current drawing position to the location specified by adding the delta x, y, and z arguments to the current position. After this method has been called, the drawing position is updated by an offset relative to the original drawing position.

line(dx: number, dy: number, dz: number);

linesegment(x1, y1, z1, x2, y2, z2)

Draw a line segment

Draws a line from the location specified by the x1, y1, and z1 arguments to the location specified by the x2, y2, and z2 arguments. After this method has been called, the drawing position is updated to the location specified by the x2, y2, and z2 arguments.

linesegment(
  x1: number,
  y1: number,
  z1: number,
  x2: number,
  y2: number,
  z2: number,
);

lineto(x, y, z)

Draw a line to the specified position

Draws a line from the current drawing position to the location specified by the x, y, and z arguments. After this method has been called, the drawing position is updated to the location specified by the x, y, and z arguments.

lineto(x: number, y: number, z: number);

move(dx, dy, dz)

Move the drawing position relatively

Moves the drawing position to the location specified by the sum of the current drawing position and the delta x, y, and z arguments.

move(dx: number, dy: number, dz: number);

moveto(x, y, z)

Move the current drawing position

Moves the drawing position to the location specified by the x, y, and z arguments.

moveto(x: number, y: number, z: number);

ortho3d()

Set the default graphics state for rendering with orthographic projection

The orth3d method is a simple way to set the graphics state to default properties useful for 3D graphics, using an orthographic projection (i.e. object scale is not affected by distance from the camera). It is called every time the jsui object is resized if ortho3d() has been called more recently than default2d(), or default3d(). It is essentially equivalent to the following set of calls:

ortho3d();

Example

with (sketch) {
  glpolygonmode("front_and_back", "fill");
  glpointsize(1);
  gllinewidth(1);
  glenable("depth_test");
  glenable("fog");
  glcolor(0, 0, 0, 1);
  glshademodel("smooth");
  gllightmodel("two_side", "true");
  glenable("lighting");
  glenable("light0");
  glenable("normalize");
  gldisable("texture");
  glmatrixmode("projection");
  glloadidentity();
  glortho(-aspect, aspect, -1, 1, -1, 100);
  glmatrixmode("modelview");
  glloadidentity();
  glulookat(0, 0, 2, 0, 0, 0, 0, 0, 1);
  glclearcolor(1, 1, 1, 1);
  glclear();
  glenable("blend");
  glblendfunc("src_alpha", "one_minus_src_alpha");
}

plane(scale_x1, scale_y1, scale_x2, scale_y2)

Draw a plane

Draws a plane with top width = 2 * scale_x1, left height = 2 * scale_y1, bottom width = 2 * scale_x2, right height = 2 * scale_y2, and center point at the current drawing position. If scale_y1 is not specified, it will assume the same value as scale_x1. If scale_x2 and scale_y2 are not specified, they will assume the same values as scale_x1 and scale_y1 respectively. Affected by shapeorient, shapeslice, and shapeprim values.

plane(
  scale_x1: number,
  scale_y1?: number,
  scale_x2?: number,
  scale_y2?: number,
);

point(x, y, z)

Draw a point

Draws a point at the location specified by the x, y, and z arguments. After this method has been called, the drawing position is updated to the specified location.

point(x: number, y: number, z: number);

quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Draw a filled quadrilateral

After this method has been called, the drawing position is updated to the location specified by the x4, y4, and z4 arguments.

quad(
  x1: number,
  y1: number,
  z1: number,
  x2: number,
  y2: number,
  z2: number,
  x3: number,
  y3: number,
  z3: number,
  x4: number,
  y4: number,
  z4: number,
);

restorecontext()

Restore the rendering context after a call to Sketch.setcontext().

restorecontext(): void;

roundedplane(round_amount, scale_x1, scale_y1)

Draw a plane with rounded corners

Draws a rounded plane with width = 2 * scale_x, height = 2 * scale_y, and center point at the current drawing position. The radius of the rounded portion of the plane is determined by the round_amount argument. If scale_y is not specified, it will assume the same value as scale_x. Affected by shapeorient, shapeslice, and shapeprim values.

roundedplane(round_amount: number, scale_x1: number, scale_y1?: number);

screentoworld(x, y, depth)

Return the world coordinate for a point on screen

Returns an array containing the x, y, and z world coordinates associated with a given screen pixel using the same the depth from the camera as 0, 0, 0. Optionally a third depth arg may be specified, which may be useful for hit detection and other applications. The depth value is typically specified in the range 0.-1. where 0 is the near clipping plane, and 1. is the far clipping plane. The worldtoscreen method can be used to determine the depth value of a given world coordinate, and the Sketch.depthatpixel() method can be used to determine the depth value associated with the currently rendered pixel at a given absolute screen coordinate.

screentoworld(x: number, y: number, depth?: number): [number, number, number];

setcontext()

Set the rendering context for the sketch.

setcontext(): void;

setpixel(x, y, red, green, blue, alpha)

Set the pixel value at a given location

Sets the pixel value at the specified location. Color values are floating point numbers in the range 0.-1.

setpixel(
  x: number,
  y: number,
  red: number,
  green: number,
  blue: number,
  alpha: number,
);

shapeorient(rotation_x, rotation_y, rotation_z)

Set rotation for shape drawing calls

Sets the rotation in x, y, and z for future shape drawing calls.

shapeorient(rotation_x: number, rotation_y: number, rotation_z: number);

shapeprim(draw_prim)

Set the drawing primitive shape

Sets the OpenGL drawing primitive to use within any of the "shape" drawing methods.

shapeprim(draw_prim: DrawingPrimitiveType);

shapeslice(slice_a, slice_b)

Set the number of slices to use when rendering shapes

Increasing the slice_a and slice_b arguments will increase the quality at which the shape is rendered, while decreasing these values will improve performance.

shapeslice(slice_a: number, slice_b: number);

size [number, number]

The size of the sketch in pixels as [width, height].

sphere(radius, theta1_start, theta1_end, theta2_start, theta2_end)

Draw a sphere

Draws a sphere with the given radius, centered at the current drawing position. If the theta1_start, theta1_end, theta2_start, and theta2_end arguments are specified, then a section will be drawn instead of a full sphere. Affected by shapeorient, shapeslice, and shapeprim values.

sphere(
  radius: number,
  theta1_start?: number,
  theta1_end?: number,
  theta2_start?: number,
  theta2_end?: number,
);

strokeparam(parameter_name, value)

Set the value for a given stroke param. Depending on the parameter, may apply to each point, or to the path as a whole. See Basic2dStrokeStyleParameterNames and LineStrokeStyleParameterNames.

strokeparam(parameter_name: "alpha", value: number);

strokeparam(parameter_name, red, green, blue, alpha)

strokeparam(
  parameter_name: "color",
  red: number,
  green: number,
  blue: number,
  alpha: number,
);

strokeparam(parameter_name, order)

strokeparam(parameter_name: "order", order: number = 3);

strokeparam(parameter_name, red, green, blue, alpha)

strokeparam(
  parameter_name: "outcolor",
  red: number,
  green: number,
  blue: number,
  alpha: number,
);

strokeparam(parameter_name, active)

strokeparam(parameter_name: "outline", active: 0 | 1);

strokeparam(parameter_name, width)

strokeparam(parameter_name: "scale", width: number);

strokeparam(parameter_name, slice_count)

strokeparam(parameter_name: "slices", slice_count: number = 20);

strokepoint(x, y, z)

Add an anchor point to the current path

Some stroke styles such as "basic2d" will ignore the z coordinate.

strokepoint(x: number, y: number, z: number);

text(text)

Draw the given text

Draws the text specified by the string argument at the current drawing position, taking into account the current font, fontsize, and text alignment. Text is strictly 2D, and does not take into account any world transformations. After calling the text method, if the x axis text alignment is set to "left", the current drawing position will be updated to reflect the world position associated with the end of the string. If the x axis text alignment is set to "right", the current drawing position will be updated to reflect the world position associated with the end of the string. If the x axis text alignment is set to "center", the current drawing position will remain unchanged.

text(text: string);

textalign(align_x, align_y)

Set the text alignment in x and y

Sets the alignment of text to be drawn with respect to the current drawing position. Default alignment is "left" and "bottom".

textalign(
  align_x: "left" | "center" | "right",
  align_y: "top" | "center" | "bottom",
);

torus(major_radius, minor_radius, theta1_start, theta1_end, theta2_start, theta2_end)

Draw a torus

Draw a torus centered at the current drawing position. If theta1_start, theta1_end, theta2_start, and theta2_end are specified, then a section will be drawn instead of a full torus. Affected by shapeorient, shapeslice, and shapeprim values.

torus(
  major_radius: number,
  minor_radius: number,
  theta1_start?: number,
  theta1_end?: number,
  theta2_start?: number,
  theta2_end?: number,
);

tri(x1, y1, z1, x2, y2, z2, x3, y3, z3)

Draw a filled triangle

After this method has been called, the drawing position is updated to the location specified by the x3, y3, and z3 arguments.

tri(
  x1: number,
  y1: number,
  z1: number,
  x2: number,
  y2: number,
  z2: number,
  x3: number,
  y3: number,
  z3: number,
);

worldtoscreen(x, y, z)

Returns the screen coordinate for a given world coordinate

Returns an array containing the x, y, and depth screen coordinates associated with a given world coordinate. The depth value is typically specified in the range 0.-1. where 0 is the near clipping plane, and 1. is the far clipping plane.

worldtoscreen(x: number, y: number, z: number): [number, number, number];