Friday 11 May 2012

Google Dart Animation

I have just worked out how to do an HTML 5 animation in the new Dart language and will share the code here.

Dart is similar to JavaScript but is more java-like and appears less illogical than JavaScript.
For example - you have real classes and real objects rather than ... well, whatever those JavaScript entities are - I never did know!
 I am interested in the speed of compiled Dart in a V8 runtime. If its as fast as I believe 9I have seen bench marked as fast as c!!!!) then its the way to go for me.... UPDATE - apparently is NOT particularly fast, damn...... - I will (update, not) be able to render thousands of lovely 3D polygons in my 3D model in a browser - (not) yum. Come on Google - makes it super fast like your Big Table please.

Here is the code for a bouncing ball. Its basically a JavaScript to Dart conversion that I did.
I used Version 0.1.0.201205020515, Build 7232
Dart SDK version 7230, Dartium version in May 2012 (just in case this example is not working any more)

Note: The ball is actually bouncing around - this is a screen shot :)


Just make 2 files and copy paste these two files into Dart IDE, it will work :)
Here is the Dart file (its HTML 5 into Dart type of thing)
********************************************************
#import('dart:html');

class TubeBall {
var x2 = 0;
CanvasElement canvas;  
var ctx;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300;
  TubeBall() {
  }
  void circle(x1,y1,r) {
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "red";
    ctx.arc(x1, y1, r, 0, Math.PI*2, true);
    ctx.fill();
    ctx.stroke();
  }
  void rect(x3,y2,w,h) {
    ctx.beginPath();
    ctx.rect(x3,y2,w,h);
    ctx.closePath();
    ctx.fill();
    
  }
  void init() {
    write("Hello World!");
    canvas = document.query("#canvas");   
     ctx = canvas.getContext("2d");   
     window.setInterval(draw, 10);
  }
  void clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  }
  void draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rect(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    circle(x, y, 10);
    if (x + dx > WIDTH || x + dx < 0)
      dx = -dx;
    if (y + dy > HEIGHT || y + dy < 0)
      dy = -dy;
    x += dx;
    y += dy;
  }
  void draw3(){
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "red";
    ctx.arc(100, 100, 15, 0, 7, false);
    ctx.fill();
    ctx.closePath();
    ctx.stroke();
    x2 += 10;
    ctx.fillRect (30, 30+x2, 55, 50); 
    ctx.fillText("hi ho hum", 300, 300);
    ctx.fillStyle = "#00FF00";
  //  ctx.clientLeft = "100";
    window.setInterval(draw2, 1000);
  }
  void draw2(){
    x += 10;
//    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    if(x<80){
    ctx.fillStyle = "#FF0000";
    ctx.fillRect (40+x, 40, 75, 80); 
    } else {
      ctx.fillRect (40, 40+2*x, 75+x, 80);  
      ctx.fillStyle = "#0000FF";
    }

  }  
  void write(String message) {
    // the HTML library defines a global "document" variable

    
    document.query('#status').innerHTML = message;
  }
}

void main() {
  new TubeBall().init();
}
*********************************************************

and here is the html!


**********************************************************

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h1>Test</h1>
    <h2 id="status">dart is not running</h2>
    <script type="application/dart" src="TubeBall.dart"></script>
    <script> // dunno what this is..
if (navigator.webkitStartDart) {
  navigator.webkitStartDart();
} else {
  window.addEventListener("DOMContentLoaded", function (e) {

    var scripts = document.getElementsByTagName("script");
    var length = scripts.length;
    for (var i = 0; i < length; ++i) {
      if (scripts[i].type == "application/dart") {
        // Remap foo.dart to foo.js or foo.js_ depending
        // on the chosen compiler (frog or dart2js).
        if (scripts[i].src && scripts[i].src != '') {
          var script = document.createElement('script');
          var compiler = scripts[i].getAttribute('data-compiler');
          if (compiler == "dart2js") {
            script.src = scripts[i].src + '.js_';
          } else {
            script.src = scripts[i].src + '.js';
          }
          var parent = scripts[i].parentNode;
          parent.replaceChild(script, scripts[i]);
        }
      }
    }
  }, false);
}</script>
        <div>
        <canvas id="canvas" width="400" height="300"></canvas>
    </div>
  </body>
</html>




**********************************************************

Hope it works for you  :)

No comments: