Tuesday, November 10th, 2009
Closure Graphics Fun
Category: Closure
This does something similiar to what I do on Stark, my visual mud project [github page] that uses the Processing JS library and the HTML 5 <canvas> element, but instead of creating a draw function that is executed x amounts per seconds, you just call a draw function and assign it to a variable for future interactions. Here is the source code for this example (you can also just look at the current page's source):
JAVASCRIPT:
-
-
var graphics = goog.graphics.createGraphics(200, 150);
-
-
// define the colors for the squares and the dot
-
var square_fill = new goog.graphics.SolidFill('yellow');
-
var square_stroke = new goog.graphics.Stroke(2, 'green');
-
var dot_fill = new goog.graphics.SolidFill('blue');
-
var dot_stroke = new goog.graphics.Stroke(1, 'black');
-
-
// the dot's initial position
-
var dot = {x: 1, y: 1};
-
-
// properties
-
var size = 40;
-
var margin = 5;
-
var width = size - margin;
-
var num_rows = 3;
-
var num_cols = 4;
-
-
// draw the squares
-
for (var x = 0; x <num_cols; x++) {
-
for (var y = 0; y <num_rows; y++) {
-
graphics.drawRect(margin + x * size, margin + y * size, width, width, square_stroke, square_fill);
-
}
-
}
-
-
// draw the dot
-
dot['graphic'] = graphics.drawEllipse(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2, width / 4, width / 4, dot_stroke, dot_fill);
-
-
// call if the dot's position changes
-
redraw_dot = function() {
-
dot['graphic'].setCenter(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2);
-
}
-
-
// key event handler
-
var key_handler = new goog.events.KeyHandler(document);
-
var key_event = function (e) {
-
if (e.keyCode == goog.events.KeyCodes.UP && dot['y']> 0) {
-
dot['y'] -= 1;
-
} else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <= num_cols - 2) {
-
dot['x'] += 1;
-
} else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
-
dot['y'] += 1;
-
} else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x']> 0) {
-
dot['x'] -= 1;
-
}
-
redraw_dot();
-
}
-
-
// put everything together
-
goog.events.listen(key_handler, 'key', key_event);
-
graphics.render(document.getElementById('shapes'));
-
Related Content:
1.4 rating from 66 votes
Just to show comparison I repeated the same demo with Raphaël & jQuery: http://tr.im/notclosure
Result:
Google Closure Demo: JavaScript: 795 Kb, 57(!) http requests
Raphaël/jQuery Demo: JavaScript: 238 Kb, 2 http requests
Dimitry:
That hardly seems reasonable. As with Dojo, Closure is meant to be used with the build tools that it comes with. If you make a build, you should be able to get it down to only a couple of requests and only the code that actually executes (thanks to the Closure compiler’s dead code stripping).
Regards
@slightlyoff, Well, talking without showing is hardly convincible. Make a small demo that proves your point. :)
@DmitryBaranovskiy, bravo.
This closure example seems like its really just to demonstrate the API. Otherwise it’s like using a dump truck to move a grain of sand.
@DmitryBaranovskiy your ignorance is amusing. you want proof? here you go! http://www.nwhite.net/lab/closure/
Google Closure Demo: Javascript 12kb, 1 http request
Suddenly your solution doesn’t look all that attractive. The build process is beautiful and very easy to use.