jjmilburn/index.html

## index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src = "http://code.jquery.com/jquery-1.7.2.min.js">

</script>
<title>All Your Base</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

</head>

<body>
Will Benish wuz here
<a href="hello5.html">yeah sucka</a>

</body><br>
<div id='testDiv'>
	what?
</div>
<div  style="width:200px;height:100px;border:1px solid blue;">
	asd
</div>
<canvas id="myCanvas" style="border:1px solid blue;">

</canvas>
<script type="text/javascript">
var increment = 0;

StartX = 0;
StartY = 0;
XSpeed = 5;
YSpeed = 5;
setInterval(addCircle,30);
//alert($('#testDiv').html())
var rects= new Array();
var newx = 10;
var newy = 10;
function newRects(){
	newRect = new Object();
	newRect.x = StartX;
	newRect.y = StartY;
	newRect.w = 10;
	newRect.h = 10;
	newRect.yspeed = YSpeed;
	newRect.xspeed = XSpeed;
	rects.push(newRect)
}

$("#myCanvas").mousedown(function(e){

    StartX = Math.floor((e.pageX-$("#myCanvas").offset().left) );
    StartY = Math.floor((e.pageY-$("#myCanvas").offset().top) );
	//increment=0;//newRects();

 });
 $("#myCanvas").mouseup(function(e){
var EndX = Math.floor((e.pageX-$("#myCanvas").offset().left) );
 var   EndY = Math.floor((e.pageY-$("#myCanvas").offset().top) );
 XSpeed = (EndX-StartX)/10;
 YSpeed = (EndY-StartY)/10;
	increment=0;//newRects();

 });

function addCircle(){
	var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
  ctx.canvas.width  = 500;//window.innerWidth;
  ctx.canvas.height = 500;//window.innerHeight;
ctx.clearRect ( 0, 0 , 1000 ,1000  );
if(increment<=10){
newRects();
}

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,500,500);
ctx.fillStyle="#FFFFFF";
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

var amountOfRed = increment
for(i=1;i<rects.length;i++){
if(amountOfRed<=225){
	amountOfRed = amountOfRed+25;
}
rects[i].x = rects[i].x +rects[i].xspeed;//rects[i].speed;

if(rects[i].y >= 500 || rects[i].y<=0){
	rects[i].yspeed = rects[i].yspeed*-1;
} else {
	//rects[i].yspeed = rects[i].yspeed+1;
}
if(rects[i].x >= 500 || rects[i].x <= 0){
	rects[i].xspeed = rects[i].xspeed*-1;
}
rects[i].y = rects[i].y +rects[i].yspeed;
//	alert(increment);
ctx.globalAlpha = 0.5
//ctx.fillStyle="#FF0000";
//alert(amountOfRed);
ctx.fillStyle="rgb("+amountOfRed+",0,0)";
//ctx.fillRect(rects[i].x,rects[i].y,30,30);
ctx.beginPath();
ctx.arc(rects[i].x,rects[i].y,10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//alert(increment);
}
increment =increment+1;
}

</script>
</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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src = "http://code.jquery.com/jquery-1.7.2.min.js">

	</script>
	<title>All Your Base</title>
	<link href="stylesheet.css" rel="stylesheet" type="text/css" />

	</head>

	<body>
	Will Benish wuz here
	<a href="hello5.html">yeah sucka</a>

	</body><br>
	<div id='testDiv'>
	what?
	</div>
	<div style="width:200px;height:100px;border:1px solid blue;">
	asd
	</div>
	<canvas id="myCanvas" style="border:1px solid blue;">

	</canvas>
	<script type="text/javascript">
	var increment = 0;

	StartX = 0;
	StartY = 0;
	XSpeed = 5;
	YSpeed = 5;
	setInterval(addCircle,30);
	//alert($('#testDiv').html())
	var rects= new Array();
	var newx = 10;
	var newy = 10;
	function newRects(){
	newRect = new Object();
	newRect.x = StartX;
	newRect.y = StartY;
	newRect.w = 10;
	newRect.h = 10;
	newRect.yspeed = YSpeed;
	newRect.xspeed = XSpeed;
	rects.push(newRect)
	}

	$("#myCanvas").mousedown(function(e){

	StartX = Math.floor((e.pageX-$("#myCanvas").offset().left) );
	StartY = Math.floor((e.pageY-$("#myCanvas").offset().top) );
	//increment=0;//newRects();

	});
	$("#myCanvas").mouseup(function(e){
	var EndX = Math.floor((e.pageX-$("#myCanvas").offset().left) );
	var EndY = Math.floor((e.pageY-$("#myCanvas").offset().top) );
	XSpeed = (EndX-StartX)/10;
	YSpeed = (EndY-StartY)/10;
	increment=0;//newRects();

	});

	function addCircle(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.canvas.width = 500;//window.innerWidth;
	ctx.canvas.height = 500;//window.innerHeight;
	ctx.clearRect ( 0, 0 , 1000 ,1000 );
	if(increment<=10){
	newRects();
	}

	ctx.fillStyle="#FF0000";
	ctx.fillRect(0,0,500,500);
	ctx.fillStyle="#FFFFFF";
	ctx.beginPath();
	ctx.arc(250,250,250,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();

	var amountOfRed = increment
	for(i=1;i<rects.length;i++){
	if(amountOfRed<=225){
	amountOfRed = amountOfRed+25;
	}
	rects[i].x = rects[i].x +rects[i].xspeed;//rects[i].speed;

	if(rects[i].y >= 500 \|\| rects[i].y<=0){
	rects[i].yspeed = rects[i].yspeed*-1;
	} else {
	//rects[i].yspeed = rects[i].yspeed+1;
	}
	if(rects[i].x >= 500 \|\| rects[i].x <= 0){
	rects[i].xspeed = rects[i].xspeed*-1;
	}
	rects[i].y = rects[i].y +rects[i].yspeed;
	// alert(increment);
	ctx.globalAlpha = 0.5
	//ctx.fillStyle="#FF0000";
	//alert(amountOfRed);
	ctx.fillStyle="rgb("+amountOfRed+",0,0)";
	//ctx.fillRect(rects[i].x,rects[i].y,30,30);
	ctx.beginPath();
	ctx.arc(rects[i].x,rects[i].y,10,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	//alert(increment);
	}
	increment =increment+1;
	}

	</script>
	</html>