Δ.js

Features

Easy working with objects

Object-oriented API

// getting the context
var ctx = Delta.query('#example1');

// making two circles
var first = ctx.circle(200, 200, 50, '#0af');
var second = ctx.circle(250, 250, 70, '#a0f');

// adding a stroke to the 1st circle
first.attr('stroke', '2px black');

Transforms

Add and rotate a rect

// making a rect
var rect = ctx.rect(100, 100, 50, 50, 'red');

// rotate it on 45 degree
rect.rotate(45);

Rotate on 1 degree each millisecond

setInterval(function(){
    rect.rotate(1);
});

Mouse events

An object changing its color on hover.

// making a triangle as a path
var triangle = ctx.path([
    [100, 10],
    [10, 90],
    [190, 90]
], 'red');

// adding event listeners
triangle.on('mouseover', function(){
	this.attr('fill', 'blue');
}).on('mouseout', function(){
	this.attr('fill', 'red');
});

Animation

Add and animate a rect

// making a rect
var rect = ctx.rect(10, 100, 80, 50, 'red');

// animate
rect.animate({
    x: 100,
    width: 40,
    fill: 'blue'
}, 1000);