noroot/lifesim.html Secret

## lifesim.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Untitled</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

    </head>
    <body>


        <button id="reset">Reset</button>
        <button id="stop_btn" onClick="pause()">Stop</button>
        <button id="start_btn" onClick="unpause()">Start</button>
        <button id="addrandom_btn" onClick="addRandom()">Add Random</button>
        <br>
        <Br>
        <canvas id="life" width="750" height="750" style="background-color: black;"></canvas>
        <script>

         //Hunar Ahmad @ brainxyz
         m = document.getElementById("life").getContext("2d");
         draw = (x, y, c, s) => {
             m.fillStyle = c;
             m.fillRect(x, y, s, s);
         };
         atoms = [];
         atom = (x, y, c) => {
             return { x: x, y: y, vx: 0, vy: 0, color: c };
         };
         random = () => {
             return Math.random() * 750 + 50;
         };
         create = (number, color) => {
             group = [];
             for (let i = 0; i < number; i++) {
                 a = atom(random(), random(), color);
                 group.push(a);
                 atoms.push(group[i]);
             }
             return group;
         };
         rule = (atoms1, atoms2, g) => {
             for (let i = 0; i < atoms1.length; i++) {
                 fx = 0;
                 fy = 0;
                 for (let j = 0; j < atoms2.length; j++) {
                     a = atoms1[i];
                     b = atoms2[j];
                     dx = a.x - b.x;
                     dy = a.y - b.y;
                     d = Math.sqrt(dx * dx + dy * dy);
                     if (d > 0 && d < 80) {
                         F = (g * 1) / d;
                         fx += F * dx;
                         fy += F * dy;
                     }
                 }
                 a.vx = (a.vx + fx) * 0.5;
                 a.vy = (a.vy + fy) * 0.5;
                 a.x += a.vx;
                 a.y += a.vy;
                 if (a.x <= 0 || a.x >= 750) { a.vx *= -1; }
                 if (a.y <= 0 || a.y >= 750) { a.vy *= -1; }
             }
         };

         reset = () => {
              m.clearRect(0, 0, 750, 750);
         };


         addRandom = () => {
             create(300, "purple");
         };


         yellow = create(300, "yellow");
         //red = create(200, "red");
         green = create(150, "green");
         white = create(100, "white");
         red = create(150, "red");
         blue = create(250, "blue");


         let matrix = [
             ["white", "white", 1],
             ["blue", "blue", -1],
             ["blue", "red", -0.5],
             ["blue", "white", -0.4],
             ["red", "red", -5],
             ["red", "white", 0.5],
             ["red", "blue", -0.3],
             ["white", "yellow", 1],
             ["yellow", "white", 1],
             ["blue", "yellow", 1],
             ["yellow", "blue", 1]
         ];


         var doAnim=true;
         var paused = false;


         pause = () => {
             paused = true;
         };


         unpause = () => {
             paused = false;
             requestAnimationFrame(update);
         };

         update = () => {

             if(paused){return;}

             // rule(green, green, -0.32);
             // rule(green, red, -0.17);
             // rule(green, yellow, 0.34);
             // rule(red, red, -0.1);
             // rule(red, green, -0.34);
             // rule(yellow, yellow, 0.15);
             // rule(yellow, green, -0.2);

             // rule(blue, blue, -0.2);
             // rule(white, white, 0.5);
             // rule(red, red, -2);
             // rule(red, white, 0.5);
             // rule(red, blue, -0.4);
             // rule(blue, white, -0.4);

             //if(!doAnim){context=null; return;}

             for (i = 0; i < matrix.length; i++) {
                 c = matrix[i];
                 rule(eval(c[0]), eval(c[1]), c[2]);
             }

             m.clearRect(0, 0, 750, 750);
             draw(0, 0, "black", 750);
             for (i = 0; i < atoms.length; i++) {
                 draw(atoms[i].x, atoms[i].y, atoms[i].color, 5);
             }
             requestAnimationFrame(update);
         };
         update();

         // m = null;


         //document.getElementById("reset").onclick = reset;

        </script>


        <!--[if lt IE 8]>
            <p class="browserupgrade">
            You are using an <strong>outdated</strong> browser. Please
            <a href="http://browsehappy.com/">upgrade your browser</a> to improve
            your experience.
            </p>
        <![endif]-->


    </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Untitled</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->

	</head>
	<body>


	<button id="reset">Reset</button>
	<button id="stop_btn" onClick="pause()">Stop</button>
	<button id="start_btn" onClick="unpause()">Start</button>
	<button id="addrandom_btn" onClick="addRandom()">Add Random</button>
	<br>
	<Br>
	<canvas id="life" width="750" height="750" style="background-color: black;"></canvas>
	<script>

	//Hunar Ahmad @ brainxyz
	m = document.getElementById("life").getContext("2d");
	draw = (x, y, c, s) => {
	m.fillStyle = c;
	m.fillRect(x, y, s, s);
	};
	atoms = [];
	atom = (x, y, c) => {
	return { x: x, y: y, vx: 0, vy: 0, color: c };
	};
	random = () => {
	return Math.random() * 750 + 50;
	};
	create = (number, color) => {
	group = [];
	for (let i = 0; i < number; i++) {
	a = atom(random(), random(), color);
	group.push(a);
	atoms.push(group[i]);
	}
	return group;
	};
	rule = (atoms1, atoms2, g) => {
	for (let i = 0; i < atoms1.length; i++) {
	fx = 0;
	fy = 0;
	for (let j = 0; j < atoms2.length; j++) {
	a = atoms1[i];
	b = atoms2[j];
	dx = a.x - b.x;
	dy = a.y - b.y;
	d = Math.sqrt(dx * dx + dy * dy);
	if (d > 0 && d < 80) {
	F = (g * 1) / d;
	fx += F * dx;
	fy += F * dy;
	}
	}
	a.vx = (a.vx + fx) * 0.5;
	a.vy = (a.vy + fy) * 0.5;
	a.x += a.vx;
	a.y += a.vy;
	if (a.x <= 0 \|\| a.x >= 750) { a.vx *= -1; }
	if (a.y <= 0 \|\| a.y >= 750) { a.vy *= -1; }
	}
	};

	reset = () => {
	m.clearRect(0, 0, 750, 750);
	};


	addRandom = () => {
	create(300, "purple");
	};



	yellow = create(300, "yellow");
	//red = create(200, "red");
	green = create(150, "green");
	white = create(100, "white");
	red = create(150, "red");
	blue = create(250, "blue");


	let matrix = [
	["white", "white", 1],
	["blue", "blue", -1],
	["blue", "red", -0.5],
	["blue", "white", -0.4],
	["red", "red", -5],
	["red", "white", 0.5],
	["red", "blue", -0.3],
	["white", "yellow", 1],
	["yellow", "white", 1],
	["blue", "yellow", 1],
	["yellow", "blue", 1]
	];


	var doAnim=true;
	var paused = false;


	pause = () => {
	paused = true;
	};


	unpause = () => {
	paused = false;
	requestAnimationFrame(update);
	};

	update = () => {

	if(paused){return;}

	// rule(green, green, -0.32);
	// rule(green, red, -0.17);
	// rule(green, yellow, 0.34);
	// rule(red, red, -0.1);
	// rule(red, green, -0.34);
	// rule(yellow, yellow, 0.15);
	// rule(yellow, green, -0.2);

	// rule(blue, blue, -0.2);
	// rule(white, white, 0.5);
	// rule(red, red, -2);
	// rule(red, white, 0.5);
	// rule(red, blue, -0.4);
	// rule(blue, white, -0.4);

	//if(!doAnim){context=null; return;}

	for (i = 0; i < matrix.length; i++) {
	c = matrix[i];
	rule(eval(c[0]), eval(c[1]), c[2]);
	}

	m.clearRect(0, 0, 750, 750);
	draw(0, 0, "black", 750);
	for (i = 0; i < atoms.length; i++) {
	draw(atoms[i].x, atoms[i].y, atoms[i].color, 5);
	}
	requestAnimationFrame(update);
	};
	update();

	// m = null;



	//document.getElementById("reset").onclick = reset;

	</script>


	<!--[if lt IE 8]>
	<p class="browserupgrade">
	You are using an <strong>outdated</strong> browser. Please
	<a href="http://browsehappy.com/">upgrade your browser</a> to improve
	your experience.
	</p>
	<![endif]-->


	</body>
	</html>