Book2v1

буется выполнить какую-либо часть кода несколько раз, то можно обойтись без копирования: просто вынесите её в отдельный метод, например, setup() или draw(), а потом вызывайте по мере необходимости. Более того, этому методу можно передавать аргументы. В коде Листинга 9 мы разберем пример объявления метода и пример сохранения трансформаций системы координат. Результат показан на Рисунке 11.

Рис. 11: Результат работы Листинга 9. Три крестика на черном фоне.

Методы в Processing объявляются так, как показано в 7-й и 11-й строках. Вначале мы должны указать тип возвращаемого значения. Возвращаемое значение – это, например, число, которое метод подсчитал и хочет вернуть обратно вместо себя в той строке коде, где он был вызван. В нашем случае метод drawMyScene() не будет ничего возвращать в код, поэтому мы указываем пустой тип возвращаемого значения void. Наш метод принимает один аргумент – переменную myColor типа float и будет отрисовывать два прямоугольника. Причем в 8-й строке мы используем переменную myColor для указания цвета отрисовки в методе fill(). Имя переменной аргумента нашего метода, так же как и имя метода, мы могли выбрать любое (с известными ограничениями). Вызывать наш метод мы будем в строках 21, 28 и 35.

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

31

ко первой из них. Первая группа, с 18-й по 22-ю строку, начинается с того, что мы сохраняем текущее состояние системы координат с помощью вызова метода pushMatrix() в 18-й строке. Далее мы сдвигаем систему координат, вращаем ее и затем, в 21-й строке, вызываем наш метод drawMyScene() с аргументом 180. После того как отрисован крестик, мы возврашаем систему координат в исходное состояние с помощью вызова метода popMatrix() в 22-й строке.

Задание 3. Измените код Листинга 9 таким образом, чтобы крестики вращались на PI/4 по отношению друг к другу. Вызов метода rotate() перенесите в метод drawMyScene().

Детально о возможностях трансформации системы координат можно узнать на странице официальной документации https://processing.org/reference/ , в разделе Transform.

Код Листинга 9 наглядно показывает, чем отличается объявление метода и его вызов. В строках с 7-й по 10-ю мы объявляем метод drawMyScene(), реализовываем его функционал. В строках 21, 28 и 35 мы вызываем метод drawMyScene(), передавая ему аргументы и ожидая адекватного результата. Мы видим исходный код метода drawMyScene(), но нам достаточно знать, что он «делает», какие аргументы принимает и что возвращает. Точно так же объявлены и остальные методы, такие как size(), fill() и другие, разница лишь в том, что мы не видим их исходный код.

В этой главе мы детально разобрали работу с системой координат Processing. Сравнивая координатные системы Processing и реального холста художника можно отметить больше различий, чем сходств. Система координат Processing подвижна, вы можете вращать и масшабировать ее со всеми объектами. У классического холста таких возможностей нет. Однако можно найти параллель с рабочим столом художникамультипликатора (так называемых «рисованных» мультипликационных фильмов), когда персонажи могут быть совмещены с разными системами координат.

32

5Цвет, ритм и движение

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

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

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

5.1Работаем с цветом

В этом параграфе вы научитесь работать с цветом в Processing, используя уже знакомые вам геометрические объекты. В Processing они могут иметь цвет и прозрачность разной степени.

Мы уже задавали в качестве аргумента, например, метода stroke() градации серого цвета для обводки. В документации (https://processing.org/reference/stroke_.html) указано, что этот метод может принимать разное количество аргументов:

1.stroke(rgb)

2.stroke(rgb, alpha)

3.stroke(gray)

4.stroke(gray, alpha)

5.stroke(v1, v2, v3)

6.stroke(v1, v2, v3, alpha)

Градации серого попадают в 3-ий и 4-ый вариант использования. В Processing существует 255 градаций серого от 0 до 255. Максимально

33

черный цвет – это 0, минимально черный, т.е. белый цвет, имеет числовое значение 255.

Остальные цвета в компьютерной графике представляются триадой Red (Красный), Green (Зеленый) и Blue (Синий). Смешивая эти цвета в различных комбинациях, вы можете получить любой требуемый вам цвет. Эта аддитивная цветовая модель не единственно возможная и не совсем полная, но очень сильно распространенная в «цифровом» мире.

Первый вариант использования метода stroke() как раз и связан с триадой Red, Green и Blue в так называемой шестнадцатиричной форме (hexadecimal notation). Этот формат чаще всего используется в CSS и HTML. Рассмотрим Листинг 10.

Листинг 10: Рисуем три цветных линии

3smooth () ;

4noLoop () ;

5}

6

7 void draw () {

8background (100) ;

9

10stroke (#881 DCB );

11strokeWeight (110) ;

14stroke (# CB1DA3 );

15strokeWeight (60) ;

18stroke (# CB1D1D );

19strokeWeight (110) ;

20line (100 , 350 , 400 , 350) ;

21}

В10-й строке мы вызываем метод stroke() с первым аргументом #881DCB. Этот аргумент и является шестнадцатиричной формой записи цвета. Результат выполнения кода Листинга 10 можно увидеть на Рисунке 12.

Несмотря на свою компактность, шестнадцатиричная форма записи чаще всего неудобна для художественных задач: художнику привычнее смешивать краски. Поэтому есть смысл остановиться на возможности смешивать значения Red, Green, Blue в так называемой «аддитивной палитре». Посмотрим, как это делается в Processing на примере кода Листинга 11.

34

Рис. 12: Результат работы Листинга 10. Три цветных линии на сером фоне.

Листинг 11: Рисуем три линии цветом RGB

3smooth () ;

4noLoop () ;

5}

6

7 void draw () {

8background (100) ;

17strokeWeight (110) ;

18line (100 , 350 , 400 , 350) ;

19}

В10-й строке вызываем метод stroke() с тремя аргументами, задавая значение цветов Red, Green, Blue в более привычных цифрах (от 0 до 255). Число градаций каждого из Red, Green, Blue так же, как и у черного цвета, состоит из 255. Результат работы кода Листинга 11 представлен на Рисунке 13.

35

Рис. 13: Результат работы Листинга 11. Три линии цвет которых задан в RGB режиме.

Определение необходимого вам цвета в RGB режиме может вызывать трудности, поэтому разработчики Processing включили в редактор возможность визуального выбора цвета из палитры. Для того, чтобы определить числовое значение цвета, вы можете вызвать палитру из панели управления Tools -> Color Selector. Появившееся окно позволит работать с выбором цвета интуитивно понятно.

Метод stroke может принимать и четвертый аргумент, который будет отвечать за прозрачность. Для того, чтобы рассмотреть прозрачность, мы нарисуем отрезки, наложенные друг на друга, как на Рисунке 14 (Листинг 12).

Листинг 12: Рисуем четыре отрезка разной прозрачности

3smooth () ;

4noLoop () ;

5}

6

7 void draw () {

8background (50) ;

9

10 stroke (94 , 206 , 40 , 50) ;

11strokeWeight (140) ;

12line (100 , 100 , 400 , 100) ;

13

36

На Рисунке 14 мы видим, что ширина обводки линии больше, чем расстояние между ними, ввиду чего отрезки перекрывают друг друга. Код Листинга 12 отличается от предыдущего тем, что во всех вызовах метода stroke() (в 10-й,14-й, 18-й и 22-й строках) указывается четыре аргумента. В качестве четвертого аргумента, отвечающего за прозрачность, мы передаем последовательно увеличивающееся значение (50, 100, 150 и 250). Так достигается эффект прозрачности разной плотности.

Рис. 14: Результат выполнения Листинга 12. Четыре отрезка разной прозрачности.

Задание 1. Измените код Листинга 12 таким образом, чтобы отрисовывались не отрезки, а окружности. Прозрачность при этом должна увеличиваться книзу.

37

Вэтом параграфе мы рассмотрели возможности языка Processing

вобласти работы с цветом в шестнадцатиричном и RGB формате и с прозрачностью. Форматы цвета в Processing определены не случайно. Processing, как инструмент художника, должен быть совместим на уровне понимания и логики с другими цифровыми инструментами – редакторами компьютерной графики. Так что, например, в Inkscape или в Abode PhotoShop вы увидите эти же цветовые модели.

5.2Ритм с помощью циклов

В этом параграфе мы рассмотрим конструкции Processing для создания ритма. В программировании ритм используется постоянно, поэтому работа с ритмом включена практически во все языки программирования.

В Листинге 13 показан код, который очень похож на код Листинга 1. Однако метод draw() оставлен максимально пустым, все операции по настройке вынесены в метод setup(). Результат выполнения кода Листинга 13 представлен на Рисунке 15.

Листинг 13: Рисуем две наклонные линии

3smooth () ;

4 background (255) ;

5strokeWeight (30) ;

6noLoop () ;

7}

8

Вызов метода line() в 11-й строке и вызов метода line() в 12-й строке отличаются лишь значением аргументов. В первом случае это числа 50, 200, 150, 300, а во втором – 100, 200, 200, 300. Первая и третья цифры отвечают за координату Y начальной точки и координату X конечной точки соответственно. Таким образом мы сдвинули линию вправо на 50 пикселей.

Задание 2. Измените код Листинга 13 так, чтобы отрисовывалось три линии. Третью линию, параллельную первым двум,

38

Рис. 15: Результат выполнения Листинга 13.

Две диагональные линии line(50,200, 150,300) и line(110,200, 210,300).

необходимо расположить со сдвигом вправо на 50 пикселей, как на Рисунке 16.

Мы можем представить первую и третью цифры в 12-й строке так: 100 = 50 + 50 и 200 = 150 + 50. Тогда 12-я строка будет выглядеть так:(50 + 50, 200, 150 + 50, 300);. При выполнении этой строки кода вначале срабатывают операции сложения, затем вызывается метод line(), аргументами которого являются результаты сложения. Заметим, что результат при наших манипуляциях остается прежний: линии на холсте. Продолжим модифицировать наш пример в Листинге 14.

Листинг 14: Рисуем три наклонных линии

3smooth () ;

4 background (255) ;

5strokeWeight (30) ;

6noLoop () ;

7}

8

9 void draw () {

10stroke (20) ;

11line (50 , 200 , 150 , 300) ;

39

12 line (50 + 50 , 200 , 150 + 50 , 300) ;

13 line (50 + 50 + 50 , 200 , 150 + 50 + 50 , 300) ;

14 }

При запуске кода мы получаем результат (см. Рисунок 16).

Рис. 16: Результат выполнения Листинга 14.

Три диагональных линии, сдвинутые друг от друга на 50 пискелей.

Несложно заметить, что 50 + 50, в 12-й строке – это не что иное, как 2 * 50. Тогда строка 12 Листинга 14 может быть модифицирована так: (2 * 50, 200, 150 + 50, 300);, а строка 13 так: (3 * 50, 200, 150 + 2 * 50, 300);. Чтобы нарисовать четвертую линию, сдвинутую вправо на 50 пискелей от крайней правой, нам требуется лишь скопировать 13-ю строку кода и поменять в ней цифру 3 на цифру 4, а цифру 2 на 3, так:

(4 * 50, 200, 150 + 3 * 50, 300);.

Задание 3. Измените код Листинга 14 таким образом, что бы на холсте ыло отрисовано 7 линий, как на Рисунке 17.

Проведем еще ряд модификаций нашего кода. В Листинге 15 показаны все операции, описанные выше. Обратите внимание на строку 11: в ней есть два интересных момента. Первый – это 1*50, второй – (1−1)*50. Они приведены только для того, чтобы сделать ясной логику перехода от 11-й строке к 12-й и далее к 13-й. Эти три строки очень похожи друг

40