Прогаем с кенгурой
229 subscribers
193 photos
191 videos
17 files
157 links
Сидим с кенгурой под горой, запекаем текстуры...

{ программирование, процедурная генерация, графика, аудио, образование и немного про специфичные игры }

https://gostrobrod.dev
Download Telegram
Более интересна тема различных задач на этой (да и на лююой другой) кривой

- Поиск значения параметра для заданной точки (для квадратичной и линейной все ясно, для кубической уже сложнее, для 4+ - хардкор)
- Апроксимация набора точек кривой, то есть поиск опорных и контрольных точек для случайного набора точек на плоскости, которые мы хотим описать кривой - есть для этого специальные алгоритмы типа Дугласа-Пекера
- Нормаль и касательная в точке; тут все просто - у нас последний отрезок это и есть касательная - нормализуем ее и готово, повернуть это потом до нормали тоже не рокет сайнс - переставляем координаты и одной из них меняем знак
- Производные (берем по каждой координате отдельно), например, для определения шага параметра в точке (чтоб в пиксель попадать)
- Расстояние до кривой от точки (тут сложнее, потому что может быть несколько решений - зависит от степени)

Что я делал с кривыми Безье

- 2й степени для движка рисования в Pixelmator. Квадратичной вполне хватает для рисования, если кривую не нужно редактировать (если нужно, стандарт - кубическая)
- 3й степени для апроксимации ввода пользователя со стилуса на айпаде, чтобы потом редактировать и хранить всю кучу параметров (позиция, время, наклон, азимут, нажим) для Procreate Dreams; пожалуй, эта была одна из самых интересных задач на тему Безье
- генерация вектора из растра
- рендер кривых Безье на шейдерах: с квадратичной все просто, с кубической все не просто, особенно на крайних случаях, когда кривая вырождается.

Кстати, на тему квадратичной кривой - есть прием, как это почти бесплатно считать на шейдере: делаем текстуру 2х2, по диагонали ставим значения опорных точек, по второй диагонали - контрольной (одинаковые) и двигаемся по первой диагонали между центрами пикселей по параметру t c билинейной интерполяцией - результат сэмплирования даст ответ. Когда сэмплинг был дешевле математики, это неплохо экономило ресурсы, так как использовало внутренние оптимизации видюхи для сэмплинга
4🔥3
чет меня поперло basic вспомнить…
😁43😭1
Прогаем с кенгурой
чет меня поперло basic вспомнить…
Кстати для бейсика есть фентези консоль LowRes NX, которую можно даже на телефоне запустить. Хотя если у вас андроид, лучше тик80

https://apps.apple.com/au/app/lowres-nx-coder/id1318884577
Так, ладно, возвращаемся к нашим сплайнам.

B(asis)-Spline

Это более общие сплайны, чем Безье, у них посложнее и поинтереснее математика, но упарываться в нее мы не будем, ибо зачем - в большинстве кейсов вряд ли оно вам понадобиться, а если понадобиться - знаете, в какую сторону копать.

Итак, сразу к практике

Допустим, у нас есть набор точек (A,B,C,D,E,F,G), будем строить сплайн 3 порядка (брать по 4 точки и строить на их основе кубическую Безье). Чтобы сплайн проходил через первую и последнюю точки, нам нужно расширить набор до (A,A,A,B,C,D,E,F,G,G,G). Берем по 4 точки для каждого сегмента: (AAAB, AABC, ABCD, и тд) и из них считаем точки для Безье:

1. берем точку на отрезке между первой и второй, скажем 2/3
2. берем вторую точку на отрезке между второй и третьей на 1/3
3. берем третью на том же отрезке на 2/3
4. берем четвертую между третьей и четвертой на 1/3
5. Середины между (1) - (2) и (3) - (4) будут опорными точками для нашей Безье, а (2) и (3) - контрольными.

Немного запутанно, но с примером, надеюсь, будет понятно - там все по шагам расписано.

Тут используется 1/3 везде, что делает эту кривую однородными/uniform, однако они могут быть и неоднородными/non-uniform - с разными смещениями узлов, что делает их NURBS.

Зачем они нужы

Если Безье это стандарт для векторной графики на тему рисования и около, то NURBS - для CAD и 3D.

Я их использовал только однажды - считать дугу челюсти по предсказанным точкам.
4
Ночью был шторм. Думал унесет в страну Оз. Потом вспомнил, что уже унесло🤠
12
Раньше это была река, но она решила свернуть в бухту пораньше и осталось вот это. Там еще какой-то ручеек вроде есть, но по факту это теперь часть бухты.

Сегодня попозже выкачу про сплайн Катмулл-Рома
6
Catmull-Rom Spline

Очень полезная штука для инетрполяции между точками - плюс он еще и проходит через них.

Математика

Катмулл-Ром это частный случай Эрмита, который задает кубическую интерполяцию между двумя точками с учетом производных в них - смотрим дезмос (так проще, чем тут формулы городить).

Катмулл-Ром автоматизирует этот процесс, рассчитывая производные через соседние точки - смотрим другой дезмос (там равномерный).

Есть по сути два варианта:

- равномерный - производная это среднее арифметическое между следующей и предыддущей.
- неравномерный - узлы заданы произвольно для каждой точки и вычисление несколько сложнее, зато более универсально.

Для вычисления используется алгоритм Барри-Голдмана (смотрим на картинке) - это позволяет регулировать "расстояние" между точками.

Зачем оно надо

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

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

Дальше буду рассказывать про цветовые модели и пространства
1
Попался мне в аппсторе BBC Basic - вот его официальный сайт. Максимально всратая гуя, но при этом он много что умеет (по крайней мере некоторые примеры впечатляют).

Хз зачем вам это, но мне порой нравится потыкать подобную ностальгическую всратость
🔥1
А вот вариант оптимизации сэмплинга кубической Безье, когда нужно брать рандомные точки на всем диапазоне t при фиксированных точках - схлопнуто до кубического многочлена с предпосчитанными коэффициентами.

https://www.desmos.com/calculator/hu2htilxlr
Кости каракатиц (внутренняя раковина). Они (каракатицы) при росте наслаивают ее как моллюски (каракатицы тоже моллюски) раковины (это тоже своего рода раковина).

Сверху мелкая совсем, снизу - большая. Вообще они тут могут быть пол метра длинной (без щупалец), но я пока таких не находил на берегу
😱6
Корень коралла.

Я думал, что переезд это отправить вещи и переместиться самому. А оказалось, что разобрать барахло посложнее, чем закидать его в коробки.

А еще внезапно надо сарай перебрать, сад расчистить, тонну щебня заказать и перекидать и прочее🤠

Сейчас доразгребу все это и вернусь к нормальному ритму и темам постов
🗿4👀32
Вот такое вот есть в 15 минутах езды
🔥106
Так, как и обещал, после сплайнов расскажу про цвета.

Начнем с терминологии, чтобы не было путаницы потом (да и вообще):
1. Цветовая модель - это способ представления пространства цвета, то есть система координат и что эти самые координаты означают. Например: RGB, CMYK, HSL, YUV и т.д.
2. Цветовое пространство - это конкретная реализация цветовой модели, то есть как именно цвета из гамута мапятся на наши координаты (например точка черного цвета, белого цвета, пределы каналов и тд). Например: sRGB, Adobe RGB, ProPhoto RGB, рекомендации/стандраты для цветоразностных и т.д.
3. Гамут - это множество всех возможных цветов, которые может воспроизвести устройство, например, монитор или принтер.
4. Цветовой профиль - структура, описыващая переход между цветовыми пространствами через стандартизированное и независимое от устройства, например XYZ или Lab.

Все это описано в спецификациях CIE (International Commission on Illumination), но кто это читать будет - там скучно.
5
Кратко по цветовым моделям. Их можно разделить на несколько категорий:

1. Аддитивные модели - образуют цвет, складывая свет (каналы) разных длин волн; используются в излучающих устройствах (мониторы и проекторы):
- RGB (Red, Green, Blue) - декартовая система, складывет цвет из разных интенсивностей базовых цветов (светов).
- HSL (Hue, Saturation, Lightness) - цилиндрическая система, лайтнес от черного до белого.
- HSV (Hue, Saturation, Value) - тоже цилиндрическая система, но лайтнес от черного до максимального значения среди каналов.
- Okhsv and Okhsl - новые модели, позволяют более естественно работать с цветами.

2. Субтрактивные модели - образуют цвет, смешивая краски (пигменты, как известно поглощают, поэтому если намешаем всего, будет черный); используются в печатающих устройствах (принтеры):
- CMYK (Cyan, Magenta, Yellow, Key/Black) - четыре основных цвета, которые комбинируются для создания других цветов. Эта модель используется в печати.

3. Цветоразностные модели - образуют цвет из значения яркости и цветоразностных значений; используются в видео и телевидении:
- YUV - яркость и цвет, часто используется в видео и телевидении.
- YPbPr - еще одна цветоразностная модель, которая используется в аналоговых системах.
- YCbCr - используется в цифровом видео.

4. Специальные модели - используются для специфических задач (как базовая модель, представление гамута, представление человеческого восприятия и тд):
- Lab (CIELAB) - описывает цвет в терминах человеческого восприятия.
- Oklab - современная альтернатива Lab, основанная на более интуитивном восприятии цвета.
- XYZ - линейная базовая модель, тоже основана на человеческом восприятии, не зависит от устройства.

Подробности потом по каждой отдельно распишу.
👍7