NylCanvasLibrary (NCL) is a lightweight toolbox to make canvas animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
.gitignore
README.md
ncl.js

README.md

NCL.js

NylCanvasLibrary (NCL) is a lightweight toolbox to make canvas animations

N.B: Examples are old and a little messy. I know about that. I'll prepare some new examples soon :)

Features

  • Use requestAnimationFrame API when possible, if not, a setInterval.
  • Provide helpers and function chaining to draw with canvas
  • Plugin architecture
  • Mouse and touch events handled in plugins
  • ... Well, there's probably more, but the doc is coming. Please be patient and look up the code until the doc release :)

Getting started

1) Create a "plugin" function

function MyNclPlugin() {

	//Setup is used to init variables before the loop render begins
	this.setup = function()
	{
	    this.position = new NCLVector2(this.NCL.mouseX, this.NCL.mouseY);
	    this.size = 20;

	};
	
	//The (infinite) loop render. You can draw here
	this.draw = function(scene)
	{
	
		this.NCL.clear();

		this.NCL.colorShape('cyan')
				.colorBorder('red')
				.square(this.position, this.size);
				
		  this.position.setX(this.NCL.mouseX);
		  this.position.setY(this.NCL.mouseY);
	}
}

2) In your HTML, create an empty div with an id

	<div id="myanimation"></div>
	

2) Load the library and hook your function

	var NCL = new NylCanvasLibrary("myanimation",800,600,"canvaselementid",60);
	
	//load the plugin
	NCL.loadPlugin(new MyNclPlugin(NCL));
	NCL.setFullscreen(false);
	NCL.init();
	

API References

Doc is under writing and is not complete for now. Please be patient

Render functions

###Shapes | Function | Arguments | Description | | ------------- |:-------------| -----| | NCL.square(startVector,size) | startVector : NCLVector2
size : number | Draw a square| | NCL.rect(startVector,width,height) | startVector : NCLVector2
width : number
height : number | Draw a rectangle| | NCL.line(startVector, endVector) | startVector : NCLVector2
endVector : NCLVector2
| Draw a line| | NCL.circle(radius,position) | radius : number
position : NCLVector2 | Draw a circle| | NCL.triangle(v1,v2,v3) | v1 : NCLVector2
v2 : NCLVector2
v3 : NCLVector2
| Draw a triangle| | NCL.curve(start, end, center) | start : NCLVector2
end : NCLVector2
center : NCLVector2
| Draw a curve

###Others | Function | Arguments | Description | | --- | --- | --- | | NCL.text(text, font, position, align) | text : string
font : string (See Canvas Doc)
position : NCLVector2
align: string | Draw a text |

###Utils | Function | Arguments | Description | | ------------- |:-------------| -----| | NCL.clear() | none | Clear the screen| | NCL.pointRotate(radians, position) | radians : float
position : NCLVector2 | Rotate the context around a point | NCL.save() | none | Save the context | | NCL.restore() | none | Restore the previously saved context|

More details and doc to come ! (But the code is documented)