JavaScript:Библиотеки/p5.js/С чего начать

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


С чего начать[1]

Это руководство проведет вас через настройку проекта p5.js и создание вашего первого скетча. Если вы хотите начать с использования нового веб-редактора p5.js, можете сразу перейти к разделу «Ваш первый скетч».

Загрузка и настройка файла

Самый простой способ начать – это воспользоваться пустым шаблоном, который есть в комплекте «p5.js complete».

Если взглянуть в файл «index.html», можно обнаружить ссылки на файл «p5.js». Если вы предпочитаете использовать минимизированную версию (т.е. сжатую версию, в которой страницы загружаются быстрее) библиотеки, поменяйте ссылку на «p5.min.js».

<script src="../p5.min.js"></script>

Кроме того, вы можете сделать ссылку на файл «p5.js», расположенный онлайн. Все версии p5.js хранятся в CDN (сокр. от «content delivery network», что можно перевести как «сеть доставки (и дистрибуции) контента»). Историю версий библиотеки можно посмотреть тут. В этом случае ссылку можно поменять на...

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

Таким образом, шаблон HTML-страницы может выглядеть примерно так:

1 <html>
2   <head>
3     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
4     <script src="sketch.js"></script>
5   </head>
6   <body>
7   </body>
8 </html>

Кроме того, можно начать с использования шаблона с codepen.

Среда разработки

Для разработки скетчей с помощью библиотеки p5.js можно использовать разные IDE. Далее в этой статье описываются инструкции по настройке p5.js в среде разработки Sublime Text 2, но есть и другие хорошие IDE – Brackets, Atom и OpenProcessing. Если вы используете скринридеры, но предпочитаете не использовать веб-редактор p5, советуем обратить внимание на Notepad++ и Eclipse.

Откройте Sublime. Перейдите в меню File и кликните на Open..., а затем выберите папку, в которой расположены ваши файлы с расширением «*.html» и «*.js». В верхней части левой боковой панели вы увидите название папки, а ниже будет список файлов, находящихся в этой папке.

Кликните по файлу «sketch.js». После этого он должен открыться в правой части программы, где его также можно редактировать.

P5js js sublime2 1.png

Откройте в браузере файл «index.html», дважды кликнув по нему, или впишите в адресной строке браузера путь к нему (он будет выглядеть примерно так: file:///путь/к/вашему/html), а потом нажмите Enter.

Ваш первый скетч

Пользователи Processing сначала могут ознакомиться с руководством по конвертации скетчей Processing в скетчи p5.js.

Впишите в редакторе следующее:

1 function setup() {
2 
3 }
4 
5 function draw() {
6   ellipse(50, 50, 80, 80);
7 }

Этот код означает «нарисовать эллипс, центр которого будет находиться в 50 пикселях от левого края экрана и 50 пикселях от верхнего края экрана, а ширина и высота которого будут составлять 80 пикселей».

Сохраните скетч и обновите в браузере страницу просмотра. Если вы все написали правильно, на экране должно появиться примерно следующее:

P5js js first-sketch 2.png

Примечание: Если вы используете скринридер, то вам нужно включить в онлайн-редакторе p5 функцию вывода данных для людей с ограниченными возможностями, но также добавить в HTML соответствующую библиотеку. Руководство по использованию p5 со скринридером смотрите тут, а статью о библиотеке с функциями для людей с ограниченными возможностями читайте тут.

Если код написан неправильно, то на экране может ничего не появиться. Если так и произошло, лучше скопируйте код и вставьте его в окно редактора. Числа должны быть помещены в скобки, и, кроме того, между всеми числами должны стоять запятые, а каждая строчка должна заканчиваться точкой с запятой. Одна из самых сложных вещей в начале изучения программирования – это аккуратность при соблюдении правил синтаксиса. Браузер не всегда достаточно умен, чтобы понять, что именно вы имеете в виду, и также может быть очень привередлив к пунктуации. Вы к этому привыкните, просто нужно немного практики. В зависимости от используемого браузера вы также будете видеть ошибки в «консоли» JavaScript. Например, в Chrome она открывается, если кликнуть на три точки в правом верхнем углу браузера, а затем на «Дополнительные инструменты» > «Инструменты разработчика» > вкладка Console. Теперь давайте попробуем более сложный и интересный скетч. Удалите код предыдущего скетча-примера и впишите в редактор следующее:

 1 function setup() {
 2   createCanvas(640, 480);
 3 }
 4 
 5 function draw() {
 6   if (mouseIsPressed) {
 7     fill(0);
 8   } else {
 9     fill(255);
10   }
11   ellipse(mouseX, mouseY, 80, 80);
12 }

Эта программа создает окно шириной 640 пикселей и высотой 480 пикселей, а затем начинает рисовать белые круги – в месте, где в данный момент находится курсор мышки. Если при этом также нажать на кнопку мышки, круг окрасится в черный цвет. Более подробно об элементах этого скетча мы расскажем позднее. Сейчас просто попробуйте запустить код, подвигать мышкой и понажимать на кнопки, чтобы понять, что делает эта программа.

P5js js first-sketch2 3.png

Что дальше?

  • Советуем ознакомиться с руководством по преобразованию скетчей Processing в скетчи p5.js, в котором также объясняется, в чем их главные отличия.
  • Справочник по функциям, классам и другими элементам библиотеки p5.js смотрите тут.
  • Руководства и скетчи-примеры, объясняющие разные функции p5.js, смотрите тут и тут.
  • Если вы планируете использовать p5.js вместе со скринридером, то соответствующее руководство можно найти тут.

См.также

Внешние ссылки