Metaballs. Чернила

Некоторое время назад одна моя знакомая расказала про такое задание на курсах по флэшу, которые она тогда посещала: надо создать анимацию капли воды, разделяющейся на 2 капли. Или наоборот, анимацию двух капель соединяющихся в одну. Целью задания было продемонстрировать еще раз принципы работы Шэйп Твина и показать, что нельзя такую анимацию сделать с помощью всего двух ключевых кадров (в начальном кадре один кружок, в конечном два). Меня же заинтересовало как это сделать так, чтобы капли были действительно выглядели как капли, чтобы в промежуточных кадрах были не вариации на тему восьмерки, а гладкий, “жидкий” объект. Такие объекты называются metaballs. Единственный перевод этого термина, который я нашел – метасферы.

Как это сделать? Строить по формулам слишком медленнно. Да и не нужно, учитывая что нам нужка картинка, а не точное математическое описание. Можно воспользоваться специальным флэшевым механизмом для интенсивных, но не очень точных вычеслений – растровыми фильтрами. Идея очевидная: берем просто сферы, проще говоря круги, и сглаживаем их, получаем метасферы. Далеко отстоящие друг от друга круги так и останутся кругами, а между находящимися рядом или пересекающимися круги должны появиться плавные переходы. За неимением сглаживающего фильтра придется воспользоваться комбинацией тех, что есть. Сначала размываем круги с помощью BlurFilter, затем увеливаем контраст по альфа-каналу с помощью фильтра ColorMatrixFilter, этим мы убираем размытость, но сохраняем сглаженность. Соответствующая часть кода:

drops.filters = [
new BlurFilter( 16, 16, 2 ),
new ColorMatrixFilter( [
1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, 16, -2048] )
];

ColorMatrixFilter можно заменить методом treshold или использовать ColorTransform, но код, на мой взгляд, будет выглядеть хуже.

Ниже реализация, в ней для динамики круги немного двигаются и немного меняют размер. Кроме того добавлен BevelFilter (блик по верхнему левому краю капель).

Advertisement