3. Цвет в p5.js
0. Введение
Итак, рисовать мы умеем. Но черно-белая палитра вряд ли выглядит привлекательной, из-за чего давайте изучим функции рисования в p5.js.
1. Его величество RGB
Для программирования цвета используется распрастраненная модель RGB. Вкратце, в данной модели любой цвет описывается с помощью комюинации трех основных цветов:
Каждый из основных цветов имеет 256 оттенков, от 0 (полное отсутсвие цвета) до 255 (полное присутсвие цвета). Сама комбинация записывается в виде последовательности трех чисел, например:
Приведем примеры цветов и их RGB-коды:
Естественно, коды всех цветов запомнить невозможно. Для выбора подходящего цвета советую использовать справку из Интернета, например, здесь.
Важно заметить, что подобная модель представления цвета используется практически во всех языках программирования.
2. Три кита рисования цветом
Мы разобрались, как выбрать цвет. Теперь давайте расскрасим какой нибудь наш скетч.
Нарисуйте домик используя материалы предыдущего раздела, подобный этому:
Полный листинг программы:
function setup() {
createCanvas(600,400)
}
function draw() {
rect(100,100,100,100)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}
По коду понятно, что для отрисовки используются три объекта: прямоугольник (стена дома), треугольник (крыша) и еще один прямоугольник (земля).
Для того, чтобы раскрасить объекты, мы будем использовать (в разных ситуациях) три команды: background(), fill(), и stroke(). Описание для каждой из команд следующее:
Выделенные жирным утверждения звучат занудно, однако указанный нюанс необходимо запомнить.
Приступим к раскраске. Заранее договоримся со цветами - небо пускай будет голубым, стена желтая, крыша красная, а земля - зеленая, .
Раскрасим объекты в указанном порядке.
Для отрисовки неба мы не используем какие-либо фигуры - в данном случае задний фон рисунка выполняет роль неба. Из-за чего напишем команду, отвечающую за раскраску фона. Функция darw() будет выглядить следующим образом:
function draw() {
background(0,255,255)
rect(100,100,100,100)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}
Круто! Теперь мы имеем чистое голубое небо над нашим домиком.
Перейдем к отрисоке объектов. Начнем со стены, которая у нас желтая. Вполне логично предположить, что мы можем поставить функцию fill() сразу после background(). Так оно и есть, но результат будет более интересным:
function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}
Вот тут и проявляется те слова о занудстве. Технически, мы выполнили, что хотели: команда fill() закрасила стену дома в желтый. Однако, помимо стены, все остальные объекты у нас тоже желтые. Это следует из логики команды, ведь она устанавливает цвет заливки для всех фигур, описанные после команды fill(). А так как мы поставили команду практически в самое начало, не мудрено, что все фигуры стали желтыми. Исправим скетч. И поставим правильный цвет заливки для крыши. Для этого нам необходимо добавить еще одну команду fill() после отрисовки первого прямоугольника (тот, что отвечает за стену):
function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}
Посмотрим на результат:
Получилось лучше: крыша и стена раскрашены правильно, но так как отрисовка земли идет после описания цвета крыши, цвет земли станивится аналогичным. Для исправления данного казуса надо добавить еще одну команду fill(). Догадайтесь, куда:
function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
rect(0,200,500,150)
}
Наконец-то, наш домик теперь заиграл правильными красками и не походит на кадр из ремастера "Семнадцать мгновений весны":
Пойдем еще дальше: "удалим" черную границу травы. Для этого нам необходимо указать соответсвующий цвет границы для соответсвующей фигуры:
function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
stroke(0,255,0)
rect(0,200,500,150)
}
Выглядит вполне логично, однако, если вы выполните данный код, вы наткнетесь еще на один подводный камень:
Трава теперь выглядит как надо, однако зеленые границы имеет не только трава: теперь все фигуры имеют зеленые границы. В чем-дело?
Это не ошибка и не просчет программистов. Суть работы кроется в механике функции draw() - вы ведь помните, что она выполняется непрерывно, да?
Пошагово посмотрим порядок работы цветовых функций внутри функции draw():
То есть, если мы определим в функции draw() цвет границы один раз, то в последующих повтораху нас все границы фигур будут закрашены в указанный цвет.
Для исправления ситуации надо просто добавить еще одну установку цвета для границ:
function draw() {
background(0,255,255)
stroke(0,0,0)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
stroke(0,255,0)
rect(0,200,500,150)
}
Теперь все выполнено так, как нам и хотелось.
3. Альфа без омеги
Цветовая модель, помимо установки цвета, имеет еще один необязательный параметр - это прозрачность, или альфа канал. Для установки прозрачности какого-либо цвета необходимо лишь добавить еще одно число к RGB-коду, например:
fill(255,255,0,120)
Параметр прозрачности имеет 256 градаций, где 0 - полная прозрачность, а 255 - полная непрозрачность.
По традиции, в конце раздела посмотрим видео Дэниела:
| Рабочий адрес: | Казань, ул. Татарстан, д. 2, Учебное здание №33 |
| Номер кабинета: | 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 |
| Педагогический стаж (ППС) в ВУЗе: |
| Научно-педагогический стаж: |
| Общий стаж: |
| Непрерывный в КФУ: |
