Создание головоломки по цветовым схемам⁠⁠

Суть игры

Игроку предлагается расположить цвета на цветом круге так, чтобы цвета удовлетворяли заданию. Все задания вертятся вокруг заданной цветовой схемы (комплементарная, аналогия, триада и т.д.). Задания делятся на два типа. В первом типе игроку даются подсказку а-ля "Немного насыщенней, чем вот этот цвет" или "Значительно менее насыщенней и умеренно темнее, чем вот этот цвет". "Вот эти" цвета, от которых отталкивается игрок, расположены вокруг цветового круга с текстовыми подсказками. Во втором типе заданий игрок отталкивается от оттенков и температуры цветов. Например, холодных и теплых цветов должно быть по две штуки и они должны быть пастельных тонов. Кол-во уровней неограниченно.

Немного подробностей и проблем

Кругов, оказывается, существует целых две штуки: основанных на цветовой модели RGB и RYB. В RYB круге напротив красного тусуется зеленый, в отличие от RGB, где красный комплементарен циану (сине-зеленому). В вики есть прекрасная строчка на эту тему: "Одним из следов системы RYB в культуре является популярное предубеждение, что красный и зелёный являются дополнительными цветами. В действительности, при аддитивном и субтрактивном синтезах красного и зелёного результирующие цвета не получаются ахроматическими". Выбор пал на RGB как на более простой вариант в реализации, а не потому что он более "правильный". Насколько я знаю художники и дизайнеры до сих пор используют именно RYB-модель. Ну и хер с ней. Помимо этих двух цветовых моделей существуют модели иного рода. Вы, скорее всего, уже слышали о целой плеяде таких моделей: RGB, CMYK, XYZ, LMS, HSV (HSB), HSL, LAB и т.д.

Изначально была выбрана цветовая модель HSV (hue, saturation, value — тон, насыщенность, значение), но практике оказалось, что для пользователя такая схема контринтуитивна: игроку сложно ориентироваться на цветовом круге при помощи описания (насыщенней, темнее/cветлее). Пришлось перейти на модель HSL (hue, saturation, lightness). В ней, чем ближе к центру, тем менее насыщенным становится цвет - он тускнеет. Светлота (lightness) превращается в отдельный ui-элемент, представляющий из себя простой градиент от черного к белому. Таким образом, радиус на круге представляет собой насыщенность, угол поворота становится цветом, а ползунок светлотой.

Вся эта прелесть рисуется шейдером. Круг может быть как дискретным, так и непрерывным. Дискретность означает, что круг делится на n-секторов и m-колец. С рисованием особых проблем не возникло. Проблемой стала арифметика с перегоном цвета в координаты и обратно. Вроде бы ничего сложного, но пришлось писать тестовую тулзу, которая генерила уровень и его же проходила. Удалось выявить целую кучу багов, когда я уже думал, что с координатами покончено. В общем, пишите тесты.

Далее встал воопрос о том, как оценивать решение юзера. Вариант для бедных - вычислять евклидово расстояние по компонентам rgb между загаданными цветами и цветами юзера. Такой подход прост, но не отражает восприятие цвета человеком. В реальности некотрые цвета кажутся нам ближе или дальше друг от друга, чем показывает евклидово расстояние. Для решения этой проблемы комитет CIE разработал неебически здоровую формулу, от одного вида которой бросает в дрожь. Самому воплощать в жизнь мне не хотелось, ибо была большая вероятность облажаться даже не поняв где. Благо было найдено оттестированное решение на плюсах, которое я перегнал на C#. Алгоритм получался такой: hsl -> rgb -> lab -> формула -> чиселко. Значение около двух считается минимально различимым для человеческого глаза отличию между цветами.

Вот в общем-то и все. Отдельное спасибо хочу выразить Midjourney и ChatGPT. Если с помощью первой я сгенерил уникальную иконку приложения, то вторая выдала мне описание игры для Google Play на пару страниц. Мне оставалось только отредачить их творения.

Google Play