Watabou's Blog

Metaballs. Кляксы

watabou — Sun, 18 Nov 2007 16:46:10 +0000

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

Так как ничего принципиально нового в этом нет, дальше идет только работающий пример.

Metaballs. Вода

watabou — Mon, 05 Nov 2007 10:22:59 +0000

Пару недель отдохнул, можно продолжить с каплями…

Итак, типа капли чернил у нас есть, теперь на основе этого метода сделаем капли воды. Вода отличается от чернил тем, что она прозрачная (глубокомысленно!). А чтобы ее такую прозрачную было все-таки видно, надо ей добавить способность преломлять свет и положить ее (а точнее, конечно, налить) на неодноцветный фон. Изобразить рефракию у нас есть единственный разумный способ – использовать фильтр DisplacemntMapFilter, не делать же полноценный рэй-трэйсинг, в самом деле! В качестве карты для фильтра будем брать спрайт с метаболами, но нужны еще некоторые дополнительные действия.

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

GlowFilter( 0x000000, 1, 16, 16, 2, BitmapFilterQuality.MEDIUM, true )

У серых капель появляется плавный переход цвета от черного к изначальному cреднесерому от границ к центру. Благодаря этому фильтру спрайт капель в качестве карты для фильтра дисплэйсмента и начинает работать как карты рефракции. Сложное предложение, но не знаю как объяснить иначе. Вообще, DisplacementMapFilter – штука мощная, но нельзя сказать, что интуитивно понятно как работающая. Например, сначала я пытался использовать вместо GlowFilter BevelFilter. Вроде тоже что-то искажается, но видно, что неправильно.

Metaballs. Чернила

watabou — Fri, 12 Oct 2007 18:24:28 +0000

Некоторое время назад одна моя знакомая расказала про такое задание на курсах по флэшу, которые она тогда посещала: надо создать анимацию капли воды, разделяющейся на 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 (блик по верхнему левому краю капель).

Post #0

watabou — Tue, 09 Oct 2007 17:26:38 +0000

Это мой не первый даже, а нулевой пост, пробный. Посмотрю как тут все работает, что это за кнопочки и закладочки…
Вот так так, похоже, я буду добавлять ActionScript код:
var empty = new Sprite(); addChild( empty );
Работает!