Class: Engine

Engine(canvas)

Class representing the main engine controlling the canvas loop, mouse and keyboard events, and frame recording. The Engine class is designed to be extended by the user to create custom sketches. It provides a set of callback methods for handling events and drawing on the canvas, as well as utility methods for managing the canvas state and recording frames.

Constructor

new Engine(canvas)

Create the engine controlling a canvas
Parameters:
Name Type Description
canvas object DOM element containing the canvas
Source:

Members

canvas

Get the current drawing canvas
Source:

ctx

Get the current drawing context
Source:

deltaTime

Get the current framerate as milliseconds per frame (mspf)
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the delta_time property instead.
Source:

deltaTimeAverage

Get the average framerate as milliseconds per frame (mspf)
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the delta_time_average property instead.
Source:

delta_time

Get the current framerate as milliseconds per frame (mspf)
Source:

delta_time_average

Get the average framerate as milliseconds per frame (mspf)
Source:

frameCount

Get the count of frames since the start
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the frame_count property instead.
Source:

frameRate

Get the current framerate as frames per second (fps)
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the frame_rate property instead.
Source:

frameRateAverage

Get the average framerate as frames per second (fps)
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the frame_rate_average property instead.
Source:

frame_count

Get the count of frames since the start
Source:

frame_rate

Get the current framerate as frames per second (fps)
Source:

frame_rate_average

Get the average framerate as frames per second (fps)
Source:

height

Get the drawing area height
Source:

height

Set the drawing area height
Source:

is_recording

Get the current recording state
Source:

mouseInside

Get whether the mouse is currently inside the canvas
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the mouse_inside property instead.
Source:

(readonly) mousePosition

Get the current mouse position
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the mouse_position property instead.
Source:

mouse_inside

Get whether the mouse is currently inside the canvas
Source:

(readonly) mouse_position

Get the current mouse position
Source:

(readonly) prevMousePosition

Get the previous mouse position
Deprecated:
  • This method is deprecated and will be removed in future versions. Use the prev_mouse_position property instead.
Source:

(readonly) prev_mouse_position

Get the previous mouse position
Source:

width

Get the drawing area width
Source:

width

Set the drawing area width
Source:

Methods

background(color)

Set the background color for the canvas
Parameters:
Name Type Description
color string | number Color can be a CSS< RGB, RGBA, HEX, HEAX, HSL, HSLA string, a Color object, or a monochrome value (number)
Source:

click(x, y)

Public callback for mouse click and touchscreen tap
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

clickHandler(e)

Handler for mouse click/touchscreen tap
Parameters:
Name Type Description
e MouseEvent event
Source:

draw(dt)

Main sketch function, will be run continuously unless noLoop() is called
Parameters:
Name Type Description
dt number Delta time in milliseconds since last frame
Source:

keyDown(key, code)

Public callback for key down
Parameters:
Name Type Description
key string pressed key
code number code of the pressed key
Source:

keyDownHandler(e)

Handler for key pressed event
Parameters:
Name Type Description
e KeyboardEvent event
Source:

keyPress(key, code)

Public callback for key press
Parameters:
Name Type Description
key string pressed key
code string code of the pressed key
Source:

keyPressHandler(e)

Handler for key press event
Parameters:
Name Type Description
e KeyboardEvent event
Source:

keyUp(key, code)

Public callback for key up
Parameters:
Name Type Description
key string pressed key
code number code of the pressed key
Source:

keyUpHandler(e)

Handler for key up event
Parameters:
Name Type Description
e KeyboardEvent event
Source:

loop()

Starts looping the script
Source:

mouseDown(x, y)

Public callback for mouse and touchscreen pressed
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseDownHandler(e)

Handler for mouse down
Parameters:
Name Type Description
e MouseEvent event
Source:

mouseDragged(x, y)

Public callback for mouse and touchscreen drag
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseEnter(x, y)

Public callback for mouse and touchscreen entered
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseEnterHandler(e)

Handler for move entered event
Parameters:
Name Type Description
e MouseEvent event
Source:

mouseLeave(x, y)

Public callback for mouse and touchscreen left
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseLeaveHandler(e)

Handler for move leave event
Parameters:
Name Type Description
e MouseEvent event
Source:

mouseMoveHandler(e)

Handler for moved mouse
Parameters:
Name Type Description
e MouseEvent event
Source:

mouseMoved(x, y)

Public callback for mouse and touchscreen moved
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseUp(x, y)

Public callback for mouse and touchscreen up
Parameters:
Name Type Description
x number coordinate of the click/tap location
y number coordinate of the click/tap location
Source:

mouseUpHandler(e)

Handler for mouse up
Parameters:
Name Type Description
e MouseEvent event
Source:

noLoop()

Stops looping the script
Source:

preload()

Function ran once, before the sketch is actually loaded
Source:

saveFrame(titleopt)

Save current frame
Parameters:
Name Type Attributes Default Description
title string <optional>
 null The image filename (optional).
Source:

saveRecording(filename)

Save the recording as a series of frames in a zip file
Parameters:
Name Type Default Description
filename string frames.zip of the file to download
Source:

scaleFromCenter(x, y)

Scale the canvas by a factor from the center. If only one parameter is passed, the canvas will be scaled uniformly.
Parameters:
Name Type Default Description
x number scaling factor in the x direction
y number null scaling factor in the y direction
Source:

setup()

Function ran once
Source:

startRecording()

Start recording frames
Source:

stop()

Completely stop the engine. Note that this step is final and there's no way to programatically restart it after this call.
Source:

stopRecording()

Stop recording frames
Source: