Tuesday, November 10th, 2009

Closure Graphics Fun

Category: Closure

<p>Stephen Thomas has been experimenting with Closure and the graphics libraries:

This does something similiar to what I do on Stark, my visual mud project 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
< view plain text >
  1. var graphics = goog.graphics.createGraphics(200, 150);
  2.  
  3.     // define the colors for the squares and the dot
  4.     var square_fill = new goog.graphics.SolidFill('yellow');
  5.     var square_stroke = new goog.graphics.Stroke(2, 'green');
  6.     var dot_fill = new goog.graphics.SolidFill('blue');
  7.     var dot_stroke = new goog.graphics.Stroke(1, 'black');
  8.  
  9.     // the dot's initial position
  10.     var dot = {x: 1, y: 1};
  11.  
  12.     // properties    
  13.     var size = 40;
  14.     var margin = 5;
  15.     var width = size - margin;
  16.     var num_rows = 3;
  17.     var num_cols = 4;
  18.  
  19.     // draw the squares
  20.     for (var x = 0; x < num_cols; x++) {
  21.         for (var y = 0; y < num_rows; y++) {
  22.             graphics.drawRect(margin + x * size, margin + y * size, width, width, square_stroke, square_fill);
  23.         }
  24.     }
  25.  
  26.     // draw the dot
  27.     dot['graphic'] = graphics.drawEllipse(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2, width / 4, width / 4, dot_stroke, dot_fill);
  28.    
  29.     // call if the dot's position changes
  30.     redraw_dot = function() {
  31.         dot['graphic'].setCenter(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2);
  32.     }
  33.    
  34.     // key event handler
  35.     var key_handler = new goog.events.KeyHandler(document);
  36.     var key_event = function (e) {
  37.         if (e.keyCode == goog.events.KeyCodes.UP && dot['y'] > 0) {
  38.             dot['y'] -= 1;
  39.         } else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] < = num_cols - 2) {
  40.             dot['x'] += 1;
  41.         } else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
  42.             dot['y'] += 1;
  43.         } else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x'] > 0) {
  44.             dot['x'] -= 1;
  45.         }
  46.         redraw_dot();
  47.     }
  48.    
  49.     // put everything together
  50.     goog.events.listen(key_handler, 'key', key_event);
  51.     graphics.render(document.getElementById('shapes'));

Related Content:

Posted by Dion Almaer at 6:45 am
5 Comments

+----
1.6 rating from 73 votes

5 Comments »

Comments feed TrackBack URI

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

Comment by DmitryBaranovskiy — November 10, 2009

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

Comment by slightlyoff — November 10, 2009

@slightlyoff, Well, talking without showing is hardly convincible. Make a small demo that proves your point. :)

Comment by DmitryBaranovskiy — November 10, 2009

@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.

Comment by fernmicro — November 15, 2009

@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.

Comment by nwhite — November 16, 2009

Leave a comment

You must be logged in to post a comment.