Constructor
new CanvasAnimater(canvas_id)
Creates a new instance of the CanvasAnimater class to animate a new or existing canvas element which has HTML 'id' attribute 'canvas_id'. If 'canvas_id' does not correspond to any canvas element already present in the DOM, a new canvas element is created. 'canvas_id' can be undefined, but can not be an empty string.
Parameters:
| Name |
Type |
Description |
canvas_id |
string
|
canvas element's HTML 'id' attribute |
- Source:
Settings
Properties of the CanvasAnimater class correspond to various settings and parameters described below. Most settings can also be accessed and configured through different
methods of CanvasAnimater.
Canvas Settings
Properties:
| Name |
Type |
Default |
Description |
width |
number
|
300
|
horizontal width of canvas in pixels |
height |
number
|
150
|
vertical height of canvas in pixels |
context |
object
|
undefined
|
'2D' canvas rendering context |
center_canvas |
boolean
|
false
|
centers the canvas in the window |
flex_canvas |
boolean
|
false
|
dynamically resizes the canvas to fill the entire window |
draw |
function
|
undefined
|
user defined function that is called every frame, with one optional time parameter corresponding to animation's relative time evolution |
Animation Settings
Properties:
| Name |
Type |
Default |
Description |
start_animation |
boolean
|
true
|
starts animation evolution when animate() is called |
loop_animation |
boolean
|
false
|
loops the animation over the animation evolution time range |
t_start |
number
|
0
|
start time of animation interval |
t_end |
number
|
undefined
|
end time of animation interval |
fps |
number
|
50
|
number of frames-per-second |
animation_mode |
string
|
'rate'
|
the animation mode to be used: 'rate', 'frames' 'time' |
animation_rate |
number
|
0.01
|
amount of time incremented each frame of animation |
animation_frames |
number
|
undefined
|
how many total frames the animation will evolve |
animation_time |
number
|
undefined
|
absolute time of animation evolution |
Interaction Settings
Properties:
| Name |
Type |
Default |
Description |
interaction |
function
|
{ }
|
user specified function that is called every frame when interaction is enabled |
interaction_enabled |
boolean
|
false
|
enables interaction on the canvas if true |
interaction_modes |
string
|
Array.<string>
|
undefined
|
valid interaction modes are 'mousedownmove', 'mousehovermove', 'touchmove', 'scroll'. Input parameter must be a single string, or an array of valid interaction modes |
interaction_origin |
Array.<number>
|
[0, 0]
|
array of two numbers specifying the horizontal/vertical components of the interaction origin point |
scroll_width |
number
|
2000
|
size of horizontal scroll in pixels |
scroll_height |
number
|
2000
|
size of vertical scroll in pixels |
mouseX |
number
|
undefined
|
horizontal x-coordinate in pixels |
mouseY |
number
|
undefined
|
vertical y-component in pixels |
mouseX1 |
number
|
undefined
|
horizontal x-component in unit normalized range |
mouseY1 |
number
|
undefined
|
vertical y-component in unit normalized range |
scrollX |
number
|
undefined
|
horizontal x-component of scroll range in pixels |
scrollY |
number
|
undefined
|
vertical y-component of scroll range in pixels |
scrollX1 |
number
|
undefined
|
horizontal x-component of scroll range in unit normalized range |
scrollY1 |
number
|
undefined
|
vertical y-component of scroll range in unit normalized range |
pressedMouse |
boolean
|
false
|
true when mouse is pressed down |
pressedTouch |
boolean
|
false
|
true when touch is pressed down |
pressed |
boolean
|
false
|
true when mouse or touch is pressed down |
Recording Settings
Properties:
| Name |
Type |
Default |
Description |
record_enabled |
boolean
|
false
|
enables recording if true |
record_max_frames |
number
|
undefined
|
number of maximum recorded frames |
record_loops |
number
|
1
|
number of animation loops to record if 'loop_animation' is true |
pre_loop |
boolean
|
false
|
allows one full animation loop to complete before recording starts if true |
filename |
string
|
'frame_'
|
name prefix given to recorded frames, where each frame's name is indexed as 'filename_{frame_number}' |
Dwitter Settings
Properties:
| Name |
Type |
Default |
Description |
dwitter_mode |
boolean
|
false
|
creates a namespace to interpret code conventions using short function definitions from Dwitter if true |
dwitter_res |
boolean
|
false
|
sets the canvas dimensions to 1920x1080 as used on Dwitter if true |
dwitter_scale |
boolean
|
false
|
rescales the canvas to user specified dimensions if true |
dwitter_code |
string
|
undefined
|
Dwitter code as a string literal |
Methods
animate(settings_object)
Configures and starts the animation
Parameters:
| Name |
Type |
Description |
settings_object |
object
|
an object of CanvasAnimater settings. |
- Source:
center(center_canvas)
Centers the canvas in the window.
Parameters:
| Name |
Type |
Default |
Description |
center_canvas |
boolean
|
true
|
canvas is centered if true |
- Source:
dwitterMode(dwitter_mode, dwitter_scale, dwitter_res)
Creates a namespace to interpret code conventions using short function definitions from Dwitter.net.
Parameters:
| Name |
Type |
Default |
Description |
dwitter_mode |
boolean
|
true
|
enables Dwitter mode if true |
dwitter_scale |
boolean
|
false
|
rescales the canvas to user specified dimensions by transforming the canvas context. |
dwitter_res |
boolean
|
false
|
sets the canvas dimensions to 1920x1080 as used on Dwitter if true |
- Source:
evolve(t_start, t_end)
Sets a time interval through which the animation will evolve.
Parameters:
| Name |
Type |
Description |
t_start |
number
|
start time of animation interval |
t_end |
number
|
end time of animation interval |
- Source:
flex(flex_canvas)
Dynamically resizes the width and height of the canvas to fill the entire window.
Parameters:
| Name |
Type |
Default |
Description |
flex_canvas |
boolean
|
true
|
canvas is flexed if true |
- Source:
FPS(fps)
Sets how many frame-per-second the animation is rendered at.
Parameters:
| Name |
Type |
Description |
fps |
number
|
number of frames-per-second |
- Source:
interact(interaction_modes, interaction_enabled)
Specifies which interaction modes are enabled for the canvas.
Parameters:
| Name |
Type |
Default |
Description |
interaction_modes |
string
|
Array.<string>
|
|
input parameter must be a single string, or an array of valid interaction modes: 'mousedownmove', 'mousehovermove', 'touchmove', 'scroll'. |
interaction_enabled |
bollean
|
true
|
enables interaction on the canvas if true |
- Source:
interactionOrigin(x0, y0)
Sets the relative coordinates for the origin point for which various interaction parameters are defined.
Parameters:
| Name |
Type |
Default |
Description |
x0 |
number
|
0
|
horixontal x-component of the origin point |
y0 |
number
|
0
|
vertical y-component of the origin point |
- Source:
loop(loop_animation)
Loops the animation over the animation evolution time interval.
Parameters:
| Name |
Type |
Default |
Description |
loop_animation |
boolean
|
true
|
animation is looped if true |
- Source:
mode(animation_mode, p0, p1)
Sets which animation mode should be used. Possible types are 'rate', ' frames', 'time'. Additional optional parameters set values to various settings depending on which animation mode is used.
'animation_rate' is the amount of time incremented each frame of animation.
'animation_frames' is how many total frames the animation will evolve.
'animation_time' is the absolute time of animation evolution.
Parameters:
| Name |
Type |
Description |
animation_mode |
string
|
valid strings are 'rate', 'frames', 'time' |
p0 |
number
|
If animation_mode='rate', then p0= 'animation_rate'. If animation_mode='frames', then p0= 'animation_frames'. If animation_mode='time', then p0= 'animation_time'. |
p1 |
number
|
If animation_mode='rate', then p1=undefined. If animation_mode='frames', then p1= 'animation_rate'. If animation_mode='time', then p0= 'animation_rate'. |
- Source:
printSettings()
Prints an object of configured animation settings to the console.
- Source:
record(record_enabled, filename, record_loops, pre_loop)
Enables recording of the canvas by saving individual frames of the animation.
Parameters:
| Name |
Type |
Default |
Description |
record_enabled |
boolean
|
true
|
enables recording if true |
filename |
string
|
frame_
|
name prefix given to recorded frames, where each frame's name is indexed as 'filename_{frame_number}' |
record_loops |
number
|
1
|
number of animation loops to record |
pre_loop |
boolean
|
false
|
allows one full animation loop to complete before recording starts if true |
- Source:
recordMaxFrames(record_max_frames)
Sets a maximum limit to the number of frames to record.
Parameters:
| Name |
Type |
Description |
record_max_frames |
number
|
number of maximum recording frames |
- Source:
Sets the width (horizontal) and height(vertical) components of a canvas wrapper to enable scrolling parameters for canvas interaction when 'scroll' interaction is enabled.
Parameters:
| Name |
Type |
Default |
Description |
width |
number
|
2000
|
size of horizontal scroll in pixels |
height |
number
|
2000
|
size of vertical scroll in pixels |
- Source:
setAnimater(settings_object)
Configures animation settings with an object containing any number of defined CanvasAnimater settings.
Parameters:
| Name |
Type |
Description |
settings_object |
object
|
object with key/value pairs of CanvasAnimater settings |
- Source:
size(width, height)
Sets the width and height dimensions of the canvas.
Parameters:
| Name |
Type |
Description |
width |
number
|
horizontal width of the canvas in pixels. |
height |
number
|
vertical height of the canvas in pixels. |
- Source: