{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто учить язык программирования, переменные, команды, массивы и т.п. немного скучно. Поэтому я решил сделать уроки на примерах, что будет более увлекательным. По мере решения задач мы будем изучать структуру языка и различные способы достижения результата. Кроме того, используя комментарии в коде, рекомендую изменять его самостоятельно, это сделает изучение более интересным и позволит лучше освоить материал.","type":"unstyled","key":"6kkdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несколько слов о предмете урока:","type":"unstyled","key":"bajgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML (от англ. HyperText Markup Language») — стандартизированный язык разметки веб-страниц в Интернет. Код HTML одинаково интерпретируется всеми браузерами и отображается на экране монитора компьютера или мобильного устройства.","type":"unstyled","key":"3hav5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":5,"style":"BOLD"}],"text":"Язык JavaScript был разработан 1995 году для браузера Netscape Navigator. Теперь он поддерживается во всех графических браузерах. Стоит отметить, что JavaScript не имеет отношения к языку Java, хотя имеет некоторые синтаксические сходства, впрочем, как и с языком программирования C.","type":"unstyled","key":"c4qrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Фракта́л (лат. fractus — дроблёный, сломанный, разбитый) — множество, естественное и бесконечное, обладающее свойством самоподобия (объект, в точности или приближённо совпадающий с частью себя самого, то есть целое имеет ту же форму, что и одна или более частей).","type":"unstyled","key":"6aur5"},{"data":{"image":{"id":"5fb12ef98d19932be1bc31aa"},"images":[{"id":"5fb12ef98d19932be1bc31aa"},{"id":"5fb12746f2466e18104727c9"}],"contents":{"5fb12746f2466e18104727c9":"Фрактальная форма кочана капусты сорта Романеско","5fb12ef98d19932be1bc31aa":"Фрактал Папоротник Барнсли","imageId":"Фрактальная форма кочана капусты сорта Романеско"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фрактал Папоротник Барнсли","type":"atomic:image","key":"5v3if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере мы разберем как начать программировать на JavaScript, структуру HTML файла и нарисуем фрактал – лист Папоротника Барнсли.","type":"unstyled","key":"a003e"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":40,"offset":215}],"inlineStyleRanges":[],"text":"Для программирования я буду использовать Notepad++, но можно использовать и стандартный блокнот Windows. Лучше использовать Notepad++ работать в нем будет удобней, быстрее и наглядней, скачать редактор можно здесь: https://notepad-plus-plus.org/downloads/.","type":"unstyled","key":"2ene6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако перейдем к делу. Для начала создадим папку JS#1 и в ней два файла: main.js и index.html. Создать файлы можно в редакторе или в командной строке (пример: copy nul > “C:\\ПУТЬкФАЙЛУ\\main.js”):","type":"unstyled","key":"b3lmd"},{"data":{"image":{"id":"5fb1280b70f5da1bdae84b39"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каталоге должно получиться два файла","type":"atomic:image","key":"249sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываем в редакторе файл index.html и набираем или копируем текст:","type":"unstyled","key":"4e2lr"},{"data":{"image":{"id":"5fb1296b1064d30b6c048603"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержимое файла index.html в редакторе Notepad++","type":"atomic:image","key":"fc1bm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"c9a63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cun2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"eq550"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fdau1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в задачах и примерах. #1. Рисуем лист Папоротника Барнсли.","type":"blockquote","key":"97ukj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"44ut2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"410vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"50bi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в задачах и примерах. #1.
","type":"blockquote","key":"36hlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисуем лист Папоротника Барнсли.","type":"blockquote","key":"80m0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2pop3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"epmva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"♦ ","type":"blockquote","key":"30s5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Папоротник Барнсли - фрактал, названный в честь Майкла Барнсли,","type":"blockquote","key":"atlhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"британского математика, который первым описал его в своей книге \"Фракталы Повсюду\".","type":"blockquote","key":"altkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Является одним из основных примеров \"само подобных\" множеств, т.е.","type":"blockquote","key":"2n8i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"представляет собой математически генерируемый \"шаблон\",","type":"blockquote","key":"729sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"воспроизводимый при любом увеличении или уменьшении количества итераций.","type":"blockquote","key":"720si"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2p03u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"e38rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"enbj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"30u9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"e2482"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"flhgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"80s4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"66pl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Символ #- это # . Сохраним код HTML. Откроем файл index.html в браузере и если увидим следующее:","type":"unstyled","key":"1q5v5"},{"data":{"image":{"id":"5fb12a2c70f5da1bdaebdcd7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний вид страницы в браузере хром. Мы все сделали правильно, замечательно \uD83D\uDE0A. Попробуйте поменять цвета фона, текста и линии.","type":"atomic:image","key":"b3cs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь можно приступить к написанию кода рисующего лист Папоротника Барнсли. Для этого, откроем файл main.js в редакторе.","type":"unstyled","key":"b6o8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фрактал Папоротник Барнсли строится при помощи 4-х аффинных преобразований вида:","type":"unstyled","key":"epi5c"},{"data":{"image":{"id":"5fb12cb270f5da1bdaf036c4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2j5cq"},{"data":{"image":{"id":"5fb135df1064d30b6c19d3a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Построение фрактала Папоротник Барнсли","type":"atomic:image","key":"k4ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первая точка находится в начале координат (х0 = 0, у0 = 0), а затем новые точки итеративно вычисляются путем случайного применения одного из следующих четырех преобразований координат:","type":"unstyled","key":"3db3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(1) X(n + 1) = 0; Y(n + 1) = 0.16 Y(n).","type":"blockquote","key":"br375"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данное преобразование выбирается в 1% случаев и указывает на точку у основания стебля.","type":"blockquote","key":"5jdbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(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.","type":"blockquote","key":"fmori"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Преобразование (2) используется в 85% случаев и указывает на точку листа, попадающую в красный треугольник.","type":"blockquote","key":"8gcm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(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.","type":"blockquote","key":"b1ldd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирается в 7% случаев - попадания точки в синий треугольник и симметричного ему относительно главного стебля.","type":"blockquote","key":"cg6a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(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.","type":"blockquote","key":"ail13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В оставшихся 7% случаев используется преобразование (4) - для симметричных преобразованию (3) относительно стеблей 2-го порядка.","type":"blockquote","key":"8lhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это теория, а теперь к практике.","type":"unstyled","key":"5g17b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откроем в редакторе файл main.js и наберем следующий код JavaScript:","type":"unstyled","key":"8eall"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var ctx, imgData, canvas; // определяем переменные, для последующего использования","type":"blockquote","key":"63o5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var color = {r: 40, g: 100, b: 60 , a: 255}; // цвет папоротника","type":"blockquote","key":"d1qqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"canvas = document.getElementById(\"cnvs\"); // получаем ссылку на холст по его Id","type":"blockquote","key":"ec58u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ctx = canvas.getContext(\"2d\"); // определяем рисунок как двухмерный","type":"blockquote","key":"essal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function setPixel (x,y,c) // Функция устанавливает пиксель с координатой (x, y) с цветом c","type":"blockquote","key":"9djk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"9t9c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var index = 4*(x + canvas.width*y); // Определим и зададим значение переменной index","type":"blockquote","key":"8v1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"imgData.data[index + 0]=c.r; // устанавливает значение красного цвета","type":"blockquote","key":"fi582"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"imgData.data[index + 1]=c.g; // устанавливает значение зеленого цвета","type":"blockquote","key":"14hj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"imgData.data[index + 2]=c.b; // устанавливает значение синего цвета","type":"blockquote","key":"4qg7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"imgData.data[index + 3]=c.a; // устанавливает значение прозрачности","type":"blockquote","key":"7p0hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"dpdan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function draw() // Функция рисования","type":"blockquote","key":"9le9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"7p0ck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"imgData = ctx.createImageData(800, 800); //создадим новый объект ImageData. Пиксели прозрачного цвета","type":"blockquote","key":"dcchq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ctx.putImageData(imgData, 0, 0); // помещает данные объекта ImageData на холст","type":"blockquote","key":"56ukv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var iterationCount = 500000; // количество итераций","type":"blockquote","key":"7kujj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var p, oldx;","type":"blockquote","key":"1c6v2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var r = 60; // коэффициент размера","type":"blockquote","key":"2js1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//зададим начальные координаты","type":"blockquote","key":"8lro5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x = 1.0;","type":"blockquote","key":"fg560"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"y = 0.0;","type":"blockquote","key":"8f1df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"while(iterationCount > 0) // Цикл пока iterationCount > 0","type":"blockquote","key":"ag8ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"3sdg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p = Math.random(); // генерируем случайное число от 0 до 1 (вероятность)","type":"blockquote","key":"89pnm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"oldx = x; // запоминаем старое значение х","type":"blockquote","key":"172v1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if(p <= 0.85) // верхняя часть, вероятность 85%","type":"blockquote","key":"1nb8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"5g64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x = 0.85 * x + 0.04 * y;","type":"blockquote","key":"pg8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"y = -0.04 * oldx + 0.85 * y + 1.6;","type":"blockquote","key":"fd9g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"c1ae0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else","type":"blockquote","key":"3pjfm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"13sv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if(p <= 0.92) // левый лист, вероятность 7% (92-85)","type":"blockquote","key":"91t1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"irsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x = 0.2 * x - 0.26 * y;","type":"blockquote","key":"3mtmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"y = 0.23 * oldx + 0.22 * y + 1.6;","type":"blockquote","key":"fhgpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"2401b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else if(p <= 0.99) // правый лист, вероятность 7% (99-92)","type":"blockquote","key":"1uu77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"6hju6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x = -0.15 * x + 0.28 * y;","type":"blockquote","key":"2u20o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"y = 0.26 * oldx + 0.24 * y + 0.44;","type":"blockquote","key":"78kik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"85kap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else // стебель, вероятность 1% (100-99)","type":"blockquote","key":"32nl1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"blockquote","key":"44ht7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x = 0.0;","type":"blockquote","key":"6d796"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"y = 0.16 * y;","type":"blockquote","key":"f2ju7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8agma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ichg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// ставим пиксель, сдвигаем его в центр","type":"blockquote","key":"c4vmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setPixel(400 + Math.round(r * x), 600 - Math.round(r * y), color); // вызов функции setPixel()","type":"blockquote","key":"4kam9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"iterationCount--; //Вычитаем единицу из значения счетчика iterationCount","type":"blockquote","key":"5vail"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"26me0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ctx.putImageData(imgData, 0, 0); // помещает данные объекта ImageData на холст","type":"blockquote","key":"dpuft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"6ob6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраним код в файле main.js и пора посмотреть результат. Откроем в браузере index.html и нажмем на кнопку «Рисовать».","type":"unstyled","key":"11s1d"},{"data":{"image":{"id":"5fb12d9cb321633937564db5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний вид результата в браузере хром. ","type":"atomic:image","key":"7q9vb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если Вы видите такую страницу, то у нас все получилось и наш java Script работает. Если нет, то ищем ошибку. Используя комментарии в коде попробуйте поменять размер листа, цвет, и форму листьев.","type":"unstyled","key":"2q5t7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если Вам понравилась статья ставьте лайк и подписывайтесь на канал, впереди много интересного.","type":"unstyled","key":"4ugob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"YmufYElka3TpDf00EzPz"}],"entityMap":{"0":{"data":{"href":"https://notepad-plus-plus.org/downloads/","url":"https://notepad-plus-plus.org/downloads/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}