lamberta · April 16, 2010 06:27
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  function init() {
    //we'll be putting the rest of our javascript here!
  };
  </script>
  </head>
  <!--init() is called when the canvas is ready for us.-->
  <body onload="javascript:init();">
    <canvas id="my_canvas" width="600" height="400">
      <p>Fallback: Canvas element is not supported in this browser!</p>
    </canvas>
  </body>
 </html>
diff --git a/gistfile10.js b/gistfile10.js
 var r = 5;
 var a = 0;
 var frame = 0;

 dot.loop(function(obj) {
    obj.modify({x:circle_x(a),
                y:circle_y(a),
                fill:random_color() });

    frame += 1; //update frame count
    a += 10;    //update angle rotation
    r += 0.3;   //update radius

    if(a % 15 == 0){ dot.fill = '#000000'; }
    else{ dot.fill = random_color(); }

    //clear canvas every 800th frame, reset radius
    if(frame % 800==0){oo.canvas().clear(); r = 5;}
 }, 0, '48fps'); //loop indefinitely at 48 frames/sec
diff --git a/gistfile2.js b/gistfile2.js
 var frame = 0;
 dot.loop(function(obj) {
    obj.modify({x:circle_x(a),
                y:circle_y(a) });
    a += 15;
    frame += 1;
    //run indefinitely, clearing after every frame
 }, 0, '24fps', true);
diff --git a/gistfile3.js b/gistfile3.js
 oo.animate(function() {
    //check wall collision
    for(var i = 0; i < numballs; i++) {
        var ball = balls[i];
        ball.modify({x:ball.x + ball.vx,
                     y:ball.y + ball.vy});
        Bouncy.check_walls(ball);
    }
    //check other ball collision
    for(i = 0; i < numballs - 1; i++) {
        var ball_a = balls[i];
        for(var j = i + 1; j < numballs; j++) {
            var ball_b = balls[j];
            Bouncy.check_collision(ball_a, ball_b);
        }
        balls[i].draw(); //and render
    }
 }, '24fps', true/*optional*/); //clears every frame by default
diff --git a/gistfile4.js b/gistfile4.js
 (function(oo) {
    oo.canvas('#my_canvas');
    oo.rect({x:25, y:25, width:50, height:50}).draw();
 })($doodle);
diff --git a/gistfile5.js b/gistfile5.js
 (function(oo) {
    oo.canvas('#my_canvas');
    oo.rect({x:25, y:25, width:50, height:50}).draw()
        .modify({x:'+= 25',
                 y:function(o,p){ return p*2; },
                 fill:"blue"}).draw();
 })($doodle);
diff --git a/gistfile6.js b/gistfile6.js
 (function(oo) {
    oo.canvas('#my_canvas');
    var box = oo.rect({x:25, y:25,
                       width:50, height:50, fill:"#ff0000"});
    box.draw(); //draw a red box with initial parameters

    box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
    box.modify({fill:'purple'}).rotate(-45).draw();
    box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
    box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
 })($doodle);
diff --git a/gistfile7.js b/gistfile7.js
 (function(oo) {
    oo.canvas('#my_canvas');
    var cx = oo.canvas().width/2;  //horizontal center of canvas
    var cy = oo.canvas().height/2; //vertical center of canvas

    var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});
    dot.draw(); //initial red circle in the center

    var r = 100; //radius of our outside circle
    var a = 0;   //angle of rotation in degrees

    //function to convert degrees to radians
    var radians = function (deg) { return deg * Math.PI/180; };

    //function to generate a random color
    var random_color = function () {
        var color = (0xffffff * Math.random()).toString(16);
        return color.replace(/\./i,"").slice(0,6);
    };

    //a traditional for-loop, called 24 times
    for(var i=0; i < 24; i++) {
        //give dot some new coordinates and a random color
        dot.modify({x: cx + Math.cos(radians(a)) * r,
                    y: cy + Math.sin(radians(a)) * r,
                    fill: random_color() });
        dot.draw(); //draw to canvas
        a += 15; //increment angle by 15 degrees
    }
 })($doodle);
diff --git a/gistfile8.js b/gistfile8.js
 (function(oo) {
    //change background color
    oo.canvas('#my_canvas').bgcolor('#FFCC33');

    var cx = oo.canvas().width/2;  //horizontal center of canvas
    var cy = oo.canvas().height/2; //vertical center of canvas

    var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});

    var r = 100; //radius of our outside circle
    var a = 0;   //angle of rotation in degrees

    //for converting degrees to radians
    var radians = function (deg) { return deg * Math.PI / 180; };

    //our equations for circle positions
    var circle_x = function(a){return cx+Math.cos(radians(a))*r;};
    var circle_y = function(a){return cy+Math.sin(radians(a))*r;};

    //generate a random color
    var random_color = function () {
        var color = (0xffffff * Math.random()).toString(16);
        return color.replace(/\./i,"").slice(0,6);
    };

    //these are evaluated on updates
    dot.loop({x: function(){ return circle_x(a); },
              y: function(){ return circle_y(a); },
              fill: function(){ return random_color(); },
              on_update: function(){ a += 15 }
             }, 25); //initial center draw + 24 increments around
 })($doodle);
diff --git a/gistfile9.js b/gistfile9.js
 dot.loop(function(obj){
    obj.modify({x:circle_x(a),
                y:circle_y(a),
                fill:random_color() });
    a += 15;
 }, 25);
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
	<script src="./doodle-0.1.js" type="text/javascript"></script>
	<script type="text/javascript">
	function init() {
	//we'll be putting the rest of our javascript here!
	};
	</script>
	</head>
	<!--init() is called when the canvas is ready for us.-->
	<body onload="javascript:init();">
	<canvas id="my_canvas" width="600" height="400">
	<p>Fallback: Canvas element is not supported in this browser!</p>
	</canvas>
	</body>
	</html>
	var r = 5;
	var a = 0;
	var frame = 0;

	dot.loop(function(obj) {
	obj.modify({x:circle_x(a),
	y:circle_y(a),
	fill:random_color() });

	frame += 1; //update frame count
	a += 10; //update angle rotation
	r += 0.3; //update radius

	if(a % 15 == 0){ dot.fill = '#000000'; }
	else{ dot.fill = random_color(); }

	//clear canvas every 800th frame, reset radius
	if(frame % 800==0){oo.canvas().clear(); r = 5;}
	}, 0, '48fps'); //loop indefinitely at 48 frames/sec
	oo.animate(function() {
	//check wall collision
	for(var i = 0; i < numballs; i++) {
	var ball = balls[i];
	ball.modify({x:ball.x + ball.vx,
	y:ball.y + ball.vy});
	Bouncy.check_walls(ball);
	}
	//check other ball collision
	for(i = 0; i < numballs - 1; i++) {
	var ball_a = balls[i];
	for(var j = i + 1; j < numballs; j++) {
	var ball_b = balls[j];
	Bouncy.check_collision(ball_a, ball_b);
	}
	balls[i].draw(); //and render
	}
	}, '24fps', true/optional/); //clears every frame by default
	(function(oo) {
	oo.canvas('#my_canvas');
	oo.rect({x:25, y:25, width:50, height:50}).draw();
	})($doodle);
	(function(oo) {
	oo.canvas('#my_canvas');
	var box = oo.rect({x:25, y:25,
	width:50, height:50, fill:"#ff0000"});
	box.draw(); //draw a red box with initial parameters

	box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
	box.modify({fill:'purple'}).rotate(-45).draw();
	box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
	box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
	})($doodle);
	(function(oo) {
	oo.canvas('#my_canvas');
	var cx = oo.canvas().width/2; //horizontal center of canvas
	var cy = oo.canvas().height/2; //vertical center of canvas

	var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});
	dot.draw(); //initial red circle in the center

	var r = 100; //radius of our outside circle
	var a = 0; //angle of rotation in degrees

	//function to convert degrees to radians
	var radians = function (deg) { return deg * Math.PI/180; };

	//function to generate a random color
	var random_color = function () {
	var color = (0xffffff * Math.random()).toString(16);
	return color.replace(/\./i,"").slice(0,6);
	};

	//a traditional for-loop, called 24 times
	for(var i=0; i < 24; i++) {
	//give dot some new coordinates and a random color
	dot.modify({x: cx + Math.cos(radians(a)) * r,
	y: cy + Math.sin(radians(a)) * r,
	fill: random_color() });
	dot.draw(); //draw to canvas
	a += 15; //increment angle by 15 degrees
	}
	})($doodle);
	(function(oo) {
	//change background color
	oo.canvas('#my_canvas').bgcolor('#FFCC33');

	var cx = oo.canvas().width/2; //horizontal center of canvas
	var cy = oo.canvas().height/2; //vertical center of canvas

	var dot = oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});

	var r = 100; //radius of our outside circle
	var a = 0; //angle of rotation in degrees

	//for converting degrees to radians
	var radians = function (deg) { return deg * Math.PI / 180; };

	//our equations for circle positions
	var circle_x = function(a){return cx+Math.cos(radians(a))*r;};
	var circle_y = function(a){return cy+Math.sin(radians(a))*r;};

	//generate a random color
	var random_color = function () {
	var color = (0xffffff * Math.random()).toString(16);
	return color.replace(/\./i,"").slice(0,6);
	};

	//these are evaluated on updates
	dot.loop({x: function(){ return circle_x(a); },
	y: function(){ return circle_y(a); },
	fill: function(){ return random_color(); },
	on_update: function(){ a += 15 }
	}, 25); //initial center draw + 24 increments around
	})($doodle);
	dot.loop(function(obj){
	obj.modify({x:circle_x(a),
	y:circle_y(a),
	fill:random_color() });
	a += 15;
	}, 25);