Взлом физики и JavaScript (Часть 1).

Перевод статьиHack Physics and JavaScript (part 1)
Автор статьи: Rachel Smith.

Признание: Я на самом деле не большой знаток физики и было бы преувеличением отнести мои познания в этой области хотя бы к базовому уровню. Если мне не изменяет память, то что-нибудь более и менее серьезное из физики я могла знать около 11 лет назад. Когда мне было семнадцать я знала ровно столько, сколько нужно было для сдачи школьного экзамена по физике на 4 с плюсом, после которого я тотчас же стерла эту информацию из своей памяти для того, чтобы освободить там место для более актуальных на тот момент вещей типа текстов песен из альбома Nelly "Nellyville".

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

Взлом физики.

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

Векторы.

Вектор — это математический объект, обладающий величиной и направлением. Такие понятия как векторная скорость и ускорение, по сути, являются векторами. Если вы, допустим, говорите, что двигаетесь в направлении северо-востока со скоростью 70 км/час, то вы, можно сказать, описываете вектор (*в определенный момент времени).

Создаем скорость с помощью JavaScript.

Вы, вероятно, уже знаете, что такое векторная скорость, но позвольте вам напомнить, что это вектор, состоящий из скалярной величины скорости (*имеющей место в определенный момент времени) и направления. Моделируя векторную скорость средствами JavaScript, мы раздваиваем ее на два вектора: скорость в направлении оси X и скорость в направлении оси Y. В данном случае мы имеем дело с пикселями и JavaScript анимацией, поэтому для описания скорости будем использовать такую единицу измерения как количество пикселей за кадр. В представленном ниже примере квадрату задана векторная скорость, состоящая из скорости по оси X 2 пикселя за кадр и скорости по оси Y тоже 2 пикселя за кадр. В результате имеем линейное движение по диагонали.

See the Pen Velocity with JavaScript by Rachel Smith (@rachsmith) on CodePen.

Создаем ускорение с помощью JavaScript.

Ускорение представляет собой частоту изменения векторной скорости объекта. Но как смоделировать это в JavaScript? В нашем примере векторная скорость выражена переменными vx и vy, таким образом, мы можем добавить ускорение по каждому из двух направлений (X и Y) в каждом кадре. Давайте возьмем ускорение равным 0,5 пикселя, что заставит квадрат двигаться быстрее.

See the Pen Acceleration with JavaScript by Rachel Smith (@rachsmith) on CodePen.

Простейший и забавнейший пример — создаем фонтан частиц!

Моей первой анимацией, в которой я впервые применила так называемый взлом физики, был фонтан из частиц. Обычно я создавала подобные вещи с помощью Flash и ActionScript, однако сейчас мы можем все это реализовать на JavaScript и canvas. Здесь для создания фонтана я буду использовать объект Particle (*в переводе с английского «частица»). Если вам не совсем понятен код, применяемый здесь для рисования частиц, советую сначала ознакомиться с моим постом, объясняющим этот процесс.

Итак, для создания фонтана нам понадобиться сгенерировать несколько частиц, каждая из которых нуждается в координатах и скорости (vx и vy). Отправной точкой у нас будет центр канвы, из которого мы, посредством задания случайных величин скорости частицам, заставим наш фонтан биться.

function Particle(x, y, vx, vy, size, color, opacity) {

this.update = function() {
x += vx;
y += vy;
}

this.draw = function() {
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.fillRect(x, y, size, size);
}
}

function createParticle(i) {
// initial position in middle of canvas
var x = width*0.5;
var y = height*0.5;
// randomize the vx and vy a little — but we still want them flying 'up' and 'out'
var vx = -2+Math.random()*4;
var vy = Math.random()*-3;
// randomize size and opacity a little & pick a color from our color palette
var size = 5+Math.random()*5;
var color = colors[i%colors.length];
var opacity = 0.5 + Math.random()*0.5;
var p = new Particle(x, y, vx, vy, size, color, opacity);
particles.push(p);
}

Результатом выполнения данного кода будет что-то вроде этого (чтобы его увидеть, вам, возможно, понадобиться нажать кнопку "return").

See the Pen Particle fountain — step 1 by Rachel Smith (@rachsmith) on CodePen.

Эти частицы постоянно «распыляются» только вверх и не падают. Для того, чтобы направить их траекторию вниз, нам нужно добавить немного гравитации. В принципе, мы уже знаем как это сделать, поскольку гравитацию можно просто сымитировать с помощью ускорения по оси Y (т.е. вниз). Что ж, давайте установим величину гравитации (ускорения) равной 0.04px. К тому же, всем частицам мы постепенно (в каждом кадре) будем добавлять свойство прозрачности, что заставит их как бы растворяться в пространстве. Далее, после исчезновения нашей частицы нам остается лишь перезапустить ее снова, это достигается путем проверки значения прозрачности объекта. То есть, как только прозрачность частицы будет равна нулю, мы перезапускаем ее из центра фонтана. Таким образом получаем нескончаемый фонтан частиц!

See the Pen Particle fountain — with gravity! by Rachel Smith (@rachsmith) on CodePen.

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

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

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

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