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:
Post a Comment