somebox/canvas-fun.html

## canvas-fun.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- example at http://somebox.com/canvas-fun.html -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/ocanvas/1.0/ocanvas.min.js"></script>
  <title>Canvas Experiment</title>

  <script type="text/javascript">
	/*
	  playing around with oCanvas
	  foz: jeremy@somebox.com
	  http://somebox.com && http://bytedept.com
	*/


	var canvas_size = 50;
	var rects = [];
	var canvas;

	$(document).ready(function(){
	  canvas = oCanvas.create({
		canvas: "#canvas",
		background: "#fff",
		fps: 30
	  });
	  $(window).bind('resize', doResize);
	  $('input').bind('change', function(){
		tearDown();
		setUp();
	  });
	  doResize();
	  setUp();
	});

	function getSetting(name){
	  return parseInt($('input[name='+name+']:checked').val());
	}

	function setUp(){
	  // console.log('started');
	  var maxw=getSetting('size'); // max item width
	  var minw=maxw/2;
	  var colorNum = getSetting('color');
	  var num=getSetting('count');
	  var speed=getSetting('speed');
	  var color;

	  for (var x=0; x<num; x++){
		var size=rand(maxw)+minw;
		if (colorNum==1){
		  var c = randColor(4);
		  color = "#"+c+c+c;
		}
		if (colorNum==2){
		  color = "#"+randColor(-4)+randColor(-12)+randColor(-2);
		}
		if (colorNum==3){
		  color = "#"+randColor(15)+randColor(15)+randColor(15);
		}
		var rectangle = canvas.display.rectangle({
		  x: rand(canvas_size),
		  y: rand(canvas_size)/2-(maxw),
		  origin: { x: "center", y: "center" },
		  width: size,
		  height: size,
		  fill: "linear-gradient(45deg, #fff, "+color+")",
		  rotation: rand(180)
		});
		canvas.addChild(rectangle);
		rects.push(rectangle);
	  }

	  canvas.setLoop(function () {
		for (var x=0;x<rects.length;x++){
		  rects[x].rotation += speed/rects[x].width;
		  rects[x].y += speed/(speed/2+rects[x].width);
		  if (rects[x].y > canvas_size+maxw){
			rects[x].y = -maxw;
			rects[x].x = Math.floor(Math.random()*canvas_size);
		  }
		}
	  }).start();
	}

	function tearDown(){
	  canvas.timeline.stop();
	  for (var x=0;x<rects.length;x++){
		rects[x].remove();
	  }
	}

	function rand(x){
	  return Math.floor(Math.random()*x);
	}

	function doResize(){
	  var s = $(window).width()/canvas_size;
	  $('#canvas').css({
		width: canvas_size*s+'px',
		height: canvas_size*s+'px'
	  });
	}

	function randColor(n){
	  if (n<0){
		n = -n;
		n = rand(15-n)+n;
	  } else {
		n = rand(n);
	  }
	  return ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'][n];
	}


  </script>

<link  href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic&amp;v1" rel="stylesheet" type="text/css" >
  <style>
  body {
	font-family: 'Open Sans', serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	text-shadow: 1px 1px 2px #aaa;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0.03em;
	word-spacing: 0.003em;
	line-height: 1.7;
  }
  body, div, html{
	margin:0;
	padding:0;
	border:none;
	display:block;
  }
  body{
	position:absolute;
  }
  #wrapper{
	width: 100%;
  }
  #canvas{
	position:absolute;
  }
  #content{
	position:absolute;
	margin: 2em;
  }
  #content .copy{
	width: 45%;
	position:absolute;
  }
  #controls{
	margin-left:52%;
  }
  h1{
	color: #3b6;
	font-weight:bold;
	font-size: 48px;
	line-height: 50px;
	text-transform:uppercase;
  }
  h2{
	margin:5px 0;
  }
  fieldset{
	border:1px solid #999;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
  }
  legend{
	color:#666;
  }
  .box{
	width:500px;
	padding: 1em;
	background-color: #fff;
	border: 10px solid #ccc;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
  }
  </style>

</head>
<body>
  <div id="wrapper">
	<canvas id="canvas" width="50px" height="50px"></canvas>
	<div id="content">
	  <h1>A Canvas Experiment</h1>
	  <div class="box">
		<div class="copy">
		  <p>This is an experiment with the HTML5 canvas,
		  using the <a href="http://ocanvas.org/">oCanvas</a> javascript plugin.</p>
		  <p>The canvas element is only 50x50 pixels and is
		  resized by jQuery to fill the screen at page load. Thus the "blocky" effect.</p>
		  <p>This should work in both Webkit and Firefox browsers.</p>
		</div>
		<div id="controls">
		  <h2>settings</h2>
		  <fieldset>
			<legend>Color</legend>
			<label><input type="radio" value="1" name="color" /> Greys</label>
			<label><input type="radio" value="2" name="color" checked="checked" /> Pastels</label>
			<label><input type="radio" value="3" name="color" checked="checked" /> Rich</label>
		  </fieldset>

		  <fieldset>
			<legend>Items</legend>
			<label><input type="radio" value="10" name="count" /> 10</label>
			<label><input type="radio" value="30" name="count" checked="checked" /> 30</label>
			<label><input type="radio" value="100" name="count" /> 100</label>
		  </fieldset>

		  <fieldset>
			<legend>Size</legend>
			<label><input type="radio" value="3" name="size" /> Tiny</label>
			<label><input type="radio" value="10" name="size" checked="checked" /> Medium</label>
			<label><input type="radio" value="40" name="size" /> Huge</label>
		  </fieldset>

		  <fieldset>
			<legend>Speed</legend>
			<label><input type="radio" value="2" name="speed" /> Slow</label>
			<label><input type="radio" value="10" name="speed" checked="checked" /> Medium</label>
			<label><input type="radio" value="60" name="speed" /> Fast</label>
		  </fieldset>

		  <br/>
		</div>
	  </div>
	</div>
  </div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<!-- example at http://somebox.com/canvas-fun.html -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/ocanvas/1.0/ocanvas.min.js"></script>
	<title>Canvas Experiment</title>

	<script type="text/javascript">
	/*
	playing around with oCanvas
	foz: jeremy@somebox.com
	http://somebox.com && http://bytedept.com
	*/


	var canvas_size = 50;
	var rects = [];
	var canvas;

	$(document).ready(function(){
	canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#fff",
	fps: 30
	});
	$(window).bind('resize', doResize);
	$('input').bind('change', function(){
	tearDown();
	setUp();
	});
	doResize();
	setUp();
	});

	function getSetting(name){
	return parseInt($('input[name='+name+']:checked').val());
	}

	function setUp(){
	// console.log('started');
	var maxw=getSetting('size'); // max item width
	var minw=maxw/2;
	var colorNum = getSetting('color');
	var num=getSetting('count');
	var speed=getSetting('speed');
	var color;

	for (var x=0; x<num; x++){
	var size=rand(maxw)+minw;
	if (colorNum==1){
	var c = randColor(4);
	color = "#"+c+c+c;
	}
	if (colorNum==2){
	color = "#"+randColor(-4)+randColor(-12)+randColor(-2);
	}
	if (colorNum==3){
	color = "#"+randColor(15)+randColor(15)+randColor(15);
	}
	var rectangle = canvas.display.rectangle({
	x: rand(canvas_size),
	y: rand(canvas_size)/2-(maxw),
	origin: { x: "center", y: "center" },
	width: size,
	height: size,
	fill: "linear-gradient(45deg, #fff, "+color+")",
	rotation: rand(180)
	});
	canvas.addChild(rectangle);
	rects.push(rectangle);
	}

	canvas.setLoop(function () {
	for (var x=0;x<rects.length;x++){
	rects[x].rotation += speed/rects[x].width;
	rects[x].y += speed/(speed/2+rects[x].width);
	if (rects[x].y > canvas_size+maxw){
	rects[x].y = -maxw;
	rects[x].x = Math.floor(Math.random()*canvas_size);
	}
	}
	}).start();
	}

	function tearDown(){
	canvas.timeline.stop();
	for (var x=0;x<rects.length;x++){
	rects[x].remove();
	}
	}

	function rand(x){
	return Math.floor(Math.random()*x);
	}

	function doResize(){
	var s = $(window).width()/canvas_size;
	$('#canvas').css({
	width: canvas_size*s+'px',
	height: canvas_size*s+'px'
	});
	}

	function randColor(n){
	if (n<0){
	n = -n;
	n = rand(15-n)+n;
	} else {
	n = rand(n);
	}
	return ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'][n];
	}



	</script>

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic&v1" rel="stylesheet" type="text/css" >
	<style>
	body {
	font-family: 'Open Sans', serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	text-shadow: 1px 1px 2px #aaa;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0.03em;
	word-spacing: 0.003em;
	line-height: 1.7;
	}
	body, div, html{
	margin:0;
	padding:0;
	border:none;
	display:block;
	}
	body{
	position:absolute;
	}
	#wrapper{
	width: 100%;
	}
	#canvas{
	position:absolute;
	}
	#content{
	position:absolute;
	margin: 2em;
	}
	#content .copy{
	width: 45%;
	position:absolute;
	}
	#controls{
	margin-left:52%;
	}
	h1{
	color: #3b6;
	font-weight:bold;
	font-size: 48px;
	line-height: 50px;
	text-transform:uppercase;
	}
	h2{
	margin:5px 0;
	}
	fieldset{
	border:1px solid #999;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
	legend{
	color:#666;
	}
	.box{
	width:500px;
	padding: 1em;
	background-color: #fff;
	border: 10px solid #ccc;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	}
	</style>

	</head>
	<body>
	<div id="wrapper">
	<canvas id="canvas" width="50px" height="50px"></canvas>
	<div id="content">
	<h1>A Canvas Experiment</h1>
	<div class="box">
	<div class="copy">
	<p>This is an experiment with the HTML5 canvas,
	using the <a href="http://ocanvas.org/">oCanvas</a> javascript plugin.</p>
	<p>The canvas element is only 50x50 pixels and is
	resized by jQuery to fill the screen at page load. Thus the "blocky" effect.</p>
	<p>This should work in both Webkit and Firefox browsers.</p>
	</div>
	<div id="controls">
	<h2>settings</h2>
	<fieldset>
	<legend>Color</legend>
	<label><input type="radio" value="1" name="color" /> Greys</label>
	<label><input type="radio" value="2" name="color" checked="checked" /> Pastels</label>
	<label><input type="radio" value="3" name="color" checked="checked" /> Rich</label>
	</fieldset>

	<fieldset>
	<legend>Items</legend>
	<label><input type="radio" value="10" name="count" /> 10</label>
	<label><input type="radio" value="30" name="count" checked="checked" /> 30</label>
	<label><input type="radio" value="100" name="count" /> 100</label>
	</fieldset>

	<fieldset>
	<legend>Size</legend>
	<label><input type="radio" value="3" name="size" /> Tiny</label>
	<label><input type="radio" value="10" name="size" checked="checked" /> Medium</label>
	<label><input type="radio" value="40" name="size" /> Huge</label>
	</fieldset>

	<fieldset>
	<legend>Speed</legend>
	<label><input type="radio" value="2" name="speed" /> Slow</label>
	<label><input type="radio" value="10" name="speed" checked="checked" /> Medium</label>
	<label><input type="radio" value="60" name="speed" /> Fast</label>
	</fieldset>

	<br/>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>