trpomoais2018 · DarkSanny · Feb 27, 2018 · Feb 27, 2018 · Feb 27, 2018 · Feb 27, 2018
diff --git a/koch.html b/koch.html
@@ -0,0 +1,119 @@
+<!doctype html>	 
+<html>	
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Cache-Control" content="no-cache"/>
+	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+	<script>
+		var size = 500;
+        var count = 5;
+
+		$(document).ready(function () {
+			$("#sizer").slider(
+			{
+				min: 100,
+				max: 1000,
+				value: size,
+				step: 10,
+				slide: changeSize,
+				change: changeSize
+			});
+			$("#counter").slider(
+			{
+				min: 0,
+				max: 7,
+				value: count,
+				step: 1,
+				slide: changeCount,
+				change: changeCount
+			});
+        });
+
+		function changeSize(event, ui){
+		  	size = ui.value;
+			$("#sizeUpdate").html(size);
+		  	main();
+        }
+
+		function changeCount(event, ui){
+			count = ui.value;
+			$("#countUpdate").html(count);
+			main();
+        }
+
+		function main() {
+			setDefaultValues();
+			var context = getDefaultCanvasContext();
+			var triangleHeight = Math.sqrt(3) * size / 2;
+			var center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+			var point1 = { x: center.x + size / 2, y: center.y - triangleHeight / 2 };
+			var point2 = { x: center.x - size / 2, y: center.y - triangleHeight / 2 };
+			var point3 = { x: center.x, y: center.y + triangleHeight / 2 };
+			drawKochSnowflake(context, point1, point2, point3, count);
+        }
+
+		function drawKochSnowflake(context, point1, point2, point3, count){
+			fractal(context, point1, point2, count);
+			fractal(context, point2, point3, count);
+			fractal(context, point3, point1, count);
+        }	
+
+		function setDefaultValues(){
+			$("#sizeUpdate").html(size);
+			$("#countUpdate").html(count);
+		}
+
+		function getDefaultCanvasContext(){
+			var canvas = document.getElementById("canvas");
+			canvas.setAttribute("Width", window.innerWidth);
+			canvas.setAttribute("Height", window.innerHeight);
+			var context = canvas.getContext('2d');
+			context.lineWidth = "1";
+			context.strokeStyle = "#000000";
+			context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+			return context;
+        }
+
+		function fractal(context, sPoint, fPoint, count) {
+			if (count === 0) {
+				drawLineOn(context, sPoint, fPoint);
+				return;
+			}
+			var firstPoint = { x: sPoint.x + (fPoint.x - sPoint.x) / 3, y: sPoint.y + (fPoint.y - sPoint.y) / 3 };
+			var secondPoint = { x: sPoint.x + 2 * (fPoint.x - sPoint.x) / 3, y: sPoint.y + 2 * (fPoint.y - sPoint.y) / 3 }
+			var middlePoint = findMiddlePoint(firstPoint, secondPoint);
+			fractal(context, sPoint, firstPoint, count - 1);
+			fractal(context, firstPoint, middlePoint, count - 1);
+			fractal(context, middlePoint, secondPoint, count - 1);
+			fractal(context, secondPoint, fPoint, count - 1);
+        }
+
+		function findMiddlePoint(sPoint, fPoint){
+			var vector = { x: fPoint.x - sPoint.x, y: fPoint.y - sPoint.y };
+			var angle = Math.atan2(vector.y, vector.x) + Math.PI / 3;
+			var length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
+			return getCartesianPoint(sPoint, length, angle);
+        }
+
+		function getCartesianPoint(center, length, angle) {
+			return { x: center.x + (length * Math.cos(angle)), y: center.y + (length * Math.sin(angle)) };
+        }
+
+		function drawLineOn(canvasContext, sPoint, fPoint) {
+			canvasContext.beginPath();
+			canvasContext.moveTo(sPoint.x, sPoint.y);
+			canvasContext.lineTo(fPoint.x, fPoint.y);
+			canvasContext.stroke();
+		}
+	</script>
+</head>
+<body onload="main()" style="overflow: hidden">
+	Size: <span id="sizeUpdate">0</span>
+	<div id="sizer"></div>
+	Count: <span id="countUpdate">0</span>
+	<div id="counter"></div>
+	<canvas height='2000' width='2000' id='canvas'></canvas>
+</body>
+</html>