bzdgn · December 17, 2016 20:56 · bzdgn · Dec 17, 2016
diff --git a/ballControl.html b/ballControl.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>2D World Physics : Bouncing Ball Demo</title>
 	</head>
 <body>
 	<canvas width="800" height="600" id="mainCanvas" onmousemove="handleMouseMove(event)" onmousedown="handleMouseClick()" onmouseup="handleMouseRelease()" >
 	</canvas>
 	
 	<script>
 	<!-- Written by Levent Divilioglu -->
 	<!-- 17.12.2016 -->
 		(function () {
 			// globals
 			canvas = document.getElementById('mainCanvas');
 			ctx = canvas.getContext("2d");
 			
 			WIDTH	= canvas.width;
 			HEIGHT	= canvas.height;
 			
 			GRAVITY = 4;
 			FRICTION = 0.94;
 			
 			ctx.fillStyle="black";
 			ctx.fillRect( 0, 0, WIDTH, HEIGHT);
 			
 			GRAVITY = 10;
 			var RADIUS = 30;
 			
 			mouse = { 'mX': -1, 'mY': -1, 'xO': 0, 'yO': 0, sumSquare : function(a,b) { return Math.pow(this.mX - a, 2) + Math.pow(this.mY - b, 2); }, clickState : 'false' };
 			
 			ball = { 'r' : RADIUS, 'x': WIDTH/2, 'y': 0, 'v_x': 0, 'v_y': 0, 'holdState': false, 'onGround': false, hover : function(){ if( mouse.sumSquare(this.x, this.y) <= this.r*this.r ){ console.log("IN"); return true; } console.log("OUT"); return false;} };
 			
 			setInterval( function() { animate(ball); } , 50 )
 			
 		})();
 		
 		// main loop
 		function animate(ball) {
 			clearScreen();
 			handleBall(ball);
 			mainDraw(ball);
 		}
 		
 		function handleBall(ball) {
 			if(ball.holdState) {
 				ball.x = mouse.mX;
 				ball.y = mouse.mY;
 			} else {
 				ball.v_y += GRAVITY;
 				
 				if(ball.onGround) {
 					ball.v_x *= FRICTION;
 				}
 				
 				ball.x += ball.v_x;
 				ball.y += ball.v_y;
 				
 				if( (ball.v_y > 0 && ball.y + ball.r > HEIGHT) || (ball.v_y < 0 && ball.y - ball.r < 0) ) {
 					ball.v_y *= -0.8;
 					
 					if(ball.y + ball.r > HEIGHT) {
 						ball.y = HEIGHT - ball.r;
 						ball.onGround = true;
 					} else {
 						ball.onGround = false;
 					}
 					
 					if(ball.y - ball.r < 0) {
 						ball.y = 0 + ball.r;
 					}
 				}
 				
 				if( (ball.v_x > 0 && ball.x + ball.r > WIDTH) || (ball.v_x < 0 && ball.x - ball.r < 0) ) {
 					ball.v_x *= -0.8;
 					
 					if(ball.x + ball.r > WIDTH) {
 						ball.x = WIDTH - ball.r;
 					} else if(ball.x - ball.r < 0) {
 						ball.x = 0 + ball.r;
 					}
 				}
 				
 			}		

 		}
 		
 		function mainDraw(ball) {
 			drawBall(ball);
 		}
 		
 		function drawBall(ball) {
 			ctx.beginPath();
 			
 			if(ball.holdState) {
 				ctx.fillStyle = "red";
 			} else {
 				ctx.fillStyle="white";
 			}
 			ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI, false);
 			ctx.fill();
 		}
 		
 		function handleMouseMove(event) {
 			mouse.mX = event.clientX;
 			mouse.mY = event.clientY;
 		}
 		
 		function handleMouseClick() {
 			if(ball.hover()) {
 				ball.holdState = true;
 			}
 			mouse.clickState = true;
 			
 			mouse.xO = mouse.mX;
 			mouse.yO = mouse.mY;
 		}
 		
 		function handleMouseRelease() {
 			ball.holdState = false;
 			mouse.clickState = false;
 			
 			ball.v_x += (mouse.mX - mouse.xO)/1;
 			ball.v_y += (mouse.mY - mouse.yO)/1;
 		}
 		
 		// refresh screen
 		function clearScreen() {
 			ctx.clearRect( 0, 0, WIDTH, HEIGHT );
 			ctx.fillStyle="black";
 			ctx.fillRect(  0, 0, WIDTH, HEIGHT );
 		}
 		
 		// return set interval : [-limit, limit] - {0}
 		function getRandom(limit) {
 			var sign = Math.ceil( Math.random() * 100 );
 			
 			if(sign < 50)
 				sign = -1;
 			else
 				sign = 1;
 			
 			var num = sign * Math.ceil( (Math.random() * limit-1) + 1);
 			
 			return num;
 		}
 		
 		// return set interval : [1, limit]
 		function getRandomPositive(limit) {
 			return Math.ceil( (Math.random() * limit-1) + 1);
 		}
 		
 		// return set interval : [a, b]
 		function getRandomInterval(a, b) {			
 			return a - 1 + Math.ceil( Math.random()*(b-a+1) );
 		}
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>2D World Physics : Bouncing Ball Demo</title>
	</head>
	<body>
	<canvas width="800" height="600" id="mainCanvas" onmousemove="handleMouseMove(event)" onmousedown="handleMouseClick()" onmouseup="handleMouseRelease()" >
	</canvas>

	<script>
	<!-- Written by Levent Divilioglu -->
	<!-- 17.12.2016 -->
	(function () {
	// globals
	canvas = document.getElementById('mainCanvas');
	ctx = canvas.getContext("2d");

	WIDTH = canvas.width;
	HEIGHT = canvas.height;

	GRAVITY = 4;
	FRICTION = 0.94;

	ctx.fillStyle="black";
	ctx.fillRect( 0, 0, WIDTH, HEIGHT);

	GRAVITY = 10;
	var RADIUS = 30;

	mouse = { 'mX': -1, 'mY': -1, 'xO': 0, 'yO': 0, sumSquare : function(a,b) { return Math.pow(this.mX - a, 2) + Math.pow(this.mY - b, 2); }, clickState : 'false' };

	ball = { 'r' : RADIUS, 'x': WIDTH/2, 'y': 0, 'v_x': 0, 'v_y': 0, 'holdState': false, 'onGround': false, hover : function(){ if( mouse.sumSquare(this.x, this.y) <= this.r*this.r ){ console.log("IN"); return true; } console.log("OUT"); return false;} };

	setInterval( function() { animate(ball); } , 50 )

	})();

	// main loop
	function animate(ball) {
	clearScreen();
	handleBall(ball);
	mainDraw(ball);
	}

	function handleBall(ball) {
	if(ball.holdState) {
	ball.x = mouse.mX;
	ball.y = mouse.mY;
	} else {
	ball.v_y += GRAVITY;

	if(ball.onGround) {
	ball.v_x *= FRICTION;
	}

	ball.x += ball.v_x;
	ball.y += ball.v_y;

	if( (ball.v_y > 0 && ball.y + ball.r > HEIGHT) \|\| (ball.v_y < 0 && ball.y - ball.r < 0) ) {
	ball.v_y *= -0.8;

	if(ball.y + ball.r > HEIGHT) {
	ball.y = HEIGHT - ball.r;
	ball.onGround = true;
	} else {
	ball.onGround = false;
	}

	if(ball.y - ball.r < 0) {
	ball.y = 0 + ball.r;
	}
	}

	if( (ball.v_x > 0 && ball.x + ball.r > WIDTH) \|\| (ball.v_x < 0 && ball.x - ball.r < 0) ) {
	ball.v_x *= -0.8;

	if(ball.x + ball.r > WIDTH) {
	ball.x = WIDTH - ball.r;
	} else if(ball.x - ball.r < 0) {
	ball.x = 0 + ball.r;
	}
	}

	}

	}

	function mainDraw(ball) {
	drawBall(ball);
	}

	function drawBall(ball) {
	ctx.beginPath();

	if(ball.holdState) {
	ctx.fillStyle = "red";
	} else {
	ctx.fillStyle="white";
	}
	ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI, false);
	ctx.fill();
	}

	function handleMouseMove(event) {
	mouse.mX = event.clientX;
	mouse.mY = event.clientY;
	}

	function handleMouseClick() {
	if(ball.hover()) {
	ball.holdState = true;
	}
	mouse.clickState = true;

	mouse.xO = mouse.mX;
	mouse.yO = mouse.mY;
	}

	function handleMouseRelease() {
	ball.holdState = false;
	mouse.clickState = false;

	ball.v_x += (mouse.mX - mouse.xO)/1;
	ball.v_y += (mouse.mY - mouse.yO)/1;
	}

	// refresh screen
	function clearScreen() {
	ctx.clearRect( 0, 0, WIDTH, HEIGHT );
	ctx.fillStyle="black";
	ctx.fillRect( 0, 0, WIDTH, HEIGHT );
	}

	// return set interval : [-limit, limit] - {0}
	function getRandom(limit) {
	var sign = Math.ceil( Math.random() * 100 );

	if(sign < 50)
	sign = -1;
	else
	sign = 1;

	var num = sign * Math.ceil( (Math.random() * limit-1) + 1);

	return num;
	}

	// return set interval : [1, limit]
	function getRandomPositive(limit) {
	return Math.ceil( (Math.random() * limit-1) + 1);
	}

	// return set interval : [a, b]
	function getRandomInterval(a, b) {
	return a - 1 + Math.ceil( Math.random()*(b-a+1) );
	}
	</script>
	</body>
	</html>