jberger · January 5, 2012 15:41 · kraih · Jan 5, 2012
diff --git a/metacpan.pl b/metacpan.pl
 use Mojolicious::Lite;
 # requires jCanvaScript: http://jcscript.com/

 get '/' => 'index';

 app->start;

 __DATA__

 @@ index.html.ep
 <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript" src="jCanvaScript.1.5.11.min.js"> </script>
        <script type="text/javascript">
 logo = [
  // m
  [2,14],[2,13],[2,12],[2,11],[2,10],[2,9],[2,8],[2,7],
  [3,14],[3,13],[3,12],[3,11],[3,10],[3,9],[3,8],[3,7],
  [4,8],[4,7],
  [5,8],[5,7],
  [6,8],[6,7],
  [7,8],[7,7],
  [8,14],[8,13],[8,12],[8,11],[8,10],[8,9],[8,8],[8,7],
  [9,14],[9,13],[9,12],[9,11],[9,10],[9,9],[9,8],[9,7],
  [10,8],[10,7],
  [11,8],[11,7],
  [12,8],[12,7],
  [13,8],[13,7],
  [14,14],[14,13],[14,12],[14,11],[14,10],[14,9],[14,8],[14,7],
  [15,14],[15,13],[15,12],[15,11],[15,10],[15,9],[15,8],[15,7],
  // e
  [18,14],[18,13],[18,12],[18,11],[18,10],[18,9],[18,8],[18,7],
  [19,14],[19,13],[19,12],[19,11],[19,10],[19,9],[19,8],[19,7],
  [20,14],[20,13],[20,8],[20,7],
  [21,14],[21,13],[21,8],[21,7],
  [22,14],[22,13],[22,8],[22,7],
  [23,14],[23,13],[23,8],[23,7],
  [24,14],[24,13],[24,8],[24,7],
  [25,14],[25,13],[25,8],[25,7],
  [24,9],[24,10],
  [25,9],[25,10],
  // t
  [28,14],[28,13],[28,12],[28,11],
  [29,14],[29,13],[29,12],[29,11],
  [30,14],[30,13],
  [31,14],[31,13],
  [28,10],[28,9],[28,8],[28,7],[28,6],[28,5],
  [29,10],[29,9],[29,8],[29,7],[29,6],[29,5],
  [30,8],[30,7],
  [31,8],[31,7],
  // a
  [34,14],[34,13],[34,12],[34,11],[34,8],[34,7],
  [35,14],[35,13],[35,12],[35,11],[35,8],[35,7],
  [36,14],[36,13],[36,8],[36,7],
  [37,14],[37,13],[37,8],[37,7],
  [38,14],[38,13],[38,8],[38,7],
  [39,14],[39,13],[39,8],[39,7],
  [40,14],[40,13],[40,12],[40,11],[40,10],[40,9],[40,8],[40,7],
  [41,14],[41,13],[41,12],[41,11],[41,10],[41,9],[41,8],[41,7],
  // c
  [44,14],[44,13],[44,12],[44,11],[44,10],[44,9],[44,8],[44,7],
  [45,14],[45,13],[45,12],[45,11],[45,10],[45,9],[45,8],[45,7],
  [46,14],[46,13],[46,8],[46,7],
  [47,14],[47,13],[47,8],[47,7],
  [48,14],[48,13],[48,8],[48,7],
  [49,14],[49,13],[49,8],[49,7],
  [50,14],[50,13],[50,8],[50,7],
  [51,14],[51,13],[51,8],[51,7],
  // p
  [54,18],[54,17],[54,16],[54,15],
  [55,18],[55,17],[55,16],[55,15],
  [54,14],[54,13],[54,12],[54,11],[54,10],[54,9],[54,8],[54,7],
  [55,14],[55,13],[55,12],[55,11],[55,10],[55,9],[55,8],[55,7],
  [56,14],[56,13],[56,8],[56,7],
  [57,14],[57,13],[57,8],[57,7],
  [58,14],[58,13],[58,8],[58,7],
  [59,14],[59,13],[59,8],[59,7],
  [60,14],[60,13],[60,12],[60,11],[60,10],[60,9],[60,8],[60,7],
  [61,14],[61,13],[61,12],[61,11],[61,10],[61,9],[61,8],[61,7],
  // a
  [64,14],[64,13],[64,12],[64,11],[64,8],[64,7],
  [65,14],[65,13],[65,12],[65,11],[65,8],[65,7],
  [66,14],[66,13],[66,8],[66,7],
  [67,14],[67,13],[67,8],[67,7],
  [68,14],[68,13],[68,8],[68,7],
  [69,14],[69,13],[69,8],[69,7],
  [70,14],[70,13],[70,12],[70,11],[70,10],[70,9],[70,8],[70,7],
  [71,14],[71,13],[71,12],[71,11],[71,10],[71,9],[71,8],[71,7],
  // n
  [74,14],[74,13],[74,12],[74,11],[74,10],[74,9],[74,8],[74,7],
  [75,14],[75,13],[75,12],[75,11],[75,10],[75,9],[75,8],[75,7],
  [76,8],[76,7],[80,14],[80,13],
  [77,8],[77,7],[81,14],[81,13],
  [78,8],[78,7],[80,12],[80,11],
  [79,8],[79,7],[81,12],[81,11],
  [80,10],[80,9],[80,8],[81,5],
  [81,10],[81,9],[83,7],[85,3],
 ];
        </script>
        <script type="text/javascript">
        function start()
        {
            var wait = 0;
            var size = 7;
            jc.start('canvas_1',true);
            for(var i=0; i < logo.length; i++) {
              wait += Math.random() * 80;
              make_block(88*size,0,logo[i][0]*size,logo[i][1]*size,size,wait);
            }
        }
        function stop()
        {
            //we can stop animation on a canvas
            jc.clear('canvas_1');
        }
        function make_block(x1,y1,x2,y2,size,wait,speed)
        {
            setTimeout(function(){
                 jc.rect(x1,y1,size,size,true).animate({x:x2, y:y2}, 2300);
            }, wait);
        }
        window.onload = start;
        </script>
    <head>
    <body>
        <input type="button" onclick="start()" value="start"/>
        <input type="button" onclick="stop()" value="stop"/>
        <canvas height="220" width="800" id="canvas_1"></canvas>
    </body>
    </html>
	use Mojolicious::Lite;
	# requires jCanvaScript: http://jcscript.com/

	get '/' => 'index';

	app->start;

	__DATA__

	@@ index.html.ep
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="jCanvaScript.1.5.11.min.js"> </script>
	<script type="text/javascript">
	logo = [
	// m
	[2,14],[2,13],[2,12],[2,11],[2,10],[2,9],[2,8],[2,7],
	[3,14],[3,13],[3,12],[3,11],[3,10],[3,9],[3,8],[3,7],
	[4,8],[4,7],
	[5,8],[5,7],
	[6,8],[6,7],
	[7,8],[7,7],
	[8,14],[8,13],[8,12],[8,11],[8,10],[8,9],[8,8],[8,7],
	[9,14],[9,13],[9,12],[9,11],[9,10],[9,9],[9,8],[9,7],
	[10,8],[10,7],
	[11,8],[11,7],
	[12,8],[12,7],
	[13,8],[13,7],
	[14,14],[14,13],[14,12],[14,11],[14,10],[14,9],[14,8],[14,7],
	[15,14],[15,13],[15,12],[15,11],[15,10],[15,9],[15,8],[15,7],
	// e
	[18,14],[18,13],[18,12],[18,11],[18,10],[18,9],[18,8],[18,7],
	[19,14],[19,13],[19,12],[19,11],[19,10],[19,9],[19,8],[19,7],
	[20,14],[20,13],[20,8],[20,7],
	[21,14],[21,13],[21,8],[21,7],
	[22,14],[22,13],[22,8],[22,7],
	[23,14],[23,13],[23,8],[23,7],
	[24,14],[24,13],[24,8],[24,7],
	[25,14],[25,13],[25,8],[25,7],
	[24,9],[24,10],
	[25,9],[25,10],
	// t
	[28,14],[28,13],[28,12],[28,11],
	[29,14],[29,13],[29,12],[29,11],
	[30,14],[30,13],
	[31,14],[31,13],
	[28,10],[28,9],[28,8],[28,7],[28,6],[28,5],
	[29,10],[29,9],[29,8],[29,7],[29,6],[29,5],
	[30,8],[30,7],
	[31,8],[31,7],
	// a
	[34,14],[34,13],[34,12],[34,11],[34,8],[34,7],
	[35,14],[35,13],[35,12],[35,11],[35,8],[35,7],
	[36,14],[36,13],[36,8],[36,7],
	[37,14],[37,13],[37,8],[37,7],
	[38,14],[38,13],[38,8],[38,7],
	[39,14],[39,13],[39,8],[39,7],
	[40,14],[40,13],[40,12],[40,11],[40,10],[40,9],[40,8],[40,7],
	[41,14],[41,13],[41,12],[41,11],[41,10],[41,9],[41,8],[41,7],
	// c
	[44,14],[44,13],[44,12],[44,11],[44,10],[44,9],[44,8],[44,7],
	[45,14],[45,13],[45,12],[45,11],[45,10],[45,9],[45,8],[45,7],
	[46,14],[46,13],[46,8],[46,7],
	[47,14],[47,13],[47,8],[47,7],
	[48,14],[48,13],[48,8],[48,7],
	[49,14],[49,13],[49,8],[49,7],
	[50,14],[50,13],[50,8],[50,7],
	[51,14],[51,13],[51,8],[51,7],
	// p
	[54,18],[54,17],[54,16],[54,15],
	[55,18],[55,17],[55,16],[55,15],
	[54,14],[54,13],[54,12],[54,11],[54,10],[54,9],[54,8],[54,7],
	[55,14],[55,13],[55,12],[55,11],[55,10],[55,9],[55,8],[55,7],
	[56,14],[56,13],[56,8],[56,7],
	[57,14],[57,13],[57,8],[57,7],
	[58,14],[58,13],[58,8],[58,7],
	[59,14],[59,13],[59,8],[59,7],
	[60,14],[60,13],[60,12],[60,11],[60,10],[60,9],[60,8],[60,7],
	[61,14],[61,13],[61,12],[61,11],[61,10],[61,9],[61,8],[61,7],
	// a
	[64,14],[64,13],[64,12],[64,11],[64,8],[64,7],
	[65,14],[65,13],[65,12],[65,11],[65,8],[65,7],
	[66,14],[66,13],[66,8],[66,7],
	[67,14],[67,13],[67,8],[67,7],
	[68,14],[68,13],[68,8],[68,7],
	[69,14],[69,13],[69,8],[69,7],
	[70,14],[70,13],[70,12],[70,11],[70,10],[70,9],[70,8],[70,7],
	[71,14],[71,13],[71,12],[71,11],[71,10],[71,9],[71,8],[71,7],
	// n
	[74,14],[74,13],[74,12],[74,11],[74,10],[74,9],[74,8],[74,7],
	[75,14],[75,13],[75,12],[75,11],[75,10],[75,9],[75,8],[75,7],
	[76,8],[76,7],[80,14],[80,13],
	[77,8],[77,7],[81,14],[81,13],
	[78,8],[78,7],[80,12],[80,11],
	[79,8],[79,7],[81,12],[81,11],
	[80,10],[80,9],[80,8],[81,5],
	[81,10],[81,9],[83,7],[85,3],
	];
	</script>
	<script type="text/javascript">
	function start()
	{
	var wait = 0;
	var size = 7;
	jc.start('canvas_1',true);
	for(var i=0; i < logo.length; i++) {
	wait += Math.random() * 80;
	make_block(88size,0,logo[i][0]size,logo[i][1]*size,size,wait);
	}
	}
	function stop()
	{
	//we can stop animation on a canvas
	jc.clear('canvas_1');
	}
	function make_block(x1,y1,x2,y2,size,wait,speed)
	{
	setTimeout(function(){
	jc.rect(x1,y1,size,size,true).animate({x:x2, y:y2}, 2300);
	}, wait);
	}
	window.onload = start;
	</script>
	<head>
	<body>
	<input type="button" onclick="start()" value="start"/>
	<input type="button" onclick="stop()" value="stop"/>
	<canvas height="220" width="800" id="canvas_1"></canvas>
	</body>
	</html>