bzdgn · December 14, 2016 20:15 · bzdgn · Dec 14, 2016
diff --git a/starsHorizontal.html b/starsHorizontal.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>2D Horizontal Stars Oldskool Demo</title>
 	</head>
 <body>
 	<canvas width="800" height="800" id="mainCanvas">
 	</canvas>
 	<p><input type="Button" VALUE=" start " onClick="doTimer()"></p>
 	<p><input type="Button" VALUE=" stop " onclick="stopTimer()"></p>
 	
 	<script>
 	<!-- Written by Levent Divilioglu -->
 	<!-- 14.12.2016 -->
 	<!-- To be fixed: Velocity should be calculated paralel to initial dot coordinates -->
 		(function () {
 			canvas = document.getElementById('mainCanvas');
 			ctx = canvas.getContext("2d");
 			
 			WIDTH	= canvas.width;
 			HEIGHT	= canvas.height;
 			
 			ctx.fillStyle="black";
 			ctx.fillRect( 0, 0, WIDTH, HEIGHT);
 			
 			numberOfStars = 300;
 			MAX_VELOCITY = 20;
 			creationBoxLength = 50;
 			
 			centerX = WIDTH / 2;
 			centerY = HEIGHT / 2;
 			stars = generateStars(numberOfStars, creationBoxLength);
 			
 		})();
 		
 		function drawStars() {
 			for(var i = 0; i < stars.length; i++) {
 				var alphaParam = "rgba(255, 255, 255, " + stars[i].alpha + ")";
 				//console.log(alphaParam);
 				ctx.fillStyle = alphaParam;
 				ctx.fillRect(stars[i].x, stars[i].y, 3, 3);
 			}
 		}
 		
 		function handleStars() {
 			for(var i = 0; i < stars.length; i++) {
 				stars[i].x += stars[i].v_x;
 				stars[i].y += stars[i].v_y;
 				
 				if(
 					(stars[i].x < 0 || stars[i].x > WIDTH) 
 					||
 					(stars[i].y < 0 || stars[i].y > HEIGHT)
 				) {
 					stars[i].x = WIDTH - creationBoxLength + getPositiveRandom(creationBoxLength);
 					stars[i].y = getPositiveRandom(HEIGHT);
 					stars[i].v_x = -1*getPositiveRandom(MAX_VELOCITY);
 					stars[i].v_y = 0;
 				}
 			}
 		};
 		
 		function animateStars() {
 		clearScreen();
 			drawStars();
 			handleStars();
 		};
 		
 		function clearScreen() {
 			ctx.clearRect( 0, 0, WIDTH, HEIGHT );
 			ctx.fillStyle="black";
 			ctx.fillRect(  0, 0, WIDTH, HEIGHT );
 		}
 		
 		function doTimer() {
 			timerID = setInterval( "animateStars()", 20 );
 		}
 		
 		function stopTimer() {
 			clearInterval( timerID );
 		}
 		
 		function generateStars(numberOfStars, creationBoxLength) {
 			var stars = [];
 			for(i = 0; i < numberOfStars; i++) {
 				//var x = WIDTH - creationBoxLength + getPositiveRandom(creationBoxLength);
 				var x = getPositiveRandom(WIDTH);
 				var y = getPositiveRandom(HEIGHT);
 				var v_x = -1*getPositiveRandom(MAX_VELOCITY);
 				var alpha = Math.abs(v_x)/MAX_VELOCITY;
 				stars.push({"starIndex":i, "x":x, "y":y, "v_x": v_x, "v_y": 0, "alpha": alpha });
 			}
 			
 			return stars;
 		}
 		
 		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;
 		}
 		
 		function getPositiveRandom(limit) {		
 			var num = Math.ceil( (Math.random() * limit-1) + 1);
 			
 			return num;
 		}
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>2D Horizontal Stars Oldskool Demo</title>
	</head>
	<body>
	<canvas width="800" height="800" id="mainCanvas">
	</canvas>
	<p><input type="Button" VALUE=" start " onClick="doTimer()"></p>
	<p><input type="Button" VALUE=" stop " onclick="stopTimer()"></p>

	<script>
	<!-- Written by Levent Divilioglu -->
	<!-- 14.12.2016 -->
	<!-- To be fixed: Velocity should be calculated paralel to initial dot coordinates -->
	(function () {
	canvas = document.getElementById('mainCanvas');
	ctx = canvas.getContext("2d");

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

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

	numberOfStars = 300;
	MAX_VELOCITY = 20;
	creationBoxLength = 50;

	centerX = WIDTH / 2;
	centerY = HEIGHT / 2;
	stars = generateStars(numberOfStars, creationBoxLength);

	})();

	function drawStars() {
	for(var i = 0; i < stars.length; i++) {
	var alphaParam = "rgba(255, 255, 255, " + stars[i].alpha + ")";
	//console.log(alphaParam);
	ctx.fillStyle = alphaParam;
	ctx.fillRect(stars[i].x, stars[i].y, 3, 3);
	}
	}

	function handleStars() {
	for(var i = 0; i < stars.length; i++) {
	stars[i].x += stars[i].v_x;
	stars[i].y += stars[i].v_y;

	if(
	(stars[i].x < 0 \|\| stars[i].x > WIDTH)
	\|\|
	(stars[i].y < 0 \|\| stars[i].y > HEIGHT)
	) {
	stars[i].x = WIDTH - creationBoxLength + getPositiveRandom(creationBoxLength);
	stars[i].y = getPositiveRandom(HEIGHT);
	stars[i].v_x = -1*getPositiveRandom(MAX_VELOCITY);
	stars[i].v_y = 0;
	}
	}
	};

	function animateStars() {
	clearScreen();
	drawStars();
	handleStars();
	};

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

	function doTimer() {
	timerID = setInterval( "animateStars()", 20 );
	}

	function stopTimer() {
	clearInterval( timerID );
	}

	function generateStars(numberOfStars, creationBoxLength) {
	var stars = [];
	for(i = 0; i < numberOfStars; i++) {
	//var x = WIDTH - creationBoxLength + getPositiveRandom(creationBoxLength);
	var x = getPositiveRandom(WIDTH);
	var y = getPositiveRandom(HEIGHT);
	var v_x = -1*getPositiveRandom(MAX_VELOCITY);
	var alpha = Math.abs(v_x)/MAX_VELOCITY;
	stars.push({"starIndex":i, "x":x, "y":y, "v_x": v_x, "v_y": 0, "alpha": alpha });
	}

	return stars;
	}

	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;
	}

	function getPositiveRandom(limit) {
	var num = Math.ceil( (Math.random() * limit-1) + 1);

	return num;
	}
	</script>
	</body>
	</html>