Учимся рисовать на компьютере кодом в P5JS

Учимся рисовать 
на компьютере кодом 
в P5JS

Руководство для начинающих 
программистов по рисованию, анимации, 
«генеративному арту» и интерактивным 
примерам на языке JavaScript

Андрей Розанов
Кирилл Жуков

Москва, 2023

УДК 004.42
ББК 32.372
Р64

Розанов А. Н., Жуков К. Л.
Р64    Учимся рисовать на компьютере кодом в P5JS. – М.: ДМК Пресс, 2023. – 

168 с.: ил. 

ISBN 978-5-93700-160-3

Цифровое творчество развивает личность, делает мир ярче, богаче и веселее. 
Многие современные художники создают свои картины с помощью компьютерных 
программ. В этой книге подробно показано, как школьник может освоить 
программирование на языке JavaScript и научиться создавать картины, 
персонажей и красивые пейзажи для собственной игры. Советы в конце книги 
помогают развивать «мышление в стиле компьютера» – ключевую компетенцию 
XXI века. 
Издание адресовано школьникам среднего и старшего возраста, будет полезно 
студентам и учителям, а также родителям, заботящимся о развитии 
своих детей.

УДК 004.42
ББК 32.372

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой 
бы то ни было форме и какими бы то ни было средствами без письменного разрешения 
владельцев авторских прав.

©  Розанов А. Н., Жуков К. Л., 2022
ISBN 978-5-93700-160-3 
©  Оформление, издание,  
ДМК Пресс, 2022

Содержание

От издательства ........................................................................................................5

К читателю ..................................................................................................................7

1. Знакомство со средой программирования P5JS ......................................9

2. Рисуем флаг России ..........................................................................................20

3. Рисуем солнце с помощью цикла FOR .......................................................29

4. Рисуем лоллипоп, или Как работать с цветом ........................................35

5. Картинки и анимация спрайтов ...................................................................43

6. Звёздная система и процедурный подход ...............................................54

7. Рисуем персонажей в 3D-графике ...............................................................65

8. Рисование сложных фигур с помощью циклов ......................................77

9. Советский истребитель МИГ-25, или Как загрузить готовый 
3D-объект из файла ...............................................................................................90

10. Генерация 3D-ландшафта ............................................................................95

11. Осеннее дерево Пифагора, или Как я перестал бояться  
и полюбил рекурсию ...........................................................................................108

12. Немного о «мышлении в стиле компьютера»,  
или Computational thinking ...............................................................................119

Вместо послесловия ............................................................................................126

Содержание

Справочник по командам * P5JS .....................................................................128
Общие команды .......................................................................................................128
frameRate – установка FPS ..................................................................................128
frameCount – кадров отрисовано .......................................................................129
width, height – ширина и высота холста ...........................................................129
saveCanvas – скачать изображение холста .......................................................129
text – вывод текста на экран ..............................................................................130
translate – смещение начала координат ...........................................................132
rotate – вращение начала координат ................................................................133
random – случайное число ..................................................................................134
noise – шум Перлина ...........................................................................................136
Работа с цветом ........................................................................................................138
colorMode – цветовая модель .............................................................................138
fill – цвет заливки.................................................................................................140
stroke – цвет карандаша ......................................................................................140
strokeWeight – толщина линии ..........................................................................141
background – заполнение холста ........................................................................142
lerpColor – оттенок между цветами ..................................................................143
2D-графика ................................................................................................................144
circle – окружность...............................................................................................144
ellipse – овал .........................................................................................................145
rect – прямоугольник ..........................................................................................146
square – квадрат ...................................................................................................147
quad – четырёхугольник .....................................................................................148
triangle – треугольник .........................................................................................149
line – линия ...........................................................................................................150
point – точка ..........................................................................................................151
arc – дуга ................................................................................................................152
vertex – вершина в фигуре ..................................................................................154
bezier – кривая Безье ...........................................................................................156
3D-графика ................................................................................................................157
rotateX, rotateY, rotateZ – вращение системы координат вокруг оси ...........157
box – куб ................................................................................................................158
sphere – сфера .......................................................................................................159
cylinder – цилиндр ...............................................................................................160
torus – бублик .......................................................................................................161
ellipsoid – эллипсоид ...........................................................................................162
cone – конус ..........................................................................................................163
orbitControl – осмотр сцены ...............................................................................164
loadModel – загрузка модели из файла .............................................................165
Контакты с авторами ..........................................................................................167

От издательства

Отзывы и пожелания

Мы всегда рады отзывам наших читателей. Расскажите нам, что 
вы ду маете об этой книге – что понравилось или, может быть, 
не понравилось. Отзывы важны для нас, чтобы выпускать книги, 
которые будут для вас максимально полезны.
Вы можете написать отзыв на нашем сайте www.dmkpress.com, 
зайдя на страницу книги и оставив комментарий в разделе «Отзывы 
и рецензии». Также можно послать письмо главному редактору 
по адресу dmkpress@gmail.com; при этом укажите название 
книги в теме письма. 
Если вы являетесь экспертом в какой-либо области и заинтересованы 
в написании новой книги, заполните форму на нашем 
сайте по адресу http://dmkpress.com/authors/publish_book/ или напишите 
в издательство по адресу dmkpress@gmail.com.

Список опечаток

Хотя мы приняли все возможные меры для того, чтобы обеспечить 
высокое качество наших текстов, ошибки всё равно случаются. 
Если вы найдёте ошибку в одной из наших книг, мы будем 
очень благодарны, если вы сообщите о ней главному редактору 
по адресу dmkpress@gmail.com. Сделав это, вы избавите других 
читателей от недопонимания и поможете нам улучшить последующие 
издания этой книги. 

От издательства

Нарушение авторских прав

Пиратство в интернете по-прежнему остаётся насущной проблемой. 
Издательство «ДМК Пресс» серьёзно относится к вопросам 
защиты авторских прав и лицензирования. Если вы столкнетесь 
в интернете с незаконной публикацией какой-либо из наших книг, 
пожалуйста, пришлите нам ссылку на интернет-ресурс, чтобы мы 
могли применить санкции.
Ссылку на подозрительные материалы можно прислать по 
адресу элект ронной почты dmkpress@gmail.com.
Мы высоко ценим любую помощь по защите наших авторов, 
благодаря которой мы можем предоставлять вам качественные 
материалы.

К читателю

Спасибо моему другу и вдохновителю 
Жукову Кириллу Леонидовичу. 

Спасибо педагогам, благодаря которым  
образование детей стало очень увлекательным:
Даниэлю Шиффману, Митчелу Резнику, Натали Раск,  
а также Сеймуру Пайперту за его «Черепашку»

Эта книга посвящена информатике, а точнее одному из её разделов – 
программированию графики, наверное, самому интересному 
и увлекательному делу.
Перед людьми, заинтересованными в изучении программирования, 
встаёт задача выбора языка. Языки программирования 
требуют от программиста различного уровня внимания к деталям 
при реализации алгоритма. В зависимости от области 
применения и поставленных задач подбирается подходящий 
язык программирования: удобный и простой. Правильный выбор 
языка сэкономит время и увеличит производительность. 
Каждый день не только совершенствуются старые языки, но 
и разрабатываются новые, поэтому выбор для изучения велик. 
Изучение языков программирования открывает новые возможности 
и перспективы для каждого человека. Развитие навыков 
поможет найти работу мечты в каждой стране мира или же работать 
удалённо. 
Мы описали методы создания графики на компьютере с помощью 
популярного языка программирования JavaScript. А что-

К читателю

бы читателю было проще пользоваться книгой, все исходники 
программ расположены в облаке на популярной платформе P5JS 
по адресу https://p5js.org.
Также все материалы из книги можно найти на странице 
в соцсети «ВКонтакте»: https://vk.com/itkvant.
Цель авторов – увлечь читателя интересными и яркими примерами 
программ, развить такой важный аспект жизни современного 
человека, как computational thinking (мышление в стиле 
компьютера, или вычислительное мышление). Это подобие 
алгоритмического мышления из предмета информатики, однако 
применяется не только в программировании, но и в обыденной 
жизни. 
Россия всегда славилась своими учёными и инженерами, пришло 
твоё время, дорогой читатель!

Знакомство со средой 
программирования P5JS

Родоначальником среды P5JS является среда Processing, которая 
в 2022 году вышла в 4-й версии.

Среда обладает большим набором команд, а для программирования 
используется популярный язык программирования 
JavaScript. Таким образом, программист одновременно учится 
рисовать линии, круги, прямоугольники и осваивает правила 
написания команд языка JavaScript. Такие правила называют 
синтаксисом языка программирования. Сами программы, написанные 
в среде, называют скетчами, от слова sketch – набросок, 
эскиз.
Для начала знакомства перейдём на сайт среды по адресу: 

https://p5js.org/.

Глава 1

Рис. 1. Главная страница среды P5JS

Сайт выполнен в стиле «минимализма», чтобы учиться было 
удобно на любом устройстве. На данный момент нет официальной 
поддержки русского языка, но можно воспользоваться 
онлайн-переводом, чтобы прочитать вводное слово на главной 
страничке.
Мы для учёбы в основном будем использовать редактор (Edi-
tor) и раздел справки (Reference), но начать изучать сайт хочется 
с раздела примеров (Examples).
Перейдите по ссылке https://p5js.org/examples/.

Знакомство со средой программирования P5JS 11

Рис. 2. Страница с примерами программ

Для каждой возможности и команды языка есть пример, наглядно 
поясняющий принцип работы. Все примеры объединены 
в блоки, например блок Simulate (Симуляция). В нем можно 
найти известную программу «клеточный автомат» Game of Life 
(«Игра “Жизнь”»), которая некогда наглядно продемонстрировала 
учёным, что жизнь во Вселенной может подчиняться вполне 
понятным и простым законам. Внимательно посмотрите на 
рис. 2, найдите пункт Game of Life и откройте программу, или 
просто перейдите по ссылке https://p5js.org/examples/simulate-
game-of-life.html.

Глава 1

Рис. 3. Пример «Игры “Жизнь”»

Скопируйте программный код этого примера в буфер обмена. 
Это можно сделать с помощью кнопки copy (копировать) 
на рис. 3 справа или выделив весь текст и нажав одновременно 
сочетание клавиш Ctrl+C.
С главной странички сайта можно войти в редактор Editor: 

https://editor.p5js.org.