Руководство к "Hello Processing"

Главная задача этого самоучителя дать читателю первый опыт программирования на примере визуальных образов, так чтобы заинтересовать его и вдохновить на дальнейшее изучение программирования. Самоучитель сделан так, чтобы каждый мог использовать его по своему усмотрению. Также им можно пользоваться в рамках учебных классов. Весь набор уроков занимает примерно час. Каждая секция это небольшой вступление, после которого нужно писать и изменять код программ. Экран делится на три области: видео, редактор кода и окно для отображения.

Основной материал для каждого раздела описан ниже. Если вы хотите обсудить материал или что-то спросить пожалуйста пользуйтесь форумом Processing.

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

2. Фигуры
Простейшие фигуры рисуются на экране с помощью функций ellipse() и rect(). Их параметры определяют расположение и размер этих фигур в рамках системы координат.

3. Цвет
Фигуры приобретают свой цвет благодаря функциям fill() и stroke(). Три параметра для каждой из этих функций определяют сколько красного, зеленого и синего света использовать для заливки и обводки фигур. Значения этих параметров меняется от 0 (0%) до 255 (100%) для каждой компоненты. Например, запись fill(0, 0, 255) задает цвет, в котором 0% красного, 0% зеленого и 100% синего. В редакторе можно кликнуть на названия функций fill() и stroke() чтобы открыть панель выбора цвета.

4. Взаимодействие
В отличие от предыдущих примеров, которые просто исполнялись один раз, а затем останавливались, код в этом разделе исполняется постоянно. Функцииsetup() и draw() сделаны специально для того чтобы создать непрерывное исполнение. Позиция курсора мыши на экране можно использовать чтобы задать новое место расположения для круга или квадарата. В программе координата курсора по оси X передается в переменную mouseX, а по оси Y в mouseY. Эти данные затем используются в качестве места расположения для фигур на экране. Поэтому фигуры начинают двигаться вметсе с курсором.

5. Условия
Прикосновение к экрану или клик мыши могут определять что именно делает код. Например, будет ли цвет зеленым или синим, будет ли нарисован круг или квадарт. Программа как бы задает вопросы с помощью сравненительных выражений и если ответ истина, выполняет соответствующий блок кода (строки между фигурными кавычками { и }).

6. Прощай
Поздравляем! Уроки закончены. Здесь участники могут поделиться своими работами в интернете.

Дальнейшее обучение

Чтобы познакомится ближе с программированием и Processing'ом мы советуем следующие сайты:

Краткая справка (в порядке упоминания функций)

rect(a, b, c, d)
Рисует прямоугольник с заданными параметрами:
a — X (горизонтальная) координата верхного левого угла фигуры
b — Y (вертикальная) координата верхного левого угла фигуры
c — ширина
d — высота фигуры

ellipse(a, b, c, d)
Рисует окружность с заданными параметрами:
a — X (горизонтальная) координата верхного левого угла фигуры
b — Y (вертикальная) координата верхного левого угла фигуры
c — ширина
d — высота фигуры

fill(r, g, b)
Задает цвет для внутренней заливки с заданными параметрами:
r — величина красной компоненты, от 0 (нет) до 255 (максимум)
g — величина зеленой компоненты, от 0 (нет) до 255 (максимум)
b — величина синей компоненты, от 0 (нет) до 255 (максимум)

stroke(r, g, b)
Задает цвет для обводки с заданными параметрами:
r — величина красной компоненты, от 0 (нет) до 255 (максимум)
g — величина зеленой компоненты, от 0 (нет) до 255 (максимум)
b — величина синей компоненты, от 0 (нет) до 255 (максимум)

background(r, g, b)
Заивает весь экран сплошным цветом. Параметры:
r — величина красной компоненты, от 0 (нет) до 255 (максимум)
g — величина зеленой компоненты, от 0 (нет) до 255 (максимум)
b — величина синей компоненты, от 0 (нет) до 255 (максимум)

setup()
Код внутри блока setup() выполняется один раз сразу после ззапуска программы.

draw()
Код внутри блока draw() выполняется постоянно до тех пор пока октрыта программа.

void
Это слово должно быть обязательно написано перед setup() и draw(). Оно обозначает, что функции setup() и draw() "не возвращают значение".

mouseX
В этой переменной хранится координата X курсора мыши.

mouseY
В этой переменной хранится координата Y курсора мыши.

mousePressed
Эта переменная принимает значение true (истина) если кнопка мыши нажата и принимает значение false (ложь) если не нажата.

if
Конструкция if позволяет программе принимать решение нужно ли выполнять код внутри следующего блока. Когда сравнение связанное с if верно, строки внутри фигурных кавычек { и } будут выполнены.

Словарь

блок
Несколько строк кода обрамленных фигурными скобками { и }.

система координат
Система координат задает позицию объекта на экране. В Processing начальная точка системы координат (0,0) расположена в верхнем левом углу, ось Х направлена вправо, а ось Y направлена вниз. Для задания позиции используются количество пикселей. Например, точка (100, 20) расположена в 100 пискелях влево от левого края и 20 пикселях вниз от верхнего края.

false (ложь)
Противоположно 'true'. Обозначает, что выражение является ложью. Например, сравнение 1 > 5 будет неверно, то есть ложь.

функция
Часть программы с каким-то конкреным назначением. Часто у функций есть параметры, которые определяют ее поведение. Например, функция rect() рисует прямоугольник на экране. Параметры для этой функции помещяются через запятую внутри круглых скобок. С помощью этих параметров задается позиция и размер прямоугольника. В других источниках функции могут называться методами, подпрограммами, командами или процедурами.

сравнение
Выражение записанное в коде, в котором сравниваются два значения с помощью операторов сравнения. Например, больше чем (>) и меньше чем(<).

true (истина)
Противоположно 'false'. Обозначает, что выражение является истиной. Например, 1 < 5 будет верно, то есть истина.

переменная
Область памяти компьютера для хранения данных. У нее есть имя и значение. Например, переменная mouseX будет иметь значение 200 когда курсор мышки будет сдвинут на 200 пикселей от левой границы экрана.