Записки
     из интернета

Имитация движения дерева

17 Январь 2010 . Alex пишет -

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

- при перемещении ствола перемещается все дерево;

- при перемещении ветви перемещаются все ее дочерние ветви.


Но чтобы сообразить, на какую величину должна перемещаться каждая часть дерева, придется немного подумать. Сначала я решил, что ствол движется гораздо меньше ветвей кроны, но это не так. Чтобы убедиться в этом, воткните в землю ветку (обрезанную в точке ветвления) во время ветра. Вы увидите, что повеличине смещения она практически не отличается от ствола дерева. Ветка обладает большей гибкостью, но площадь ее поверхности (если у нее нет листьев) меньше, чем у ствола, поэтому давление ветра тоже пропорционально уменьшается.

Ветвь кроны дерева перемещается сильнее, чем ствол, просто потому, что все ветви в нижележащей иерархии тоже движутся и величина их перемещений суммируется при перемещении всего дерева. Вот так! Каждый день узнаешь что-то новое.

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

Вместо удаления каждого обработчика onEnterFrame, как это было сделано в исходном коде построения дерева, мы изменим соответствующую строку grow():

delete (this.onEnterFrame);

и заменим ее назначением функции sway() после «выращивания» ветви:

this.onEnterFrame = sway;

Чтобы имитировать эффект ветра, достаточно создать функцию sway(), которая в каждом из кадров будет прибавлять к текущей ветви дополнительное смещение:

function sway () {

this._rotation += wind;

}

Величина смещения должна изменяться; один из способов добиться желаемого эффекта выглядит так:

function sway() {

wind += windEffect:

if (wind > windStrength) {

wind = -wind;

}

this._rotation += wind:

}

Разумеется, мы должны задать начальные параметры ветра. Для нашего примера я подобрал следующий набор параметров:

// Параметры дерева

var angle = 100:

var branch = 5: „

var trunkThickness = 8;

var trunkLength = -100;

var branchSize = 0.7;

// Параметры ветра

var windEffect = 0.05;

var windStrength = 1;

var wind = 0;

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

Хотя в представленном решении задействована пара неочевидных моментов, под «трюком» здесь следует понимать скорее общий подход. Копирование живой природы или других объектов, оказавшихся под рукой, — испытанный путь поиска новых идей и решений для Flash-дизайна.

Flash является средой графического программирования; именно это обстоятельство делает возможным такие эксперименты, как в нашем решении. Вы можете написать программу и немедленно получить графическую обратную связь. Если потребуется создать несколько деревьев, поэкспериментируйте и посмотрите, приведет ли применение общего набора параметров ветра к более реалистичному эффекту. Мне кажется, что небольшие различия между деревьями обеспечивают больший реализм, особенно если в направлении ветра уже находятся другие деревья.

Рубрики: Флеш |

Комментариев нет

Комментариев нет.

Оставить трекбек со своего сайта.
адрес - http://www.free-notes.ru/wp-trackback.php?p=122

Оставить комментарий

Вам нужно войти для комментирования.