Cyricles

Experimental HTML5 Canvas Animation Framework

Currently, there's a hugh todo-list and many things, not even placed on it. However, to whom might wonder about, let this just be an experiment and proof of concept.

Please feel free to participate, test and suggest :)

Small Object-Reference

Cyricles

• Cyricles(canvas, options) Instanciate a new Cyricles-Canvas-Object

• Cyricles.extend(defaults, options) Combines two objects into a single set (presets are overwritten)

• Cyricles.loadImages(images, callback) Returns autoloaded images. Fires callback with image-parameter

• Cyricles.clearScreen() Clear the Canvas (with given background)

• Cyricles.render() Render rendering-stack

• Cyricles.startRender() Start the rendering interval (returns true on success)

• Cyricles.stopRender() Clear rendering interval (returns true on success)

• Cyricles.isRendering() True if rendering interval is set

• Cyricles.addItem(item, zOrder) Add an item to the rendering-stack and sort it by zOrder

• Cyricles.removeItem(index) Remove an item off the rendering-stack

• Cyricles.sortStack() Sort the rendering-stack by zOrder

• Cyricles.colorToObject(colorString) Parses color- and alpha-informations out of a string (hex, rgb and rgba) into an animatable object

CyObject

• CyObject(type) Instanciate a new Cyricles-Object

• CyObject.setDrawingAttributes(ctx, options) Set Attributes specified in options to given canvas-context ctx

• CyObject.getAnimatables(user, options) Retrieve all options that will be animated

• CyObject.getAddifiers(animatable, duration, steps, options) Get the increase-value for every in relation to /

• CyObject.addOptionValues(addifiers, options) Add the values of to the values of

• CyObject.timer(fn, duration, steps, parameters, callback) Executes a function for (in ms), passing , executing callback at the end

• CyObject.animate(options, duration, callback) Animates over duration, calling at the end

CyTransformation

Child of CyObject -> all CyObject-Methods are available

• CyTransformation(options) Instanciate a new Cyricles-Transformation

• CyTransformation.draw(ctx) apply the transformation to the context

CyRect

Child of CyObject -> all CyObject-Methods are available

• CyRect(x, y, width, height, options) Instanciate a new Cyricles-Rectangle

• CyRect.draw(ctx) draw the rectangle on the screen

CyArc

Child of CyObject -> all CyObject-Methods are available

• CyArc(x, y, radius, options) Instanciate a new Cyricles-Arc

• CyArc.draw(ctx) draw the arc on the screen

CyText

Child of CyObject -> all CyObject-Methods are available

• CyText(text, x, y, options) Instanciate a new Cyricles-Rectangle

• CyRect.draw(ctx) draw the text on the screen

TODO

• improve Cyricles.extend for easy plugins

• color-animation algorithm

• implement gradient-objects

• implement collision-detection

Done

• implement color-parsing

• fix array-animation-bug (e.g. transformation-scale)

• abstract & clean animation-methods in CyObject + Subclasses

• add some rendering-stack manipulation methods

• improve Cyricles.render (not passing this-context anymore)

License

See LICENSE file.