From f8ee51dc9b80771750f914d75e17599ae0217b68 Mon Sep 17 00:00:00 2001 From: Alexey Nurgaliev Date: Mon, 7 Apr 2014 21:38:06 +0400 Subject: [PATCH] =?UTF-8?q?=D0=A4=D1=80=D0=B0=D0=BA=D1=82=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=9C=D0=B0=D0=BD=D0=B4=D0=B5=D0=BB=D1=8C=D0=B1=D1=80=D0=BE?= =?UTF-8?q?=D1=82=D0=B0=20=D0=BD=D0=B0=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- .../2014-04-07-mandelbrot-canvas.html | 41 +++++++ css/mandelbrot.css | 13 +++ js/mandelbrot.js | 102 ++++++++++++++++++ 4 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 _posts/experimental/2014-04-07-mandelbrot-canvas.html create mode 100644 css/mandelbrot.css create mode 100644 js/mandelbrot.js diff --git a/.gitignore b/.gitignore index d84202b..63e9b19 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ _site -.vagrant \ No newline at end of file +.vagrant +.idea \ No newline at end of file diff --git a/_posts/experimental/2014-04-07-mandelbrot-canvas.html b/_posts/experimental/2014-04-07-mandelbrot-canvas.html new file mode 100644 index 0000000..2594998 --- /dev/null +++ b/_posts/experimental/2014-04-07-mandelbrot-canvas.html @@ -0,0 +1,41 @@ +--- +layout: post +title: Фрактал Мандельброта на canvas +author: Alexey Nurgaliev +section: experimental +--- + + + + + Ваш браузер не поддерживает canvas :( +
+
+
+
+ Параметры фрактала + +
+ +
+ Kmax + +
+
+
+ Rmin + +
+
+
+ Цвет + +
+
+ + + +
+
+
+ diff --git a/css/mandelbrot.css b/css/mandelbrot.css new file mode 100644 index 0000000..47b53d0 --- /dev/null +++ b/css/mandelbrot.css @@ -0,0 +1,13 @@ +canvas { + border-style: solid; + border-width: 2px; + border-color: #eaeaea; + margin: 10px auto 10px; + display: block; +} + +.fractal-params { + display: block; + margin: 10px auto 10px auto; + max-width: 400px; +} \ No newline at end of file diff --git a/js/mandelbrot.js b/js/mandelbrot.js new file mode 100644 index 0000000..5842ed6 --- /dev/null +++ b/js/mandelbrot.js @@ -0,0 +1,102 @@ +var x_min = -2; +var x_max = 1; +var y_min = -1.5; +var y_max = 1.5; +var k_max = 100; +var r_min = 2; + +var res_color_r = 0; +var res_color_g = 0; +var res_color_b = 255; + +var canvas, context; + +$(function() { + canvas = document.getElementById('drawingCanvas'); + context = canvas.getContext('2d'); + + //bind events + $('#redraw').click(fractalRedraw); + $('#resetForm').click(resetParams); + + drawMandelbrot(); +}); + +function drawMandelbrot() { + var width = canvas.width; + var height = canvas.height; + var dx = (x_max - x_min) / width; + var dy = (y_max - y_min) / height; + + var imageData = context.createImageData(width, height); + var pixelData = imageData.data; + var currentPixel = 0; + + for(var y = 0; y < height; y++) { + for(var x = 0; x < width; x++) { + var k = mandelbrotIteration(x_min + x * dx, y_min + y * dy); + pixelData[currentPixel + 0] = res_color_r; + pixelData[currentPixel + 1] = res_color_g; + pixelData[currentPixel + 2] = res_color_b; + pixelData[currentPixel + 3] = Math.round(255 * (k / k_max)); + currentPixel += 4; + } + } + context.putImageData(imageData, 0, 0); +} + +function mandelbrotIteration(cx, cy) { + var r_sq = r_min * r_min; + var xk = cx; + var yk = cy; + for(var i = 0; i < k_max; i++){ + var x = (xk * xk) - (yk * yk) + cx; + var y = 2 * xk * yk + cy; + if(x * x + y * y > r_sq) { + return i; + } + xk = x; + yk = y; + } + return k_max; +} + +function resetParams() { + $('#kmax').val(100); + $('#rmin').val(2); + $('#color').val('0000FF'); +} + +function fractalRedraw() { + getParams(); + drawMandelbrot(); +} + +function getParams() { + //reset errors + $('#errors').children().remove(); + + //Kmax + k_max = parseInt($('#kmax').val()); + if(isNaN(k_max) || k_max <= 0) { + $('

Неправильное значение Kmax. Используется значение по умодчанию (100).

').appendTo('#errors'); + k_max = 100; + } + + //Rmin + r_min = parseFloat($('#rmin').val()); + if(isNaN(r_min) || r_min <= 0) { + $('

Неправильное значение Rmin. Используется значение по умодчанию (2).

').appendTo('#errors'); + r_min = 2; + } + + //color + color = parseInt($('#color').val(), 16); + if(isNaN(color) || color < 0 || color > 0xFFFFFF) { + $('

Неправильное значение цвета. Используется значение по умодчанию (#0000FF).

').appendTo('#errors'); + color = 0x0000FF; + } + res_color_b = color % 0x100; + res_color_g = Math.floor((color % 0x10000) / 0x100); + res_color_r = Math.floor((color / 0x10000)); +} \ No newline at end of file