1. Первая программа на языке p5.js

1.0 Введение  p5.js

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

Но сейчас не об этом. Я предлагаю Вам на собственном опыте почувствовать, как пишутся программы на p5.js, и как можно увидеть результат.

1.0 Структура программы  p5.js

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

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

• Файл index.html - веб страница, на которой выполняется код, написанный на языке p5.js. На этапе обученияне рекомендуется изменять данный файл без нужды .
• Файл sketch.js - код программы. Это и есть файл, с которым мы проведем большую часть курса.

Самая простая программа уже записана и даже можно просмотреть результаты выполнения работы данной программы. Для этого откройте файл index.html с помощью браузера.

Вы увидете пустую веб-страницу. Не волнуйтесь, все работает правильно. Просто сейчас выполняется программа, которая ничего не делает.

Чтобы посмотреть код данной программы, вернитесь в редактор Атом, и в меню слева откройте файл sketch.js. 

Вы увидете следующий код:

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
}

Именно здесь необходимо вносить изменения в код.

2. Моя Первая Программа

Напишем собственный код и посмотрим на результат.

В качестве задания предлагается нарисовать круг на веб-странице. Имейте ввиду, что о предназначении элементов в коде будем говорить позже.

Приступим.

Обращаем внимание на первую часть конструкции:

function setup() {
  // put setup code here
}

Строка, начинающаяся с двух слешей (//), называется комментарием. В комментариях пишут пояснения о тех или иных участках кода. На выполнение программы они не влияют. Удалим его.

Теперь, внутри двух фугурных скобок {} запишем команды:

createCanvas(200,300)

background(255,0,0)

Слегка опишем эти команды:

• createCanvas(200,300) создает рабочую область (т.н. холст), на котором будет производится отрисовка элементов. У команды указываются два обязательных параметра, записываемые в скобках  -  ширина и высота области (в пикселях). То есть, мы даем команду создать рабочую область площадью 200 на 300 пикселей.
• background(255,0,0) окрашивает фон в указанный цвет (аналог заливки). У команды разнообразный набор параметров. В данном случае мы указываем RGB-код цвета (каждая компонента пишется через запятую), которым мы хотим "залить" наш фон.

Сохраните написанный код, нажав комбинацию клавиш Ctrl-S. Теперь перейдите в браузер и обновите страницу index.html.

Если все правильно сделали, результат будет следующим:

Уже кое-что есть!

Добавим на рабочую область круг.

Для этого добавим еще одну команду:

ellipse(50,60,70)

Нетрудно понять, что команда добавит эллипс. Список параметров :

• первые два числа указывают координаты центральную точку эллипса, то есть в примере мы ставим эллипс, центром которого будет  50 пикселей по горизонтали и 60 по вертикали
• следующее число указывает на ширину эллипса. В нашем примере ширина эллипса равняется 70 пикселям.
• Четвертое число указывает на высоту эллипса. Если не указывать данный параметр (к в примере), высота будет равна ширине. Иначе говоря, без указания данного параметра мы получим круг.

Опять, сохраним код комбинацией Ctrl-S, перейдем в браузер и обновим страницу:

Если все заработало правильно, вы получите результат как на рисунке сверху.

Поздравляю - Вы написали Вашу Первую Программу на языке p5.js.