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

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

https://gostrobrod.dev
Download Telegram
Forwarded from Генканал (George)
Media is too big
VIEW IN TELEGRAM
Симуляция частиц
от @coding_with_kangaroo

Сделана на подобии Particle Life (в плане идеи нескольких классов с разными коэффициентами взаимодействия), но с расширением в сторону физичности: учитывается масса, а взаимодействие работает через квадрат расстояния: f(i,j)=k_{ij}\cdot\frac{m_{i}\cdot m_{j}}{r_{ij}^{2}}.

- Правило - матрица 4х4 (число классов - 4), которая описывает коэффициенты взаимодействия между классами. При этом она может быть несимметричной.
- Так как в симуляции считаются только частицы (положение + скорость), то поле - виртуально и может быть любого размера.
- Пространство тороидально, чтобы частицы не разлетались со временем - все же это делалось для лирики, а не физики.
- Скорости тоже можно делать неограниченными, но нужно масштабировать время, иначе частицы проходят за итерацию расстояния, сильно превышающие их размер.

На видео - арт режим, когда цвета и правило меняются по времени + сделано движение поля по фигуре Лиссажу 1:2.

Приложение на AppStore
Видео на ютубе
#particle
🔥4
Screenshot 2025-06-21 at 20.01.16.png
363 KB
L-система - одна из разновидностей фракталов на основе грамматик строк. Состоит из алфавита возможных элементов, инициирующего состояния и набора правил, какие элементы что порождают. На каждой итерации к каждому элементу текущего состояния применяются соответствующие правила (если они есть). Примеры:

Треугольник Серпинского
алфавит: F G + −
инициирующее состояние: F−G−G
правила:
F → F−G+F+G−F
G → GG
параметры: угол=120°
F и G рисуют отрезок, + поворачивает на право, - поворачивает на лево.

Кривая Дракона
алфавит: X Y F + −
инициирующее состояние: FX
правила:
X → X+YF+
Y → −FX−Y
параметры: угол=90°
F рисует отрезок, + поворачивает на право, - поворачивает на лево.

Растения и деревья
Море их - даже описывать не буду.

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

https://www.sidefx.com/docs/houdini/nodes/sop/lsystem.html

Имеет инструмент/ноду L-System. Ну и много чего еще - я не особо пользуюсь, но периодически заглядываю и тыкаю. Предпочитаю код - как-то понятнее он мне.
👍1
Algorithmic Botany

https://algorithmicbotany.org

Инструмент для алгоритмической ботаники. Возврат к истокам, так сказать. Не очень удобный UX, но все работет - советую сначала почитать короткий мануал и глянуть примеры. Поддерживает два языка:

cpfg - тупо задаем правило и наслаждаемся (хорошо для простого)
lpfg - С-подобное чудище, удобное для сложных систем

Плюс у него еще куча других файлов для настроек, параметров и прочего.
3
Context Free

https://www.contextfreeart.org/index.html

Тула для процедурного арта. Позволяет достаточно коротким описанием грамматики получить достаточно интересные картинки. Имеет свой язык (CFDG?). Сильно проще, чем предыдущие две. Рекомендую.
4
как-то так я порой вижу все эти chatgpt и ему подобные
😁7👍5🔥1
Вспомнил историю из универских времен. Проходил у нас на факультете CTF иб-шный, а было там две кафедры: больше про железо и больше про ПО. Ну и задача была - выключить противнику доступ к сети. На что чел с нашей (железной) кафедры сидел смотрел на соперников, а потом подошел и выдернул сетевой кабель из их компа.

Победу засчитали, но правила обновили и дальше в турнире не пустили)))
😁94
Так, у меня переезд. Как перееду расскажу что-нибудь интересное, выбирайте очередность (потом про градиенты расскажу после этих двух):
Anonymous Poll
62%
Сплайны
38%
Цветовые пространства
Наткнулся на классный канал https://www.youtube.com/@PracticalEngineeringChannel
👍4
На новой хате остался от бывших хозяев vhs+dvd проигрыватель - теперь
можно пердолить диски (куча их) и кассеты (нет ни одной - надо на барахолке глянуть) и воспроизводить на основе различных повреждений физически верные глитчи.

Когда делал стилизацию видео в Procreate, у меня был комбик tv+vhs с кучей старых кассет, об которые я зарабатывал мигрень, делая реалистичные эффекты под каждое искажение. Хз, вышло ли оно в релиз - дримс вышел очень сильно урезанным по сравнению с тем, что в него планировали засунуть.
2
This media is not supported in your browser
VIEW IN TELEGRAM
И коротко о погоде в Тасмании. Как говорится, если вам (не) нравится тут погода, подождите пол часа.

Сейчас приду в себя и напосчу про сплайны (они выиграли)
😁2
На стиме проходит Automation Fest, где представлена куча игр про автоматизацию и код. Есди вам интересен этот сегмент игр, советую глянуть - там очень много годноты

https://store.steampowered.com/category/automation
4
Так. Я наконец переехал, хотя дома полнейший бардак. Но, пожалуй, начну про сплайны потихоньку писать.
🎉4
Итак.

Сплайн - это составная гладкая кривая, которая как правило задается параметрически.

Пришло это из черчения гладких кривых, когда деревянную планку изгибали, фиксируя в нужных точках, и она под действием напряжения материала изгибалась определенным образом. Очевидно, что разные материалы будут давать разную кривизну ввиду разницы свойств.

Для черчения используются лекала (они же French curve ruler), которых множество, они стандартизированы и можно найти нужную кривую на нужный случай. Очевидно, там не будет крайних и вырожденных случаев.

Математически тоже есть куча описаний, которые различаются порядком, прохождением кривых через точки (или нет), размерностью (линия, плоскость и тд).

Далее буду рассказывать про некоторые конкретные кривые с примерами в desmos по возможности.
8
Интересный (на мой взгляд) оффтопик про lesbian rule.

Есть гибкая линейка (делалась из свинца и применялась масонами по сути как трафарет для снятия кривизны). Одно из ее названий Lesbian rule (потому что с острова Лесбос и линейка, а не потому что то, что вы подумали).

Так вот с ней связана идиома «bend the rule», что пришло из очевидной икры ослов и имеет ближайшим аналогом «закон что дышло - куда повернул, туда и вышло».
7🍓6
Кривая Безье

Самая распространненная и известная из кривых. Была придумана 60 лет назад ребятами из Рено (Безье) и Ситроен (де Кастельжо) независимо друг от друга (ох уж эти комерческие тайны), при этом является частным случаем многочленов Бернштейна, который описал их более 100 лет назад, но это не важно.

Важно, что кривая может быть (и это важно для ее понимания):

1-й степени
Строится от точки A до точки B как

P = A * (1-t) + B * t

то есть просто линейная интерполяция между двумя точками

2-й степени
Строится точками A (опорная), B (контрольная) и C (вторая опорная) как

D = A * (1-t) + B * t
E = B * (1-t) + C * t
P = D * (1-t) + E * t = (A * (1-t) + B * t) * (1-t) + (B * (1-t) + C * t) * t = A * (1-t)*(1-t) + 2 * B * t * (1-t) + C * t * t


3-й степени
Строится соответственно между 4 точками: ABCD, где AD - опорные, BC - контрольные. Формулы по аналогии сами прикиньте

Очевидны закономерности:
1. порядок на единицу меньше числа точек
2. строим отрезки которые движутся между парами точек, а потом еще раз и так до тех пор, пока не останется последний, по которому движется собственно точка, описывающая нашу кривую. То есть степеней может быть сколько душе угодно.

Собственно все - ничего сложного.

Где применяются Безье:
- вся векторная графика (кроме примитивных примитивов типа квадратиков и кружочков, включая шрифты
- кривые для описания переходов, цветокоррекций, анимаций и прочих нелинейностей, где есть зависимость от параметра
- поверхности (ни разу не работал с ними)
- сглаживания/интерполяция временных данных с множеством параметров
- сами придумайте, куда еще их сунуть - например в градиенты, но о них позже напишу.

https://www.desmos.com/calculator/jfgafx5z6j
9
Более интересна тема различных задач на этой (да и на лююой другой) кривой

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

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

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

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