Danilov Andrew V.. Общие сведения. Персональная страница сотрудника КФУ. Казанский (Приволжский) федеральный университет.
Danilov Andrew V.

0. Введение в язык p5.js

0.1 Пару слов о языке

p5.js - это язык программирования, предназначенный для отрисовки графики в веб-среде.

Авторы языка позиционируют язык p5.js как "язык для дизайнеров, художников", и заявляют о низком пороге вхождения. Иначе говоря, для работы и создания материалов не обязательны навыки программирования.


0.2 Установка и первые шаги для работы с языком p5.js 

Для установки и работы в среде языка p5.js нет необходимости устанавливать платное программное обеспечение. Проект является открытым, распространяется бесплатно и приветсвует отзывы о функционале языка.

Для работы с языком желательно иметь следующее программное обеспечение: 

  1. Браузер (все примеры в пособии будут описаны с помощью браузера Google Chrome)

Сайт о языке p5.js находится по адресу: p5js.org

Для установки и работы с языком необходимо выполнить следующие шаги:

  1. Зайти на страницу загрузки языка: https://p5js.org/download/
  2. Загрузить пакет p5.js Complete
  3. На Ваш компьютер загрузится архив, который необходимо разархивировать на отдельное место на диске (рекомендую на рабочий стол)

Минимальный "плацдарм" для работы с языком p5.js готов (серьезно).


0.2.1 Расширенная подготовка к работе.

То, что Вы смогли установить минимальный набор для работы с языком не означает, что мы будем с ним работать. Дело, в том, что работа в таких условиях имеет свои трудности, и желательно установить еще несколько программ перед тем, как приступить к программированию.

Сперва, необходимо установить редактор кода. Редактор кода - специальный текстовый редактор, имеющий расширенные возможности для облегчения процесса написания кода для программ. Существует множество различных редакторов кода, большинство из них бесплатны. Мы будем использовать популярный редактор кода Atom.

Для установки редактора кода Atom необходимо:

  1. Зайти на страницу atom.io
  2. Нажать на кнопку 'Download'. Убедитесь, что сайт правильно определил разрядность вашей ОС.
  3. Загрузится файл-установщик, который необходимо запустить после загрузки.
  4. Установщик установит программу и автоматически запустит Atom.

Редактор кода готов к работе.

Теперь надо указать Атому, чтобы он работал с кодом p5.js. Для этого надо вспомнить, куда вы разархивировали пакет p5.js. 

Допустим, я разархировал пакет на рабочем столе. В таком случае у меня на рабочем столе должна появится папка с названием p5. Внутри папки есть несколько файлов и папок, о предназначении которых поговорим позже.

Итак, я знаю где у меня пакет с языком p5.js. В Атоме мне необходимо выбрать меню File-Open Folder, после чего указать папку с языком p5.js.

  1. В окне выбора нахожу Рабочий стол
  2. Выбираю папку p5
  3. Дальше выбираю еще раз вложенную папку p5
  4. Дальше выбираю вложенную папку empty-example
  5. В окне выбора нажимаю "Выбрать"

Если Вы все сделали правильно по представленному примеру, то слева, в окне появится окно, где отображается папка empty-example, и два файла, находящихся внутри папки: index.html и sketch.js.

Если все именно так, Вы готовы приступать к написанию Вашей Первой Программы.

 

Work address: 2 Tatarstan Str., Kazan, Building #33
Office number: 327
E-mail: tukai@yandex.ru
Google scholar: https://scholar.google.com/citations?hl=en&user=bzC4HHoAAAAJ
ResearchGate: https://www.researchgate.net/profile/Andrew_Danilov
Experience:
 11 years 3 months   from 02.09.2013
Scientific and pedagogical experience:
 11 years 3 months   from 02.09.2013
General experience:
 13 years 8 months   from 05.07.2010
Experience in KFU:
 5 years 6 months   from 02.09.2013