trpomoais2018 · DerArvend · Jun 22, 2018 · Jun 22, 2018
diff --git a/README.md b/README.md
@@ -1,29 +1 @@
-# Задание 4. Дракон Хартера-Хейтуэя
-Написать программу, выполняющую построение дракона Хартера-Хейтуэя с помощью системы итерируемых функций (IFS).
-
-## Метод построения
-Задачу можно решить с помощью рекурсии.
-* На каждом шаге функция принимает отрезок в виде координат двух крайних точек.
-* Каждое из двух преобразований IFS генерирует по отрезку.
-При этом достаточно произвести вычисления только для двух крайних точек исходного отрезка, т.к. в нашем случае IFS состоит из аффинных преобразований, которые переводят отрезок в отрезок.
-* Каждый новый отрезок запускает новую ветку рекурсии.
-
-![Построение](/images/ifs.png)
-
-## Входные данные
-* количество итераций `n`
-
-## Описание IFS
-### Первое преобразование IFS</span>
-<code>x<sub>1</sub>' = 0.5x + 0.5y</code><br>
-<code>y<sub>1</sub>' = -0.5x + 0.5y</code><br>
-
-### Второе преобразование IFS</span>
-<code>x<sub>2</sub>' = -0.5x + 0.5y - 1</code><br>
-<code>y<sub>2</sub>' = -0.5x - 0.5y</code><br>
-
-## Замечания
-* Вследствие того, что описанная IFS является сжимающим отображением выбор начального отрезка не принципиален - результат при большом числе итераций будет одинаков.
-* Хотя построение фрактала с помощью IFS реализовывается через рекурсию, здесь есть особенности. При вычислении любой точки нового поколения кривой используется только одна точка предыдущего поколения и одно из двух преобразований IFS.
-
 ![Дракон Хартера-Хейтуэя](/images/dragon.png)
diff --git a/index.html b/index.html
@@ -1,110 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta http-equiv="Cache-Control" content="no-cache"/>
-
-	<script>
-		//пример рисования произвольного множества точек
-		function example1() {
-			//получаем html-элемент типа canvas и его характеристики
-			var canvas = document.getElementById("canvas1");
-			var canvasHeight = parseInt(canvas.getAttribute("height"));
-			var canvasWidth = parseInt(canvas.getAttribute("width"));
-
-			//создаем 2d context
-			var context = canvas.getContext('2d');
-
-			//создаем "буфер" imageData, в который будем класть новую информацию о цветах
-			var imageData = context.createImageData(canvasWidth, canvasHeight);
-			for (var i = 0; i < canvasWidth; i++) {
-				for (var j = 0; j < canvasHeight; j++) {
-					var red = 0;
-					var green = 0;
-					var blue = (i + j) % 255;
-					if (i % 20 == 0)
-						red = 150;
-					if (j % 20 == 0)
-						green = 150;
-					var opacity = 255;
-
-					imageData.data[4*(i + canvasWidth*j) + 0] = red;
-					imageData.data[4*(i + canvasWidth*j) + 1] = green;
-					imageData.data[4*(i + canvasWidth*j) + 2] = blue;
-					imageData.data[4*(i + canvasWidth*j) + 3] = opacity;
-				}
-			}
-			//заполненный "буфер" imageData передаем в context для вывода на экран
-			context.putImageData(imageData, 0, 0);
-		}
-
-		//пример рисования отдельных линий
-		function example2() {
-			//получаем html-элемент типа canvas и его характеристики
-			var canvas = document.getElementById("canvas2");
-			var canvasHeight = parseInt(canvas.getAttribute("height"));
-			var canvasWidth = parseInt(canvas.getAttribute("width"));
-
-			//создаем 2d context
-			var context = canvas.getContext('2d');
-
-			//задаем стиль линий
-			context.lineWidth = "5";
-			context.strokeStyle = "green";
-
-			//начинаем создание нового пути
-			context.beginPath(); 
-			//задаем начальную точку линии
-			context.moveTo(0, 75);
-			//задаем конечную точку линии и добавляем линию в путь
-			context.lineTo(150, 100);
-			//выводим путь на экран
-			context.stroke();
-		}
-
-		//пример рисования полилиний (сначала вычисляем точки, затем рисуем)
-		function example3() {
-			//получаем html-элемент типа canvas и его характеристики
-			var canvas = document.getElementById("canvas3");
-			var canvasHeight = parseInt(canvas.getAttribute("height"));
-			var canvasWidth = parseInt(canvas.getAttribute("width"));
-
-			//создаем 2d context
-			var context = canvas.getContext('2d');
-
-			//задаем стиль линий
-			context.lineWidth = "2";
-			context.strokeStyle = "#FF0000";
-
-			//создаем массив точек
-			//в качестве точек используются анонимные объекты со свойствами x и y
-			var points = [{x: 20, y: 50}, {x: 120, y: 50}, {x: 120, y: 100}, {x: 50, y: 20}];
-
-			//начинаем создание нового пути
-			context.beginPath(); 
-			//добавляем в путь все точки из массива
-			for (var i = 0; i < points.length; i++) {
-				var point = points[i];
-			    if (i == 0)
-					context.moveTo(point.x, point.y);
-				else
-					context.lineTo(point.x, point.y);
-			}
-			//выводим путь на экран
-			context.stroke();
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Page Title</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<style>
+		canvas {
+			display: block;
+			margin: auto;
 		}
-
-		//вызывается после загрузки body
-		function run () {
-			example1();
-			example2();
-			example3();
-		}
-	</script>
-
-<body onload="run()">
-  <canvas height='200' width='200' id='canvas1'></canvas>
-  <canvas height='200' width='200' id='canvas2'></canvas>
-  <canvas height='200' width='200' id='canvas3'></canvas>
+	</style>
+
+</head>
+<body>
+	<canvas width="1366" height="768" id="canv" ></canvas>
+	<script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,36 @@
+let canvas = document.getElementById('canv');
+let ctx = canvas.getContext("2d");
+
+const scaleFactor = 250;
+ctx.transform(scaleFactor, 0, 0, scaleFactor, canvas.width / 2, canvas.height / 2);
+
+
+const transforms = [p => {
+    return {
+        x: p.x * 0.5 + p.y * 0.5,
+        y: -p.x * 0.5 + p.y * 0.5
+    }
+} ,
+    p => {
+        return {
+            x: -p.x * 0.5 + p.y * 0.5 - 1,
+            y: -p.x * 0.5 - p.y * 0.5
+        }
+    }]
+
+
+const drawDragon = (depth, prevPoint) => {
+    if (depth <= 0) return;
+
+    let p1 = transforms[0](prevPoint);
+    let p2 = transforms[1](prevPoint);
+
+    drawPoint(p1);
+    drawPoint(p2);
+
+    drawDragon(depth - 1, p1);
+    drawDragon(depth - 1, p2);
+}
+
+const drawPoint = p => ctx.fillRect(p.x, p.y, 1 / scaleFactor, 1 / scaleFactor);
+drawDragon(17, {x: 0, y: 0});