Более интересна тема различных задач на этой (да и на лююой другой) кривой
- Поиск значения параметра для заданной точки (для квадратичной и линейной все ясно, для кубической уже сложнее, для 4+ - хардкор)
- Апроксимация набора точек кривой, то есть поиск опорных и контрольных точек для случайного набора точек на плоскости, которые мы хотим описать кривой - есть для этого специальные алгоритмы типа Дугласа-Пекера
- Нормаль и касательная в точке; тут все просто - у нас последний отрезок это и есть касательная - нормализуем ее и готово, повернуть это потом до нормали тоже не рокет сайнс - переставляем координаты и одной из них меняем знак
- Производные (берем по каждой координате отдельно), например, для определения шага параметра в точке (чтоб в пиксель попадать)
- Расстояние до кривой от точки (тут сложнее, потому что может быть несколько решений - зависит от степени)
Что я делал с кривыми Безье
- 2й степени для движка рисования в Pixelmator. Квадратичной вполне хватает для рисования, если кривую не нужно редактировать (если нужно, стандарт - кубическая)
- 3й степени для апроксимации ввода пользователя со стилуса на айпаде, чтобы потом редактировать и хранить всю кучу параметров (позиция, время, наклон, азимут, нажим) для Procreate Dreams; пожалуй, эта была одна из самых интересных задач на тему Безье
- генерация вектора из растра
- рендер кривых Безье на шейдерах: с квадратичной все просто, с кубической все не просто, особенно на крайних случаях, когда кривая вырождается.
Кстати, на тему квадратичной кривой - есть прием, как это почти бесплатно считать на шейдере: делаем текстуру 2х2, по диагонали ставим значения опорных точек, по второй диагонали - контрольной (одинаковые) и двигаемся по первой диагонали между центрами пикселей по параметру t c билинейной интерполяцией - результат сэмплирования даст ответ. Когда сэмплинг был дешевле математики, это неплохо экономило ресурсы, так как использовало внутренние оптимизации видюхи для сэмплинга
- Поиск значения параметра для заданной точки (для квадратичной и линейной все ясно, для кубической уже сложнее, для 4+ - хардкор)
- Апроксимация набора точек кривой, то есть поиск опорных и контрольных точек для случайного набора точек на плоскости, которые мы хотим описать кривой - есть для этого специальные алгоритмы типа Дугласа-Пекера
- Нормаль и касательная в точке; тут все просто - у нас последний отрезок это и есть касательная - нормализуем ее и готово, повернуть это потом до нормали тоже не рокет сайнс - переставляем координаты и одной из них меняем знак
- Производные (берем по каждой координате отдельно), например, для определения шага параметра в точке (чтоб в пиксель попадать)
- Расстояние до кривой от точки (тут сложнее, потому что может быть несколько решений - зависит от степени)
Что я делал с кривыми Безье
- 2й степени для движка рисования в Pixelmator. Квадратичной вполне хватает для рисования, если кривую не нужно редактировать (если нужно, стандарт - кубическая)
- 3й степени для апроксимации ввода пользователя со стилуса на айпаде, чтобы потом редактировать и хранить всю кучу параметров (позиция, время, наклон, азимут, нажим) для Procreate Dreams; пожалуй, эта была одна из самых интересных задач на тему Безье
- генерация вектора из растра
- рендер кривых Безье на шейдерах: с квадратичной все просто, с кубической все не просто, особенно на крайних случаях, когда кривая вырождается.
Кстати, на тему квадратичной кривой - есть прием, как это почти бесплатно считать на шейдере: делаем текстуру 2х2, по диагонали ставим значения опорных точек, по второй диагонали - контрольной (одинаковые) и двигаемся по первой диагонали между центрами пикселей по параметру t c билинейной интерполяцией - результат сэмплирования даст ответ. Когда сэмплинг был дешевле математики, это неплохо экономило ресурсы, так как использовало внутренние оптимизации видюхи для сэмплинга
❤4🔥3
Прогаем с кенгурой
чет меня поперло basic вспомнить…
Кстати для бейсика есть фентези консоль LowRes NX, которую можно даже на телефоне запустить. Хотя если у вас андроид, лучше тик80
https://apps.apple.com/au/app/lowres-nx-coder/id1318884577
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.
Я их использовал только однажды - считать дугу челюсти по предсказанным точкам.
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.
Я их использовал только однажды - считать дугу челюсти по предсказанным точкам.
Desmos
B-Spline
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
❤4
Раньше это была река, но она решила свернуть в бухту пораньше и осталось вот это. Там еще какой-то ручеек вроде есть, но по факту это теперь часть бухты.
Сегодня попозже выкачу про сплайн Катмулл-Рома
Сегодня попозже выкачу про сплайн Катмулл-Рома
❤6
Catmull-Rom Spline
Очень полезная штука для инетрполяции между точками - плюс он еще и проходит через них.
Математика
Катмулл-Ром это частный случай Эрмита, который задает кубическую интерполяцию между двумя точками с учетом производных в них - смотрим дезмос (так проще, чем тут формулы городить).
Катмулл-Ром автоматизирует этот процесс, рассчитывая производные через соседние точки - смотрим другой дезмос (там равномерный).
Есть по сути два варианта:
- равномерный - производная это среднее арифметическое между следующей и предыддущей.
- неравномерный - узлы заданы произвольно для каждой точки и вычисление несколько сложнее, зато более универсально.
Для вычисления используется алгоритм Барри-Голдмана (смотрим на картинке) - это позволяет регулировать "расстояние" между точками.
Зачем оно надо
Интерполяция, чтобы интерполировать-интерполировать да не выинтерполировать. Используют их для интерполяции цветов (я так делал), параметров анимации между кадрами и прочим, что можно и нужно интерполировать.
Очень полезная штука для инетрполяции между точками - плюс он еще и проходит через них.
Математика
Катмулл-Ром это частный случай Эрмита, который задает кубическую интерполяцию между двумя точками с учетом производных в них - смотрим дезмос (так проще, чем тут формулы городить).
Катмулл-Ром автоматизирует этот процесс, рассчитывая производные через соседние точки - смотрим другой дезмос (там равномерный).
Есть по сути два варианта:
- равномерный - производная это среднее арифметическое между следующей и предыддущей.
- неравномерный - узлы заданы произвольно для каждой точки и вычисление несколько сложнее, зато более универсально.
Для вычисления используется алгоритм Барри-Голдмана (смотрим на картинке) - это позволяет регулировать "расстояние" между точками.
Зачем оно надо
Интерполяция, чтобы интерполировать-интерполировать да не выинтерполировать. Используют их для интерполяции цветов (я так делал), параметров анимации между кадрами и прочим, что можно и нужно интерполировать.
❤1
Как это выглядит (для наглядности)
На самом деле сплайнов дофига и больше, но так мы тут не датасатанисты, некоторые из них не так интересны. Хотя если вы из таких - напишите, расскажу про сплайн, чтобы графики красивые рисовать из шумных точек.
Дальше буду рассказывать про цветовые модели и пространства
На самом деле сплайнов дофига и больше, но так мы тут не датасатанисты, некоторые из них не так интересны. Хотя если вы из таких - напишите, расскажу про сплайн, чтобы графики красивые рисовать из шумных точек.
Дальше буду рассказывать про цветовые модели и пространства
❤1
Попался мне в аппсторе BBC Basic - вот его официальный сайт. Максимально всратая гуя, но при этом он много что умеет (по крайней мере некоторые примеры впечатляют).
Хз зачем вам это, но мне порой нравится потыкать подобную ностальгическую всратость
Хз зачем вам это, но мне порой нравится потыкать подобную ностальгическую всратость
App Store
BBCBasic App - App Store
Download BBCBasic by Richard Russell on the App Store. See screenshots, ratings and reviews, user tips and more apps like BBCBasic.
🔥1
Железка конечно ппц стоит. Нашел архив игр и, в принципе, под нее есть ядро для RetroArch
Libretro
Acorn - BBC Micro (b2) - Libretro Docs
This is the official RetroArch documentation for users and developers. Information from sources outside of this website may be dated or incorrect.
🔥1
Нашел в закромах всякое про кубическое Безье: производные, касательная, кривизна и тд
https://www.desmos.com/calculator/hpopgcsusl
https://www.desmos.com/calculator/hpopgcsusl
Desmos
Bezier-sb
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
А вот вариант оптимизации сэмплинга кубической Безье, когда нужно брать рандомные точки на всем диапазоне t при фиксированных точках - схлопнуто до кубического многочлена с предпосчитанными коэффициентами.
https://www.desmos.com/calculator/hu2htilxlr
https://www.desmos.com/calculator/hu2htilxlr
Desmos
Bezier optimisation
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
Корень коралла.
Я думал, что переезд это отправить вещи и переместиться самому. А оказалось, что разобрать барахло посложнее, чем закидать его в коробки.
А еще внезапно надо сарай перебрать, сад расчистить, тонну щебня заказать и перекидать и прочее🤠
Сейчас доразгребу все это и вернусь к нормальному ритму и темам постов
Я думал, что переезд это отправить вещи и переместиться самому. А оказалось, что разобрать барахло посложнее, чем закидать его в коробки.
А еще внезапно надо сарай перебрать, сад расчистить, тонну щебня заказать и перекидать и прочее🤠
Сейчас доразгребу все это и вернусь к нормальному ритму и темам постов
🗿4👀3❤2
Сделал видос про сплайны https://youtu.be/fC-ZZK81-t4
YouTube
Сплайны: как устроены кривые Безье, B-сплайны и Катмулл–Ром
В этом видео разбираем, что такое сплайны, зачем они нужны и как работают разные их виды: от простых кривых Безье до B-сплайнов и Катмулл–Ром.
Полезно всем, кто работает с визуализацией, программированием графики или просто хочет лучше понять, как создаются…
Полезно всем, кто работает с визуализацией, программированием графики или просто хочет лучше понять, как создаются…
👍6🔥2
Так, как и обещал, после сплайнов расскажу про цвета.
Начнем с терминологии, чтобы не было путаницы потом (да и вообще):
1. Цветовая модель - это способ представления пространства цвета, то есть система координат и что эти самые координаты означают. Например: RGB, CMYK, HSL, YUV и т.д.
2. Цветовое пространство - это конкретная реализация цветовой модели, то есть как именно цвета из гамута мапятся на наши координаты (например точка черного цвета, белого цвета, пределы каналов и тд). Например: sRGB, Adobe RGB, ProPhoto RGB, рекомендации/стандраты для цветоразностных и т.д.
3. Гамут - это множество всех возможных цветов, которые может воспроизвести устройство, например, монитор или принтер.
4. Цветовой профиль - структура, описыващая переход между цветовыми пространствами через стандартизированное и независимое от устройства, например XYZ или Lab.
Все это описано в спецификациях CIE (International Commission on Illumination), но кто это читать будет - там скучно.
Начнем с терминологии, чтобы не было путаницы потом (да и вообще):
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 - линейная базовая модель, тоже основана на человеческом восприятии, не зависит от устройства.
Подробности потом по каждой отдельно распишу.
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