Следующий пример демонстрирует, как можно задавать цвета с помощью модели HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость).
Придумал такой способ Элви Рэй Смит, один из со-основателей мультипликационной студии Pixar, в середине 1970-х.Цветовая модель RGBудобна для компьютера, но не для человека, который им управляет. Чтобы художникам и дизайнерам было проще создавать графику на компьютере, Смит предложить использовать привычные людям параметры цвета: тон, насыщенность и яркость.
Рис. 2. Элви Рэй Смит за работой в Pixar.
Рис. 3. Персонажи первого полнометражного компьютерного мультфильма «История игрушек».
Листинг программы «Лоллипоп»
| // Полярные координаты // Модель цвета HSB // H-тон, S-насыщенность // B-яркость function setup() { createCanvas(400, 400); colorMode(HSB, 100); // цветовая модель HSB col = 0; // тон отвечающий за цвет dir = 0; // направление вектора R = 50; // радиус-вектор } function draw() { stroke(col,100,100-R/3); // цветобводки fill(col,100,100-R/3); // цветзаливки // смещениеначалакоординатвцентрэкрана translate(width/2, height/2); x = R * cos(dir); // экранныекоординатыточки y = R * sin(dir); // из полярных координат circle(x, y, R/5); // рисуем круг dir = dir + 0.04; // вращаем вектор R = R + 0.5; // увеличиваем размер if (R> 100) { // ограничитель размера R = 0; // начинай снова в центре // смещаем тон цвета col = (col + PI*5) % 100; } } |
Устройство и принцип работы модели HSV (HSB)
Прочитать подробно о модели можно в Википедии:
https://ru.wikipedia.org/wiki/HSV_(цветовая_модель)
 
Рис. 4. Модель цвета HSV (HSB)
Любой цвет и его оттенок задается с помощью трех величин: Hue - тон, Saturation - насыщенность, Value (Brightness) – яркость. Тон на рисунке может меняться по кругу и задаваться углом от 0 до 360 градусов. Насыщенность и яркость меняются от 0 до 100.
Явное преимущество модели HSV (HSB) перед RGB, что для изменения тона, яркости или насыщенности цвета не нужно менять все три цветовые компонента, как это приходится делать при работе с RGBмоделью. Также эта модель позволяет легко создавать графические эффекты с помощью программ.
|
Мы для удобства зададим цветовую модель с размерностью аргументов равной 100. Это значит, что максимальное значение для тона будет 100, а не 360.
| colorMode(HSB, 100); |
Как вы видите, у команд задающих цвет есть три аргумента: тон, насыщенность, яркость.
| stroke(col,100,100-R/3); // цвет обводки fill(col,100,100-R/3); // цвет заливки |
Разберемся как закрасить каждый завиток лоллипопа новым цветом, но при этом цвета не должны повторяться.
Тон будет изменяться с помощью операции «взятия остатка от деления» на 100. Эта операция обозначается знаком «%», после которого пишут делитель.
| col = (col + PI*5) % 100; |
Когда результат выражения в скобках превысит 100, от него будет взят только остаток от деления на 100. Так мы обеспечим циклическое изменение тона в диапазоне 0-100 с нужным шагом. Величина шага в нашем случае равнаPI*5. В этом выражении PI – знакомое из математики число. Про него часто говорят, будто оно равно 3.14, забывая добавить «приблизительно». В системе P5JSэта величина является встроенной константой, т.е. её нельзя изменить или использовать сочетание букв PIдля обозначения переменной.
Какие еще полезные команды нужно знать, чтобы код программы выглядел более читаемым. Частая проблема, с которой встречаются начинающие программисты – начало координат в компьютерной графике отличается от школьного представления в математике. Мало того, что на компьютере начало координат смещено в левый верхний угол, так еще и ось Y растет вниз. «Отрицательный рост» всегда нужно учитывать в расчетах. Сместить начало координат в центр экрана помогает следующая команда:
| translate(width/2, height/2); |
Здесь встроенные переменные «width» и «height» связаны с шириной и высотой холста (экрана) соответственно. Делать это следует каждый раз внутри функции «draw», т.к. настройки смещения координат сбрасываются при очередном её запуске.
| x = R * cos(dir); y = R * sin(dir); |
В формуле величина «R» влияет на удаленность точки от центра, а «dir» задает угол, на который точка повернута относительно горизонтальной «оси OX».
Для вычисления тригонометрических функций можно использовать встроенные команды «cos» и «sin», аргументы которых указываются в радианах. Данный пример использует полярные координаты для плавного роста завитков по часовой стрелке с постепенным удалением от центра. Подробно принцип преобразования полярных координат в экранные будет рассмотрен в главе «Полярные координаты».
Справочник по командам*P5JS
D Графика
Circle() - Окружность
Пример
| // Рисует круг в координатах (20, 30) // с диаметром 40. circle(20, 30, 40); |
Описание
Рисует круг на экране. Круг - это простая замкнутая фигура. По умолчанию, первые два параметра задают координаты центра круга, а третий задает диаметр.
Синтаксис
| circle(x, y, d) |
Параметры
| x | Число: x-координата центра круга |
| y | Число: y-координата центра круга |
| d | Число: диаметр |
Rect() - Прямоугольник
Пример
| // Рисует прямоугольник в месте (20,30) шириной и высотой 55. rect(20,30,55,55); |
| // Рисует прямоугольник со кругленными // углами, каждый из которых имеет // радиус 20. rect(20,30,55,55,20); |
| // Рисует прямоугольник со скругленными углами, имеющими следующие радиусы: Верхний левый = 20, верхний правый = 15, правый нижний = 10, левый нижний = 5. rect(20,30,55,55,20,15,10,5); |
Синтаксис
| rect(x, y, w, [h], [tl], [tr], [br], [bl]) rect(x, y, w, h, [detailX], [detailY]) |
Параметры
| x | Смещение по оси Х |
| y | Смещение по оси Y |
| w | Ширина |
| h | Высота |
| tl | Радиус скругления верхнего левого угла |
| tr | Радиус скругления верхнего правого угла |
| br | Радиус скругления нижнего правого угла |
| bl | Радиус скругления нижнего левого угла |
Square() - квадрат
Пример
| square(30,20,55); |
Описание
Рисует квадрат на экране.
Квадрат-это четырехгранная фигура с каждым углом в девяносто градусов и равным размером стороны. Эта функция является частным случаем функции rect(), где ширина и высота одинаковы, а параметр, называемый "s", означает размер для стороны. По умолчанию первые два параметра задают расположение от левого верхнего угла экрана, третий задает размер стороны квадрата. Способ интерпретации этих параметров может быть изменен с помощью функции rectMode().
Четвертый, пятый, шестой и седьмой параметры, если они указаны, определяют радиус угла для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно. Пропущенный параметр радиуса угла устанавливается равным значению ранее указанного значения радиуса в списке параметров.
Синтаксис
| square(x, y, s,[tl],[tr],[br],[bl]) |
Параметры
| x – Число: x-координата квадрата. y – Число: y-координата квадрата. s – Число: размер стороны квадрата. tl – Число: дополнительный радиус левого верхнего угла. tr – Число: дополнительный радиус правого верхнего угла. br - дополнительный радиус правого нижнего угла. bl - дополнительный радиус левого нижнего угла. |
Line() – линия
Примеры
| line(30,20,85,75); |
| line(30,20,85,20); stroke(126); line(85,20,85,75); stroke(255); line(85,75,30,75); |
Описание
Рисует линию между двумя точками на экране. Если написать только 4 параметра, то линия будет нарисована в 2D с толщиной равной единице.Толщину линии можно задать командойstrokeWeight().Цвет линии задается командойstroke().
Синтаксис
| line(x1, y1, x2, y2); line(x1, y1, z1, x2, y2, z2); |
Параметры
| X1 | X-координата 1 точки |
| Y1 | Y-координата 1 точки |
| X2 | X-координата 2 точки |
| Y2 | Y-координата 2 точки |
| Z1 | Z-координата 1 точки |
| Z2 | Z-координата 2 точки |