Оглавление
1. К читателю.
2. Знакомство со средой программирования P5JS.
3. Рисуем флаг России.
4. Рисуем Лоллипоп или как работать с цветом.
5. Картинки и анимация спрайтов.
6. Звездная система и процедурный подход.
7. Рисуем персонажей в 3D графике.
8. Осеннее дерево Пифагора или как я перестал бояться и полюбил рекурсию.
9. Справочник по командам P5JS.
10. Приложение 1. Полный расцвет
К читателю
Этакнига посвящена информатике, а точнее одному из её разделов - программированию, наверное, самому интересному и увлекательному делу.
Сегодня программирование настолько глубоко вошло в наш быт, что мы перестали замечать, как изменилась жизнь. Многие привычные вещи не существовали бы без программирования или были бы гораздо менее удобными в использовании.
Перед людьми, заинтересованными в изучении программирования, встаёт задача выбора языка. Языки программирования требуют от программиста различного уровня внимания к деталям при реализации алгоритма. В зависимости от области применения и поставленных задач, подбирается подходящий язык программирования: удобный и простой. Правильный выбор языка сэкономит время и увеличит производительность.Каждый день не только совершенствуются старые языки, но и разрабатываются новые, поэтому выбор для изучения велик. Изучение языков программирования открывает новые возможности и перспективы для каждого человека. Развитие навыков поможет найти работу мечты в каждой стране мира или же работать удалённо.
Мы описали методы создания графики на компьютере с помощью популярного языка программирования JavaScript. А чтобы читателю было проще пользоваться книгой, все исходники программ расположены в облаке на популярной платформе P5JS. (https://p5js.org/)
Цель авторов - увлечь читателя интересными и яркими примерами программ, развить такой важный аспект жизни современного человека, как "computational thinking" (мышление в стиле компьютера). Это подобие алгоритмического мышления из предмета информатики, но применяется не только в программировании, но и в обыденной жизни. Например, решая проблему, мы учимся строить гипотезы, разбивать сложную задачу на более простые, при этом абстрагироваться от несущественных деталей и применять алгоритмы.
Россия всегда славилась своими учеными и инженерами, пришло твое время, дорогой Читатель!
Знакомство со средой программирования P5JS
Родоначальником среды P5JS является среда Processing, которая в 2022 году вышла в 4 версии. Среда обладает большим набором команд, а для программирования используется популярный язык программирования JavaScript. Таким образом, программист одновременно учится рисовать линии, круги, прямоугольники и осваивает правила написания команд языка JavaScript. Такие правила называют синтаксисом языка программирования. Сами программы, написанные в среде, называют скретчами, от слова Sketch - набросок, эскиз.
Дня начала знакомства перейдем на сайт среды по адресу: https://p5js.org/
Рис. 1. Главная страница среды P5JS.
Сайт выполнен в "стиле минимализма", чтобы учиться было удобно на любом устройстве. На данный момент нет официальной поддержки русского языка, но можно воспользоваться техническим переводом, чтобы прочитать вводное слово на главной страничке.
Мы для учебы в основном будем использовать редактор "Editor" и раздел справки "Reference", но начать изучать сайт хочется с раздела примеров "Examples".
Перейдите по ссылке https://p5js.org/examples/.
Рис. 2. Страница с примерами программ.
Для каждой возможности и команды языка есть пример, наглядно поясняющий принцип работы. Все примеры объединены в блоки, например блок "Симуляция" (Simulate). В нем можно найти известную программу клеточный-автомат "Игра Жизнь" (Game of Life), которая некогда наглядно продемонстрировала ученым, что жизнь во вселенной может подчиняться вполне понятным и простым законам.Внимательно посмотрите на рис.2, найдите пункт «GameofLife»и откройте программу или просто перейдите по ссылке:
https://p5js.org/examples/simulate-game-of-life.html
Рис. 3. Пример «Игры Жизнь».
Скопируйте текст этого примера в "буфер обмена". Это можно сделать с помощью небольшой кнопки "copy" (на рис. 3 справа) или выделив весь текст и нажав одновременно клавиши Ctrl + C.
С главной странички сайта можно войти в редактор "Editor"https://editor.p5js.org/
Рис. 4. Окно редактора и стартовый шаблон программы.
Вы увидите стартовый шаблон с короткой программой как на рис.4.Удалитевесь текст стартового шаблона и вставьте текст программы "Игра Жизнь" из буфера обмена нажав Ctrl + V.
Запустите программу с помощью красной кнопки с треугольником. Такие кнопки по привычке называют «кнопкой Play», т.е. «кнопка Играй». И действительно, игра «Жизнь» запустится.Можно остановить программу соседней кнопкой с квадратом внутри. Попробуйте изменить параметр w = 20 в строке №9 на большее и меньшее числа и полюбуйтесь игрой клеток.
Рис. 5. «Игра Жизнь» в работе.
Чтобы сохранить программу в облаке необходимо авторизоваться или зарегистрироваться на сайте в правом углу удобным способом.
За кнопкой с шестеренкой спрятаны настройки, которые помогают настроить наиболее удобный режим отображения странички. Можно увеличить или уменьшить шрифт, добавить опции. Можно переключить тему на "темную" для ночной работы и на «светлую», когда работаете в освещенном помещении или днем.Всегда старайтесь настроить среду под освещение и размер экрана, сделайте шрифт крупнее. Это сохранит Ваше здоровье и уменьшит усталость.
Рис. 6. «Темная тема» предназначена для работы в темном окружении, в основном вечером и ночью.
Сохранить программу можно через верхнее меню "File" -> "Save". Но прежде желательно дать программе понятное имя, для этого нажмите на карандаш.
Рис. 7. Сохраните программу с вашим названием.
Предупреждение!!!
Старайтесь сохранять программу перед стартом, ведь она может работать неправильно и "подвесить" страницу браузера. Тогда набранный текст программы пропадет и его придется набирать заново.
Теперь нажмите на треугольник в правом углу и перейдите в меню "My Sketches", там вы и найдете сохраненную программу.
Рис. 8. Место хранения ваших программ.
На моей памяти есть примечательный случай.
Один мой знакомый, очень уважаемый мной инженер, как-то позвонил. Тогда ему было 12 лет. Он сказал по телефону, что его компьютер завис и он не знает, что делать. Перепробовав все возможности вывести компьютер из "зависания" я предложил ему нажать и подержать кнопку включения 7 секунд. Он сказал, что экран погас и снова включил компьютер.
К его изумлению, на экране появился пустой рабочий стол и тогда он спросил меня:«а как же игра, которую я делал?» Я переспросил: «ты сказал игра? Ты знаешь, как делать игры?» Виталий, так звали мальчика, сказал, что делает игру «Пять ночей с Фредди».
И тогда я поинтересовался на каком языке он пишет игру. К моему изумлению он ответил, что еще не знает языков программирования. «Но, тогда как же ты делаешь игру?» - не выдержал я. Виталий ответил, что делает её в программе Power Point. Оказалось, что для каждой игровой ситуации он создал отдельный слайд презентации с переходами между ними с помощью кликов мышью. Его игра состояла из более чем 400 слайдов!!!
Проблема была в том, что он начал делать игру даже не думая сохранить файл презентации. Я был потрясён. На следующий день я был потрясён окончательно, тем, что Виталий без долгих раздумий взял и написал игру с начала, но теперь уже оптимизировал количество слайдов до около 200.
Надеюсь, этот пример из моей жизни всплывет в вашей памяти, когда вы впервые напишите бесконечный цикл не сохранив текст программы. Как и то, что это вас не остановит, как истинно творческого человека не останавливают тягости и невзгоды. А уж в жизни любого программиста их бывает навалом.
В завершении этого ознакомительного путешествия по сайту хочется отдельно выделить одну важную возможность. В жизни любого человека важно уметь "делиться" своим опытом. Например, вы можете поделиться с друзьями и другими программистами своей программой. Кнопка находится в верхнем меню "File" -> "Share" и доступна после авторизации.
Рис. 9. Кнопка «Share»позволяет делиться исходным кодом или демонстрацией программы.
Отправьте ссылку своим друзьям и спросите, что они думают о среде P5JS. Кстати, скетч на рисунке сделал мой ученик, школьник Костя, когда я поделился с ним моей версией. Теперь вы можете открыть этот пример по ссылке:
https://editor.p5js.org/arossoft/sketches/ohLwd4Iv3
Хочу пожелать вам успехов в изучении программирования и предлагаю написать свою первую программу на JavaScriptв среде P5JS.
Рисуем флаг России
Для работы с графикой на уроках информатики разработана замечательная коллекция примеров программ на сайте P5JS.org. Главное её преимущество, это возможность запускать программы онлайн и хранить их в облаке. Это открывает большие возможности для дистанционного использования. В качестве языка программирования используется JavaScript, а для большей скорости написания программ создана система команд с хорошей документацией на нескольких языках мира. Среди языков отсутствует русский, но это не мешает её использованию на урокахв школе, занятиях в кружках или самостоятельному изучению дома, сидя в транспорте.
Рис. 1. Флаг России нарисованный в P5JS.
Многие начинающие программисты сделали свои первые шаги в программирование через графику с помощью простых примеров, например, рисовали флаги своих стран. Российский флаг рисуется очень просто, для этого достаточно нарисовать 3 цветных прямоугольника. Давайте добавим движения, пусть флаг развевается на ветру.
Для этого переходим на сайт в раздел редактора «EDIT». (https://editor.p5js.org/)
Наберите листинг программы вместо строк стартового шаблона.
| function setup() { // функция настройки L = 400; // размер флага createCanvas(400, 400); // размер окна } functiondraw() { // функция рисования x = 50; background(220); // серыйфон while (x<L) { // цикл «пока» y = 25 * sin((x + frameCount) / 45); stroke(255); // белый line(x, 100+y, x, 150+y); stroke(0, 0, 255); // синий line(x, 151+y, x, 201+y); stroke(255, 0, 0); // красный line(x, 202+y, x, 252+y); x++; } } |
Программа состоит из 2 блоков:
· функция настройки (setup);
· функция рисования (draw).
Если ваша программа не содержит анимацию и не меняет картинку на экране, тогда вполне можно обойтись одним блоком «setup». Но большинство примеров в книге будут динамическими (т.е. с изменяющейся картинкой) и для них потребуется функция «draw», которая будет вызываться до 60 раз в секунду. Её задача – плавная перерисовка изменений на холсте (области рисования на экране).
Пока мы создаем 2D графику, нам достаточно вызвать функцию создания (create) холста (Canvas) и указать размеры графического окна в пикселях. Точки на экране называются пикселями.
| createCanvas(400, 400); |
Этой командой мы сообщаем компьютеру, что хотим создать окно размером 400пикселей в ширину и400 пикселей в высоту. А если твой монитор формата 4K, какие ширину и высоту в пикселях можно написать в программе?
Программы сохраняют в памяти компьютера разные величины, для этого используются так называемые «переменные». Каждой переменной программист дает уникальное имя. Оно может отражать некоторый смысл или просто взято с потолка. В нашем примере переменная «Х» названа не случайно, она обозначает смещение флага по оси X, т.е. по горизонтали на холсте.
| x = 50; |
Таким образом, рисование флага начнется с отступом от левого края холста в 50 пикселей.
За очистку экрана и заливку фона цветом отвечает следующая команда:
| background(220); |
Здесь серый цвет задается числом 220, что соответствует градации одного из 253 оттенков серого. Белый цвет можно задать числом 255, а черный – 0.
Наш флаг будет состоять из отдельных вертикальных линий. Чтобы нарисовать их все мы используем цикл «пока».
Как работает цикл “while” (в информатике «пока»)
|
| while (x < L) { |
Цикл будет выполнять команды «тела цикла», пока верно условие в круглых скобках. В нашем случае, цикл будет выполнять команды в фигурных скобках, пока «х» не вырастет до величины «L» (от 50 до 400). Зоркий глаз хакера заметит, что само число 400 не войдет в этот диапазон.
Если ты не успел познакомиться с тригонометрией в школе, не беда. Эта строчка вычисляет изгиб флага с помощью математики.
| y = 25 * sin((x + frameCount) / 45); |
Попробуй заменить числа 25 и 45 на другие и поймешь, для чего программисты вводят в формулы коэффициенты.
Чтобы задать цвет полос флага применяется команда «stroke». Это может быть значение в диапазоне 0-255 для обозначения яркости. Но если вы хотите задать один из цветов радуги, тогда нужно написать его код в формате RGB.
Пример для рисования радуги
|
| stroke(255); // белый stroke(0, 0, 255); // синий stroke(255, 0, 0); // красный |
Три числа в скобках задают яркость компонентов цвета, соответственно: R ed – красный, G reen – зеленый, B lue – синий. Цвет линий (обводки) задается командой «stroke», а цвет «заливки» фигур, командой «fill».
Чтобы нарисовать на экране линию из одной точки в другую, нужно воспользоваться командой «line». Координаты точек на экране задаются двумя парами (x1,y1,x2, y2). Хотите знать больше, ищите описание команды «line» в справочнике, во второй части книги в разделе 2Dграфика.
| line(x, 100+y, x, 150+y); |
Чтобы нарисовать полосу другого цвета ниже достаточно добавить смещение по координате «y».
Если мы не изменим переменную «x» в конце тела цикла, то он, как говорят некоторые программисты, «зациклится» и программа зависнет. Правильно говорить, что цикл станет бесконечным. Скорее всего,зависнет и вкладка браузера. Увеличим переменную «x» на 1 с помощью операции «++».
| x++; |
Программа завершается фигурной скобкой.Постарайтесь ответить, для чего она нужна?
| } |
Маленькая подсказка: кол-во открытых и закрытых скобок всегда должно быть равно.
Рабочая версия программы доступна по адресу: https://editor.p5js.org/arossoft/sketches/o50bLSZXU
P.S. Один из наших учеников предложил интересный эффект тени. Костя добавил в команды «stroke» смещение с помощью переменной «y».
| stroke(255 - y*2); // белый stroke(0, 0, 255 - y*2); // синий stroke(255 - y*2, 0, 0);// красный |
Чем ниже находится вертикальная линия на флаге, тем она темнее.
Задания для самопроверки:
1. Нарисуй флаг другой страны;
2. Нарисуй флаги нескольких стран на одном экране один за другим.
Челлендж- «Тебе слабо это сделать?». Измени программу, чтобы вместо флага получилось море.
Продвинутый пример флага:
https://editor.p5js.org/arossoft/sketches/Z44fOVB2Q