Untitled Document

<!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" />
<title>Untitled Document</title>

/* VARIABLES */
var WIDTH;
var HEIGHT;
var g;//Gravit constant
g = 9.8;

var friction; //Friction
friction = 0.1;

var origin = [100, 250]; //Orgin to release balls at

//Array to hold balls information
var balls = new Array();

//Array to hold Color for balls
var bcolor = ["#194E84", "#3B6B9C", "#1F242A", "#37414A", "#60BB22", "#F2BABB", "#693726", "#FD6E8A","#A2122F" ];

var isMouse = false; //Record is the mouse is pressed down.
var Mousex; //Records mouse locations
var Mousey;
var drag = -1; //drag, indiciate if mouse will drag Ball, set to -1 because array starts at 0

/* END OF VARIABLES */

// Main Function To Start
function start()
{
g = $('#canvas')[0].getContext("2d");//Save canvas to fast var
getBrowserDimensions();//Resize canvas to window
balls[0] = new Circle(origin[0],origin[1], 70, "#7EDEED", -8, 0); //Make Special Ball
makeballs();//Create balls
return setInterval(draw, 1000/40);//Run draw loop on interval
}

/**************************************************************************/
/**** Create mouse events ****/
/**************************************************************************/
function onMouseDown(evt)
{

col = MouseCollision(); //Checks is Mouse Collides with Ball
if(col == -1){
isMouse = true; //If there is no Collision, make new balls
}
else{
drag = col; //If there is COliision, indicate ball to be dragged
balls[col] = new Circle(balls[col].getX(), balls[col].getY(), balls[col].getR(), balls[col].getC(), 50);
}

}

//Constantly record mouse poisition
function onMouseMove(evt)
{
//Constant store mouse coordinates
MouseX = evt.pageX;
MouseY = evt.pageY - 50;

}

//Set variable to false.
function onMouseUp(evt)
{

isMouse = false;//mouse click off
drag = -1;

}

function onDoubleClick(evt)
{
balls.length = 0;//Reset stack
balls[0] = new Circle(origin[0],origin[1], 70, "#7EDEED", -8, 0); //Make Special Ball
isMouse = false;//mouseclick is off
drag = -1;//no drag
makeballs();//recreat initial balls
}

/**************** Touch Screen Controls - quick set-up, not optimized.****************/
//Comments same as mouse actions

function onDocumentTouchMove( event ) {

MouseX = event.touches[ 0 ].pageX;
MouseY = event.touches[ 0 ].pageY - 50;

}

function onDocumentTouchEnd( event ) {

isMouse = false;
drag = -1;

}

function onDocumentTouchStart( event ) {

if(col == -1){
MouseX = event.touches[ 0 ].pageX;
MouseY = event.touches[ 0 ].pageY - 50;
isMouse = true; //If there is no Collision, make new balls
}
else{
drag = col; //If there is COliision, indicate ball to be dragged
balls[col] = new Circle(balls[col].getX(), balls[col].getY(), balls[col].getR(), balls[col].getC(), 50);
}

}

/**************************************************************************/
/**** Check is mouse click collides with objects in world ****/
/**************************************************************************/

function MouseCollision(){
var i;

//Cycles through each item in stack backwards, this ensure we select top object.
for(i=(balls.length-1);i>=0; i--){
x1 = balls[i].getX(); //Gets X cord
y1 = balls[i].getY();//Gets Y cord
r = balls[i].getR();//Get Radius

dx =Math.abs(MouseX - x1); //Preform midpoints
dy = Math.abs(MouseY - y1);

dis = 0;
dis = Math.sqrt((dx*dx) + (dy*dy));//uses Pythagorean to ditermine distance from midpoint to click

if(dis < r){ //If distance is shorter that radius, Collision is true.

return i;
break;//break loop, turns top object.
}
}

return -1;

}

/**************************************************************************/
/**** makes initial balls. Makes 5-20 balls w/ random colours. ****/
/**************************************************************************/
function makeballs(){

var i;
for (i=1; i< Math.floor((Math.random()*16)+5); i++)
{

balls[i] = new Circle(origin[0],origin[1],Math.floor((Math.random()*45)+10),bcolor[Math.floor(Math.random()*bcolor.length)], 10, 0);

}
}

/**************************************************************************/
/**** Adds Balls to Stack ****/
/**************************************************************************/
function moreballs(){

var i;
var fin = balls.length+1; //Start from end of array and add 1 ball to array
for (i=balls.length; i<fin; i++)
{

balls[i] = new Circle(MouseX,MouseY,Math.floor((Math.random()*35)+15),bcolor[Math.floor(Math.random()*bcolor.length)],-12, 0);

}
}

/**************************************************************************/
/**** Main Loop, Calls Circle Class function move and draw ****/
/**************************************************************************/
function draw()
{
clear();
if(isMouse)
moreballs();
var i;

//Draws all object in stack
for (i=0; i<balls.length; i++)
{
balls[i].move();
balls[i].draw();
}
}

function clear()
{
g.fillStyle = "#6699CC";
g.fillRect(0, 0, WIDTH, HEIGHT);
}

// Use JQuery to wait for document load
$(document).ready(function()
{
start();
});

//Mouse input
$(document).mouseup(onMouseUp);
$(document).mousedown(onMouseDown);
document.onmousemove =onMouseMove;
$(document).dblclick(onDoubleClick);

//touch input
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'touchend', onDocumentTouchEnd, false );

//If user resizes window, adjustr canvas to fit windows
window.onresize = getBrowserDimensions;

function getBrowserDimensions() {
document.getElementById('canvas').width = window.innerWidth ;
document.getElementById('canvas').height = window.innerHeight -50;

WIDTH = $("#canvas").width();//reset width/height and origin
HEIGHT = $("#canvas").height();
origin[0] = WIDTH/2;
}

</script>

</head>

<body onLoad="draw();" style="padding:0; margin:0; background-color:#6699CC; overflow:visible">

<div style="height:50px; width:100%; background:#333333; color:#FFFFFF">
<strong>Hold And Drag MouseClick To Create Balls</strong>
<strong style="margin-left:50px">Double Click To Reset</strong>

<strong style="margin-left:50px">Click Ball To Hyper</strong><br />

<em style="float:right">This demostrate Physics, shape create and animation.</em>
</div>

<canvas id="canvas" height="600" width="600" style="background:#6699CC; cursor:pointer" ></canvas>
</body>
</html>