Просто учить язык программирования, переменные, команды, массивы и т.п. немного скучно. Поэтому я решил сделать уроки на примерах, что будет более увлекательным. По мере решения задач мы будем изучать структуру языка и различные способы достижения результата. Кроме того, используя комментарии в коде, рекомендую изменять его самостоятельно, это сделает изучение более интересным и позволит лучше освоить материал.
Несколько слов о предмете урока:
HTML (от англ. HyperText Markup Language») — стандартизированный язык разметки веб-страниц в Интернет. Код HTML одинаково интерпретируется всеми браузерами и отображается на экране монитора компьютера или мобильного устройства.
Язык JavaScript был разработан 1995 году для браузера Netscape Navigator. Теперь он поддерживается во всех графических браузерах. Стоит отметить, что JavaScript не имеет отношения к языку Java, хотя имеет некоторые синтаксические сходства, впрочем, как и с языком программирования C.
Фракта́л (лат. fractus — дроблёный, сломанный, разбитый) — множество, естественное и бесконечное, обладающее свойством самоподобия (объект, в точности или приближённо совпадающий с частью себя самого, то есть целое имеет ту же форму, что и одна или более частей).
В этом примере мы разберем как начать программировать на JavaScript, структуру HTML файла и нарисуем фрактал – лист Папоротника Барнсли.
Для программирования я буду использовать Notepad++, но можно использовать и стандартный блокнот Windows. Лучше использовать Notepad++ работать в нем будет удобней, быстрее и наглядней, скачать редактор можно здесь: https://notepad-plus-plus.org/downloads/.
Однако перейдем к делу. Для начала создадим папку JS#1 и в ней два файла: main.js и index.html. Создать файлы можно в редакторе или в командной строке (пример: copy nul > “C:\ПУТЬкФАЙЛУ\main.js”):
Открываем в редакторе файл index.html и набираем или копируем текст:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript в задачах и примерах. #1. Рисуем лист Папоротника Барнсли.</title><!-- Зададим титут страницы -->
</head>
<body style="color:black; background-color:#e1dba9"><!-- И немного раскрасим страницу, установим цвет текста и фона -->
<h1 align="center" style="color:#0000dd"><!-- Заголовок страницы выровняем по центру, зададим синий цвет -->
JavaScript в задачах и примерах. #1.<br/><!-- Тег: <br /> - Перевод строки -->
Рисуем лист Папоротника Барнсли.
</h1>
<p align="justify"> <!-- И выровняем текст по ширине тегом: align="justify" -->
♦ <!-- Для красоты поставим символ ромба: ♦ и набираем текст описания -->
Папоротник Барнсли - фрактал, названный в честь Майкла Барнсли,
британского математика, который первым описал его в своей книге "Фракталы Повсюду".
Является одним из основных примеров "само подобных" множеств, т.е.
представляет собой математически генерируемый "шаблон",
воспроизводимый при любом увеличении или уменьшении количества итераций.
<input type="button" onclick="draw()" value="Рисовать"> <!-- кнопка запуска рисования, вызывает фенкцию draw() -->
</p>
<hr align="center" width="800" size="3" color="#70a080" /><br /> <!-- горизонтальная линия -->
<canvas height="800" width='800' id='cnvs'></canvas><br />
<!-- Ссылка на наш JavaScript файл: main.js -->
<script src="main.js"></script>
</body>
</html>
Символ #- это # . Сохраним код HTML. Откроем файл index.html в браузере и если увидим следующее:
Теперь можно приступить к написанию кода рисующего лист Папоротника Барнсли. Для этого, откроем файл main.js в редакторе.
Фрактал Папоротник Барнсли строится при помощи 4-х аффинных преобразований вида:
Первая точка находится в начале координат (х0 = 0, у0 = 0), а затем новые точки итеративно вычисляются путем случайного применения одного из следующих четырех преобразований координат:
(1) X(n + 1) = 0; Y(n + 1) = 0.16 Y(n).
Данное преобразование выбирается в 1% случаев и указывает на точку у основания стебля.
(2) X(n + 1) = 0.85 X(n) + 0.04 Y(n); Y(n + 1) = −0.04 X(n) + 0.85 Y(n) + 1.6.
Преобразование (2) используется в 85% случаев и указывает на точку листа, попадающую в красный треугольник.
(3) X(n + 1) = 0.2 X(n) − 0.26 Y(n); Y(n + 1) = 0.23 X(n) + 0.22 Y(n) + 1.6.
Выбирается в 7% случаев - попадания точки в синий треугольник и симметричного ему относительно главного стебля.
(4) X(n + 1) = −0.15 X(n) + 0.28 Y(n); Y(n + 1) = 0.26 X(n) + 0.24 Y(n) + 0.44.
В оставшихся 7% случаев используется преобразование (4) - для симметричных преобразованию (3) относительно стеблей 2-го порядка.
Это теория, а теперь к практике.
Откроем в редакторе файл main.js и наберем следующий код JavaScript:
var ctx, imgData, canvas; // определяем переменные, для последующего использования
var color = {r: 40, g: 100, b: 60 , a: 255}; // цвет папоротника
canvas = document.getElementById("cnvs"); // получаем ссылку на холст по его Id
ctx = canvas.getContext("2d"); // определяем рисунок как двухмерный
function setPixel (x,y,c) // Функция устанавливает пиксель с координатой (x, y) с цветом c
{
var index = 4*(x + canvas.width*y); // Определим и зададим значение переменной index
imgData.data[index + 0]=c.r; // устанавливает значение красного цвета
imgData.data[index + 1]=c.g; // устанавливает значение зеленого цвета
imgData.data[index + 2]=c.b; // устанавливает значение синего цвета
imgData.data[index + 3]=c.a; // устанавливает значение прозрачности
}
function draw() // Функция рисования
{
imgData = ctx.createImageData(800, 800); //создадим новый объект ImageData. Пиксели прозрачного цвета
ctx.putImageData(imgData, 0, 0); // помещает данные объекта ImageData на холст
var iterationCount = 500000; // количество итераций
var p, oldx;
var r = 60; // коэффициент размера
//зададим начальные координаты
x = 1.0;
y = 0.0;
while(iterationCount > 0) // Цикл пока iterationCount > 0
{
p = Math.random(); // генерируем случайное число от 0 до 1 (вероятность)
oldx = x; // запоминаем старое значение х
if(p <= 0.85) // верхняя часть, вероятность 85%
{
x = 0.85 * x + 0.04 * y;
y = -0.04 * oldx + 0.85 * y + 1.6;
}
else
{
if(p <= 0.92) // левый лист, вероятность 7% (92-85)
{
x = 0.2 * x - 0.26 * y;
y = 0.23 * oldx + 0.22 * y + 1.6;
}
else if(p <= 0.99) // правый лист, вероятность 7% (99-92)
{
x = -0.15 * x + 0.28 * y;
y = 0.26 * oldx + 0.24 * y + 0.44;
}
else // стебель, вероятность 1% (100-99)
{
x = 0.0;
y = 0.16 * y;
}
}
// ставим пиксель, сдвигаем его в центр
setPixel(400 + Math.round(r * x), 600 - Math.round(r * y), color); // вызов функции setPixel()
iterationCount--; //Вычитаем единицу из значения счетчика iterationCount
}
ctx.putImageData(imgData, 0, 0); // помещает данные объекта ImageData на холст
}
Сохраним код в файле main.js и пора посмотреть результат. Откроем в браузере index.html и нажмем на кнопку «Рисовать».
Если Вы видите такую страницу, то у нас все получилось и наш java Script работает. Если нет, то ищем ошибку. Используя комментарии в коде попробуйте поменять размер листа, цвет, и форму листьев.
Если Вам понравилась статья ставьте лайк и подписывайтесь на канал, впереди много интересного.
