Amino

HTML Canvas Scenegraph

News

Amino 1.1 is out. Go get it!

Amino Overview

Amino is 2D scene graph library, 100% open source (BSD), for HTML Canvas using JavaScript. With Amino you can easily create interactive graphics using a simple API. Declare shapes and animations then let Amino do the hard work of drawing and animating them. For example:

//create Amino engine
var engine = new Amino();
//attach to HTML Canvas element
var canvas = engine.addCanvas('mycanvas');
//add rectangle to the scene
var r = new Rect()
    .set(10,20,50,50)
	.setFill("red)
	.setStroke("black")
	.setStrokeWidth(5);
canvas.add(r);

//animate r.x from 0 -> 300 over 5.5 seconds, and repeat
runner.addAnim(new PropAnim(r, "x", 0, 300, 5.5).setLoop(-1));

//let'er rip
runner.start();

Features

Browser / Device / OS Support

Amino should work in any browser with Canvas support, which means the most recent version of all major browsers (including Internet Explorer 9!). If there's an older version of a browser that doesn't work, but does have canvas support, please file a bug so we can fix it.

Amino has also been tested on webOS 2.1, webOS 3, iOS 4.3, iOS 5

Download

1.1 Final Release

1.0 release

Checkout / browse the source [ Google Code repo ]

Getting Started Tutorial

In this tutorial we will create some text that slides in from the side when you click on the circle. Click it again to rotate the text. Here's what it looks like:

Create a Canvas

First you need to create an HTML Canvas element in your document. You need to give the canvas a width and height, as well as an id. 

<html>
  <body>
    <canvas width="400" height="200" id="myCanvas"/>
  <body>
<html>

Now import amino and create a new runner object attached to your canvas inside a script tag. Then set the background to white and add an empty group.

<html>
<head>
  <script language="JavaScript" src="amino.js"></script>
</head>
  <body>
    <canvas width="400" height="200" id="myCanvas"/>

  <script>
    var engine = new Amino();
    var canvas = engine.addCanvas("myCanvas");
    canvas.setBackground("white");
    var all = new Group();
    canvas.add(all);
    
    engine.start();
  </script>

  <body>
<html>

r.start() in the code above will start the drawing process. With just the code above you should see an empty canvas with debugging stats in the lower right hand corner

Add Shapes

Amino has shape objects for circles and rectangles. You can also create any shape you want using the PathNode. For this tutorial let's add a circle. 

var cir = new Circle();
    cir.setX(300);
    cir.setY(150);
    cir.setRadius(30);
    cir.setFill("red");

    all.add(cir);

The code above creates a new circle then sets the x, y, radius, and fill properties. All properties in Amino are set with setter methods. These methods always return the object you are setting the property on, which means you can very easily chain them. So instead of the above code, which is quite verbose, you could do the following:

var cir = new Circle().setX(300).setY(300).setRadius(30).setFill("red");
all.add(cir);

Circle also has a set() shorthand for setting the x, y, and radius all at once.

var cir = new Circle().set(300,300,30).setFill("red");
all.add(cir);

Listen to Events

Events are slightly different than you are used to. Rather than listening to a shape or node on the screen you add a listener to the canvas and tell it which objects you want to listen to. This lets you have multiple listeners that listen to the same object, or have a listener that gets events from every object in the scene (ex: get all key presses everywhere). 

canvas.onPress(cir,function() {
    if(cir.getFill() == "red") {
        cir.setFill("blue");
    } else {
        cir.setFill("red");
    }
});

The event listener above listens for press events on just the circle. This maps to both mouse press and touchstart events. When it is called back it will toggle the color between red and blue. Note that you don't have to call any sort of refresh() or repaint() method. The scene will automatically redraw whenever anything changes.

Geometric Transforms

Any node in Amino can be scaled, translated or rotated by putting it inside of a Transform node. Let's add a text node that is translated 100px to the right and rotated by 15 degrees


var text = new Text()
    .setText("Amino!")
    .setFill("#50c0e0")
    .setY(100)
    .setFont("bold 50pt Arial");
var trans = new Transform(text);
trans.setTranslateX(100);
trans.setRotate(15);
all.add(trans);

Note that the fill and font properties both use the standard Canvas / CSS syntax. Fill can be either a hex string or a named color like "blue". Font uses the same syntax as the CSS font: property.

Animation

Now let's make it animated. You can create animations in Amino using one of the following classes: PropAnim, PathAnim, or a manual frame callback, CallbackAnim. For basic animation you will use the PropAnim class. It animates a single property on a single node. For example, you can rotate something by animating the rotate property of a Transform node.

A property animation requires the target node, the name of the property you want to animate, start and end values, and a duration. For example, if we want to rotate the transform above by 360 degrees over 15 seconds we would code the following.

var a = new PropAnim(trans,"rotate",0,360 15);
engine.addAnim(a);

Note that you have to add an animation to the Amino engine in order for it to be active.

Amino lets you have an unlimited number of animations active at once. You can also make them loop forever if you want. For this demo lets make the text logo slide in from the side when you click the circle, then rotate around when you click it again. I've modified the circle listener like this:

canvas.onPress(cir,function() {
    if(cir.getFill() == "red") {
        cir.setFill("blue");
        var anim = new PropAnim(trans,"translateX",-250,100,1);
        engine.addAnim(anim);
        anim.start();
    } else {
        cir.setFill("red");
        var anim = new PropAnim(trans,"rotate",0,360,0.5);
        engine.addAnim(anim);
        anim.start()
    }
});

Finishing up

Here is the full and complete code. 

<canvas id="tutorial" width="400" height="200"></canvas>

<script>

    var engine = new Amino();
    var can = engine.addCanvas('tutorialcanvas');
    can.setBackground("white");
    var all = new Group();
    can.add(all);


    //add circle w/ event listener
    var cir = new Circle()
        .set(300,150,30);
        .setFill("red");
    all.add(cir);
    can.onPress(cir,function() {
        if(cir.getFill() == "red") {
            cir.setFill("blue");
            var anim = new PropAnim(trans,"translateX",-250,100,1);
            engine.addAnim(anim);
            anim.start();
        } else {
            cir.setFill("red");
            var anim = new PropAnim(trans,"rotate",0,360,0.5);
            engine.addAnim(anim);
            anim.start();
        }
    });


    //add text inside transform
    var text = new Text()
        .setText("Amino!")
        .setFill("#50c0e0")
        .setY(100)
        .setFont("bold 50pt Arial")
        ;
    var trans = new Transform(text);
    trans.setTranslateX(100);
    all.add(trans);
    
    engine.start();
</script>

Next Steps

First, you'll want to download a copy of Amino from here. This tutorial shows you how to use JavaScript, but the Java version is almost identical. Then check out the API references here: JavaScript API. Finally, you might want to join the developer mailing list.

Amino is licensed under the BSD license. This means you can use it for any purpose. If you improve Amino we ask you to contribute your improvements back to the community, but this is not required. Amino can be used in commercial software, other open source projects, and for any other purpose.

Contribute

Google Code project site

Request features and report bugs: Issues

Browse the source

Join the developer mailing list

Thank you for using Amino