- Low-Level Drawing APIs
- Understanding the Amino APIs
- Drawing Binary Clock Elements
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Understanding the Amino APIs
In this section, we'll quickly cover the essential components needed to create our binary clock.
Shape is Amino's base class for all non-image objects drawn on the screen. Generally you won't create Shapes directly, but instead you'll use its children Rect (Rectangles), Circle (Circles), and Text, which are included in the API. Listing 1 shows how we would declare a rectangle located at (0,0) that is 100 pixels wide by 50 pixels tall and set its color to red.
Listing 1—Creating a rectangle.
var rect = new Rect().set(0, 0, 100, 50); rect.setFill(Color.RED);
In addition to setting the dimensions and color, you can set stroke width, stroke color, and opacity.
The Node class is the most basic drawable object in Amino. All shapes, paths, and text are extended from the abstract Node class. Nodes can be positioned in space, mark themselves to be redrawn, and determine whether a point is contained within the Node. The Group class is a container for other Nodes and has its own distinct x and y coordinates that affect the drawing of its child nodes. When we draw a scene, we give Amino a root node, and it traverses the tree, drawing all its children. Figure 2 shows the relationship of the BinaryClock class/function, which has a root node that contains multiple instances of ClockLines.
)
Figure 2 Binary clock group.
Amino's JavaScript Runner class is where we set things like the frame rate, the root group node, background colors, and debug information. You can also attach a callback function that will be executed on every frame. Runner's counterpart in Java is the Core class. Instead of designating a Canvas context that it will draw upon as the JavaScript API does, Core creates a JFrame to hold the application and embeds a Graphics2D component inside it, on which it can draw. Listings 2 and 3 show the code for Java (Listing 2) and JavaScript (Listing 3) to instantiate a blank drawing in debug mode with a frame rate of 30 frames per second.
Listing 2—Declaring a Core object (Java).
public class BinaryClock extends Core implements Callback {
Group group = new Group();
// truncated code
public BinaryClock() {
setSize(600,400);
setBackground(Color.WHITE);
setFPS(30);
drawLines();
root = group;
addCallback(this);
}
}
Listing 3—Creating a Runner (JavaScript).
function BinaryClock() {
if ( !(this instanceof arguments.callee) ) {
return new arguments.callee(arguments);
}
var self = this;
self.init = function () {
self.currentTime = new Date();
self.group = new Group();
self.drawLines();
var can = document.getElementById("gameboard");
var runner = new Runner().setCanvas(can);
runner.root = self.group;
runner.addCallback(self.setTime);
runner.start();
};