Creates a new Lemniscate animautomaton.
The id of an HTMLCanvasElement on the page that this animation will render to.
Optionalops: Partial<LemniscateOps>An object containing one or more valid {LemniscateOps} properties.
A value between 0 and 1 indicating what percentage behind in the loop each successive arc will be.
Only has an effect with multiple arcs.
The number of individual shapes to draw.
Width of the primary arc (in pixels).
Only has an effect with multiple arcs. Each arc will be this much (proportional to primary arcWidth) narrower than the previous.
Can be set to a negative value to make successive arcs larger.
If not null: the canvas will be painted this colour.
Default: null
An array of 7-character hex code colour strings (e.g. ["#ffffff"]). (Must be 7 characters for opacity to work properly.)
The current iteration of this animation.
Default: 0
A number between 0 and 1 representing the animation's progress through its loop THIS frame.
Default: 0
This function will be called iff timingFunction = "custom"
Custom timing functions must take in an offset to apply to currProgress, and return a value between 0 and 1.
Number of milliseconds this animation's loop will take. Lower = faster.
Default: 1000
Represents which Context2D drawing function to call.
Default: fill
Number of requested renders per second (not guaranteed!).
Default: 60
An array of geometric information objects where geometries[i] is the info for the ith arc.
High resolution timestamp (ms) of when this animation was last mutated.
Default: 0
A number between 0 and 1 representing the animation's progress through its loop LAST frame.
Default: 0
This animation will pause after this many loops.
Default: Infinity (i.e. animation continues forever)
A number between 0 and 1.
The base transparcency to apply to colours when drawing.
Default: 1
Each differentiable section will have this much less opacity than the previous section (minimum 0).
Default: 0
The (x,y) value of the geometric centre of the canvas.
Default: {x: Math.floor(canvas.width / 2), y: Math.floor(canvas.height / 2)}
Uses this.context to draw the current frame of the animation, as determined by this.currProgress. Called by this.animate.
Sets one or more configurable properties of this Animautomaton.
An object containing one or more valid {LemniscateOps} properties.
Radius of the two circles that the centre of the arcs will travel along, in pixels.
Only has an effect with multiple arcs. Each arc will travel along a path with radius this much less (proportional to primary radius).
Can be set to a negative value to make successive arcs travel along a path with greater radius.
A number between 0 and 1.
This animation will be still in its starting position for this proportion of its duration.
Default: 0
A value between 0 and 1 indicating what percentage behind in the loop the arc's tail (endpoint) will be compared to its head (starting point) at all times.
Transformation to apply to this animation's progress.
Default: sinusoidal
The distance from the origin to the centre of each path circle along the x-axis.
Given two points {from} and {to}, calculates the control points necessary to draw a Bezier curve from {from} to {to} that is part of a circle with center of {originOffset}
An object containing the Bezier control points.
Draws a line from the current position of this.context to the position given by vector v.
Moves this.context to position vector v
Draws a radius 2 circle at the position given. Used for debugging.
Given a progress value, calculates the useful points that far along the animation's path for the ith arc.
A number between 0 and 1 representing the position along the path to get.
The index of the arc.
Outer, centre, and inner points for the given progress
Sets one or more configurable properties of this Animautomaton.
An object containing one or more valid {LemniscateOps} properties.
An animautomaton that draws along a path resembling an infinity symbol.