From b971c0173197517aace03300251d0caba0827ea8 Mon Sep 17 00:00:00 2001 From: iok144 Date: Thu, 2 Mar 2017 20:27:01 +0500 Subject: [PATCH 1/2] Finished --- snowflake.html | 9 ++++++ snowflake.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 snowflake.html create mode 100644 snowflake.js diff --git a/snowflake.html b/snowflake.html new file mode 100644 index 0000000..dc87bf3 --- /dev/null +++ b/snowflake.html @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/snowflake.js b/snowflake.js new file mode 100644 index 0000000..2110caa --- /dev/null +++ b/snowflake.js @@ -0,0 +1,76 @@ +function drawSnowflake(iteration) { + var x = 0; + var y = 375; + var angle = -60; + var len = 430; + + var canvas = document.getElementById("snowflake"); + var canvasHeight = parseInt(canvas.getAttribute("height")); + var canvasWidth = parseInt(canvas.getAttribute("width")); + + var context = canvas.getContext("2d"); + + canvas.width = canvas.width;//Очистка канваса + + context.lineWidth = "1"; + context.strokeStyle = "#0000FF"; + + drawSide(iteration, x, y, angle, len, context); + + x = x + len * Math.cos(angle * Math.PI / 180); + y = y + len * Math.sin(angle * Math.PI / 180); + angle += 120; + drawSide(iteration, x, y, angle, len, context); + + x = x + len * Math.cos(angle * Math.PI / 180); + y = y + len * Math.sin(angle * Math.PI / 180); + angle += 120; + drawSide(iteration, x, y, angle, len, context); +} +/** + * Рисует сторону снежинки Коха + * + * @param {Number} iteration Количество итераций + * @param {Number} x Абсцисса + * @param {Number} y Ордината + * @param {Number} angle Угол поворота + * @param {Number} len Длина линии + * @param {object} context HTML context + */ +function drawSide(iteration, x, y, angle, len, context) { + if(iteration > 0) { + drawSide(iteration - 1, x, y, angle, len/3, context); + + x = x + len / 3 * Math.cos(angle * Math.PI / 180); + y = y + len / 3 * Math.sin(angle * Math.PI / 180); + angle -= 60; + drawSide(iteration - 1, x, y, angle, len/3, context); + + x = x + len / 3 * Math.cos(angle * Math.PI / 180); + y = y + len / 3 * Math.sin(angle * Math.PI / 180); + angle += 120; + drawSide(iteration - 1, x, y, angle, len/3, context); + + x = x + len / 3 * Math.cos(angle * Math.PI / 180); + y = y + len / 3 * Math.sin(angle * Math.PI / 180); + angle -= 60; + drawSide(iteration - 1, x, y, angle, len/3, context); + } + else { + var finishX = x + len * Math.cos(angle * Math.PI / 180); + var finishY = y + len * Math.sin(angle * Math.PI / 180); + drawLine(x, y, finishX, finishY, context); + } +} + +function drawLine(x, y, finishX, finishY, context) { + context.beginPath(); + context.moveTo(x, y); + context.lineTo(finishX, finishY); + context.stroke(); +} + +function run() { + var input = document.getElementById("input").value; + drawSnowflake(input); +} \ No newline at end of file From 9a569b1e76051724cb5ed6c6086e1f251874a271 Mon Sep 17 00:00:00 2001 From: iok144 Date: Mon, 6 Mar 2017 13:27:24 +0500 Subject: [PATCH 2/2] Snowflake can be drawn with any canvas size --- index.html | 110 --------------------------------------------------- snowflake.js | 53 ++++++++++++++----------- 2 files changed, 29 insertions(+), 134 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 39a9d04..0000000 --- a/index.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/snowflake.js b/snowflake.js index 2110caa..f1ead8e 100644 --- a/snowflake.js +++ b/snowflake.js @@ -1,13 +1,18 @@ function drawSnowflake(iteration) { - var x = 0; - var y = 375; - var angle = -60; - var len = 430; - var canvas = document.getElementById("snowflake"); var canvasHeight = parseInt(canvas.getAttribute("height")); var canvasWidth = parseInt(canvas.getAttribute("width")); + var len; + if(canvasHeight / canvasWidth <= (Math.sin(Math.PI / 3) * 4 / 3)) { + len = canvasHeight * 3 / (4 * Math.sin(Math.PI / 3)); + } else { + len = canvasWidth; + } + var x = 0; + var y = len * Math.sin(Math.PI / 3); + var angle = -60 * Math.PI / 180; + var context = canvas.getContext("2d"); canvas.width = canvas.width;//Очистка канваса @@ -17,14 +22,14 @@ function drawSnowflake(iteration) { drawSide(iteration, x, y, angle, len, context); - x = x + len * Math.cos(angle * Math.PI / 180); - y = y + len * Math.sin(angle * Math.PI / 180); - angle += 120; + x = x + len * Math.cos(angle); + y = y + len * Math.sin(angle); + angle += 120 * Math.PI / 180; drawSide(iteration, x, y, angle, len, context); - x = x + len * Math.cos(angle * Math.PI / 180); - y = y + len * Math.sin(angle * Math.PI / 180); - angle += 120; + x = x + len * Math.cos(angle); + y = y + len * Math.sin(angle); + angle += 120 * Math.PI / 180; drawSide(iteration, x, y, angle, len, context); } /** @@ -41,24 +46,24 @@ function drawSide(iteration, x, y, angle, len, context) { if(iteration > 0) { drawSide(iteration - 1, x, y, angle, len/3, context); - x = x + len / 3 * Math.cos(angle * Math.PI / 180); - y = y + len / 3 * Math.sin(angle * Math.PI / 180); - angle -= 60; + x = x + len / 3 * Math.cos(angle); + y = y + len / 3 * Math.sin(angle); + angle -= 60 * Math.PI / 180; drawSide(iteration - 1, x, y, angle, len/3, context); - x = x + len / 3 * Math.cos(angle * Math.PI / 180); - y = y + len / 3 * Math.sin(angle * Math.PI / 180); - angle += 120; + x = x + len / 3 * Math.cos(angle); + y = y + len / 3 * Math.sin(angle); + angle += 120 * Math.PI / 180; drawSide(iteration - 1, x, y, angle, len/3, context); - x = x + len / 3 * Math.cos(angle * Math.PI / 180); - y = y + len / 3 * Math.sin(angle * Math.PI / 180); - angle -= 60; + x = x + len / 3 * Math.cos(angle); + y = y + len / 3 * Math.sin(angle); + angle -= 60 * Math.PI / 180; drawSide(iteration - 1, x, y, angle, len/3, context); } else { - var finishX = x + len * Math.cos(angle * Math.PI / 180); - var finishY = y + len * Math.sin(angle * Math.PI / 180); + var finishX = x + len * Math.cos(angle); + var finishY = y + len * Math.sin(angle); drawLine(x, y, finishX, finishY, context); } } @@ -71,6 +76,6 @@ function drawLine(x, y, finishX, finishY, context) { } function run() { - var input = document.getElementById("input").value; - drawSnowflake(input); + var iteration = document.getElementById("input").value; + drawSnowflake(iteration); } \ No newline at end of file