Взлом физики и JavaScript (Часть 3). Пружины и кое-что другое.

Перевод статьиHack Physics and JavaScript (part 3) — Springs and some other things.
Автор статьи: Rachel Smith.

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

Вторая часть получилась несколько перенасыщенной математикой, и поэтому мне захотелось, немного изменить темп заключительной публикации на эту тему. Здесь мы поговорим о том, как можно обойти трудные моменты из области физики амортизаторов и в тоже время создать анимацию непосредственно связанную с пружинным эффектом на canvas. Кроме того мне хотелось бы немного развенчать некоторые мнения, касающиеся кодирования моих CodePen проектов.

Вот некоторые из вещей, о которых меня зачастую спрашивают или говорят.

  • «Откуда Вы знаете что, а самое главное, как нужно сделать в CodePen?»
  • «Вы, вероятно, знаток математики!»
  • «Я с математикой не дружу, поэтому мне никогда не сделать что-нибудь подобное.»
  • «Посоветуйте, что нужно почитать, чтобы делать такие же вещи как и Вы?»

Кое-что реальное про меня.

  • Если не вдаваться в подробности, то мои познания в математике намного меньше, чем это может показаться на первый взгляд.
  • Зачастую я просто не знаю, что поместить в мои CodePen проекты и в 90% случаев конечный результат является случайным «открытием», полученным в ходе безделья.
  • На самом деле я не прорабатывала уйму сложного материала перед тем, как создавать свои canvas проекты или просто использовать элемент canvas.

Еще несколько фактов обо мне.

  • Я обладаю таким навыком сетевого поиска, что могу фильтровать всю массу «нарытого» материала, не читая его, пока не наткнусь на то, что мне нужно.
  • Я абсолютно без боязни беру чей-то чужой код и начинаю «колдовать» над ним, пока не получится что-нибудь подходящее.

Зачем я рассказываю вам об этом? Ну, в первую очередь потому, что именно таким образом мне удалось совладать с физикой пружин и получить код, который я использую для данного поста. Я, если честно, и понятия не имела, как создать код для анимации пружинного эффекта, до того, как приступила к написанию этой серии постов. Именно поэтому я решила довести до вас такие подробности, дорогой читатель, перед тем, как поделиться результатом.

Шаг первый — Google.

В процессе обработки результатов Google поиска по запросу "spring fisics javascript» (*«физика пружин javascript») я наткнулась на прекрасную статью Бурака Кэнбера (Burak Kanber) «Использование физики в JavaScript: Подвеска машины — Часть 1 (Пружина, Масса, Демпфер)», где он, как я полагаю, дает очень хорошее и детальное пояснение теории движения пружин. Я написала «полагаю» потому, что должна в кое-чем признаться — я совсем не читала эту статью.

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

Шаг второй — просто подшаманьте чужой код.

Итак, в конце упоминаемой выше статьи имеем JS fiddle пример, отображающий результат действия уравнения пружины. Я просто скопировала этот код и сбросила его во вновь созданный CodePen проект, чтобы иметь возможность доработать его в нужном направлении, т.е. под себя. Вот здесь и начинается самое главное. Именно на этом этапе, как мне кажется, многие останавливаются. Скажите честно, сколько времени вы проводите рассматривая все эти чудные вещи — результаты чужих работ в CodePen, мечтая о том, что вы тоже могли бы сотворить что-нибудь подобное без серьезной возни с кодом типа фокинга и ему подобных вещей. Лично я в свое время убивала таким образом уйму времени. Основным камнем преткновения здесь является страх напортачить и испортить чей-то уже работающий код. «Вот сейчас влезу, наломаю дров, и целый день буду чувствовать себя идиотом» — думаете вы. Ну, или что-нибудь в этом роде. Но поймите, что иного пути чему-нибудь научиться нет. Поэтому просто возьмитесь за дело и все у вас получится. Начните действовать. Не оставляйте ваши мечты мечтами, сдеайте их реальностью!

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

// вот вся магия пружины в цикле — к примеру, х выступает в роли свойства объекта
// spring и damper — это составляющие k (жесткости), а b (константа затухания)
var spring_x = k * ( (block.x — target.x));
var damper_x = b * ( block.vx );
// обновляем
accelerationblock.ax = ( spring_x + damper_x ) / block.mass;
// обновляем
velocityblock.vx += block.ax * (t/1000);
// обновляем
positionblock.x += block.vx * (t/1000);

Я, честно говоря, даже не догадываюсь что такое «константа затухания» и к чему здесь «жесткость». Мне как-то все равно. Главное, что все работает!

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

К положению вот этого круга, например.

See the Pen Springing circle by Rachel Smith (@rachsmith) on CodePen.

Извиняюсь за урезанный вид, вот ссылка на полную картину.

К радиусу этих кругов.

See the Pen Springing circle radii by Rachel Smith (@rachsmith) on CodePen.

Извиняюсь за урезанный вид, вот ссылка на полную картину.

К кривизне этих линий. (И это даже не canvas, это обычный SVG).

See the Pen Springy svg curves by Rachel Smith (@rachsmith) on CodePen.

Извиняюсь за урезанный вид, вот ссылка на полную картину.

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

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *