bzdgn · December 17, 2016 08:44 · bzdgn · Dec 16, 2016
diff --git a/particleWaterfall.html b/particleWaterfall.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Particles Waterfall 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 -->
 	<!-- 17.12.2016 -->
 		(function () {
 			canvas = document.getElementById('mainCanvas');
 			ctx = canvas.getContext("2d");
 			
 			WIDTH	= canvas.width;
 			HEIGHT	= canvas.height;
 			
 			ctx.fillStyle="black";
 			ctx.fillRect( 0, 0, WIDTH, HEIGHT);
 			
 			GRAVITY = 4;
 			
 			var numberOfParticles1 = 2000;
 			PARTICLES_1_MAX_VELOCITY_X = 10;
 			PARTICLES_1_MAX_VELOCITY_Y = 25;
 			x1 = 10;
 			y1 = 20;
 			particles1CreationBoxLengthX = 15;
 			particles1CreationBoxLengthY = 10;
 			
 			var numberOfParticles2 = 2000;
 			PARTICLES_2_MAX_VELOCITY_X = -10;
 			PARTICLES_2_MAX_VELOCITY_Y = 25;
 			x2 = WIDTH-30;
 			y2 = HEIGHT/4;
 			particles2CreationBoxLengthX = 10;
 			particles2CreationBoxLengthY = 5;
 			
 			particles1 = [];
 			particles2 = [];
 			generateParticles(particles1, numberOfParticles1, particles1CreationBoxLengthX, particles1CreationBoxLengthY, x1, y1, PARTICLES_1_MAX_VELOCITY_X, PARTICLES_1_MAX_VELOCITY_Y);
 			generateParticles(particles2, numberOfParticles2, particles2CreationBoxLengthX, particles2CreationBoxLengthY, x2, y2, PARTICLES_2_MAX_VELOCITY_X, PARTICLES_2_MAX_VELOCITY_Y);
 			
 		})();
 		
 		// main loop
 		function animateParticles() {
 			clearScreen();
 			drawParticles(particles1);
 			drawParticles(particles2);
 			handleParticles(particles1, particles1CreationBoxLengthX, particles1CreationBoxLengthY, x1, y1, PARTICLES_1_MAX_VELOCITY_X, PARTICLES_1_MAX_VELOCITY_Y);
 			handleParticles(particles2, particles2CreationBoxLengthX, particles2CreationBoxLengthY, x2, y2, PARTICLES_2_MAX_VELOCITY_X, PARTICLES_2_MAX_VELOCITY_Y);
 		};
 		
 		function doTimer() {
 			timerID = setInterval( "animateParticles()", 10 );
 		}
 		
 		function stopTimer() {
 			clearInterval( timerID );
 		}
 		
 		// refresh screen
 		function clearScreen() {
 			ctx.clearRect( 0, 0, WIDTH, HEIGHT );
 			ctx.fillStyle="black";
 			ctx.fillRect(  0, 0, WIDTH, HEIGHT );
 		}
 		
 		function drawParticles(particles) {
 			for(var i = 0; i < particles.length; i++) {
 				ctx.fillStyle = "rgba(00, 255, 255, " + particles[i].alpha + ")";
 				ctx.fillRect(particles[i].x, particles[i].y, 3, 3);
 				//ctx.beginPath();
 				//ctx.arc(particles[i].x, particles[i].y, 2, 0, 2 * Math.PI, false);
 				//ctx.fill();
 			}
 		}
 		
 		function handleParticles(particles, creationBoxLengthX, creationBoxLengthY, xo, yo, MAX_VELOCITY_X, MAX_VELOCITY_Y) {
 			
 			for(var i = 0; i < particles.length; i++) {
 				particles[i].x += particles[i].v_x;
 				
 				particles[i].v_y += GRAVITY;
 				particles[i].y += particles[i].v_y;
 				
 				if( Math.abs(particles[i].y - HEIGHT) < 30   ) {
 					particles[i].v_y *= -0.4;
 				}
 				
 				if(
 					(
 						(particles[i].x < 0 || particles[i].x > WIDTH) 
 						||
 						(particles[i].y < 0 || particles[i].y > HEIGHT)
 					)
 					//||
 					//( (Math.abs(particles[i].v_y) <= 0) && ( Math.abs(HEIGHT - particles.y) < 30) )
 				) {
 					//particles.splice( index, i );
 					//delete particles[i];
 					
 					particles[i].x = xo + getRandomPositive(creationBoxLengthX);
 					particles[i].y = yo + getRandomPositive(creationBoxLengthY);
 					particles[i].v_x = getRandomPositive(MAX_VELOCITY_X);
 					particles[i].v_y = getRandomPositive(MAX_VELOCITY_Y);
 				}
 			}
 		};
 		
 		function generateParticles(particles, numberOfParticles, creationBoxLengthX, creationBoxLengthY, xo, yo, MAX_VELOCITY_X, MAX_VELOCITY_Y) {
 			for(i = 0; i < numberOfParticles; i++) {
 				var x = xo + getRandomPositive(creationBoxLengthX);
 				var y = yo + getRandomPositive(creationBoxLengthY);
 				particles.push({"x":x, "y":y, "v_x": getRandomPositive(MAX_VELOCITY_X), "v_y": getRandomInterval(0, MAX_VELOCITY_Y), "alpha": Math.random()});
 			}
 			
 			return particles;
 		}
 		
 		// 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>Particles Waterfall 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 -->
	<!-- 17.12.2016 -->
	(function () {
	canvas = document.getElementById('mainCanvas');
	ctx = canvas.getContext("2d");

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

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

	GRAVITY = 4;

	var numberOfParticles1 = 2000;
	PARTICLES_1_MAX_VELOCITY_X = 10;
	PARTICLES_1_MAX_VELOCITY_Y = 25;
	x1 = 10;
	y1 = 20;
	particles1CreationBoxLengthX = 15;
	particles1CreationBoxLengthY = 10;

	var numberOfParticles2 = 2000;
	PARTICLES_2_MAX_VELOCITY_X = -10;
	PARTICLES_2_MAX_VELOCITY_Y = 25;
	x2 = WIDTH-30;
	y2 = HEIGHT/4;
	particles2CreationBoxLengthX = 10;
	particles2CreationBoxLengthY = 5;

	particles1 = [];
	particles2 = [];
	generateParticles(particles1, numberOfParticles1, particles1CreationBoxLengthX, particles1CreationBoxLengthY, x1, y1, PARTICLES_1_MAX_VELOCITY_X, PARTICLES_1_MAX_VELOCITY_Y);
	generateParticles(particles2, numberOfParticles2, particles2CreationBoxLengthX, particles2CreationBoxLengthY, x2, y2, PARTICLES_2_MAX_VELOCITY_X, PARTICLES_2_MAX_VELOCITY_Y);

	})();

	// main loop
	function animateParticles() {
	clearScreen();
	drawParticles(particles1);
	drawParticles(particles2);
	handleParticles(particles1, particles1CreationBoxLengthX, particles1CreationBoxLengthY, x1, y1, PARTICLES_1_MAX_VELOCITY_X, PARTICLES_1_MAX_VELOCITY_Y);
	handleParticles(particles2, particles2CreationBoxLengthX, particles2CreationBoxLengthY, x2, y2, PARTICLES_2_MAX_VELOCITY_X, PARTICLES_2_MAX_VELOCITY_Y);
	};

	function doTimer() {
	timerID = setInterval( "animateParticles()", 10 );
	}

	function stopTimer() {
	clearInterval( timerID );
	}

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

	function drawParticles(particles) {
	for(var i = 0; i < particles.length; i++) {
	ctx.fillStyle = "rgba(00, 255, 255, " + particles[i].alpha + ")";
	ctx.fillRect(particles[i].x, particles[i].y, 3, 3);
	//ctx.beginPath();
	//ctx.arc(particles[i].x, particles[i].y, 2, 0, 2 * Math.PI, false);
	//ctx.fill();
	}
	}

	function handleParticles(particles, creationBoxLengthX, creationBoxLengthY, xo, yo, MAX_VELOCITY_X, MAX_VELOCITY_Y) {

	for(var i = 0; i < particles.length; i++) {
	particles[i].x += particles[i].v_x;

	particles[i].v_y += GRAVITY;
	particles[i].y += particles[i].v_y;

	if( Math.abs(particles[i].y - HEIGHT) < 30 ) {
	particles[i].v_y *= -0.4;
	}

	if(
	(
	(particles[i].x < 0 \|\| particles[i].x > WIDTH)
	\|\|
	(particles[i].y < 0 \|\| particles[i].y > HEIGHT)
	)
	//\|\|
	//( (Math.abs(particles[i].v_y) <= 0) && ( Math.abs(HEIGHT - particles.y) < 30) )
	) {
	//particles.splice( index, i );
	//delete particles[i];

	particles[i].x = xo + getRandomPositive(creationBoxLengthX);
	particles[i].y = yo + getRandomPositive(creationBoxLengthY);
	particles[i].v_x = getRandomPositive(MAX_VELOCITY_X);
	particles[i].v_y = getRandomPositive(MAX_VELOCITY_Y);
	}
	}
	};

	function generateParticles(particles, numberOfParticles, creationBoxLengthX, creationBoxLengthY, xo, yo, MAX_VELOCITY_X, MAX_VELOCITY_Y) {
	for(i = 0; i < numberOfParticles; i++) {
	var x = xo + getRandomPositive(creationBoxLengthX);
	var y = yo + getRandomPositive(creationBoxLengthY);
	particles.push({"x":x, "y":y, "v_x": getRandomPositive(MAX_VELOCITY_X), "v_y": getRandomInterval(0, MAX_VELOCITY_Y), "alpha": Math.random()});
	}

	return particles;
	}

	// 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>