Признание: На самом деле я не очень хорошо знаю физику. Сказать, что я обладаю базовыми знаниями – это сильно преувеличить. Последний раз я знала что-то достаточно сложное по физике 11 лет назад. Мне было 17, и я знала ровно столько, чтобы получить твердую четверку на выпускных экзаменах в школе, после которых я немедленно выкинула всю эту информацию из своей головы, чтобы освободить место для более важных вещей, таких как тексты песен из альбома «Nellyville» Nelly.

Но позже я поняла, что я могла бы использовать некоторые физические расчеты, чтобы создавать крутую анимацию с canvas. Черт побери! К счастью, я довольно быстро осознала, что мне не обязательно вспоминать программу старших классов. Достаточно просто схитрить.

Банальная физика

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

Векторы

Вектор – это математический объект, характеризующийся величиной и направлением. Скорость и ускорение – это векторы. Если вы скажете, что собираетесь ехать в северо-восточном направлении со скоростью 35 миль в час, вы опишете вектор.

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

Наверняка, вы уже знаете, что такое скорость, но я все равно вам расскажу. Вектор скорости – это вектор, который состоит из скорости и направления. Когда мы воспроизводим скорость в JavaScript, мы делим ее на два вектора – скорость в направлении x и скорость в направлении y. Здесь мы имеем дело с пикселями и анимацией JavaScript, поэтому мы можем описать нашу скорость с точки зрения количества пикселей в кадр. Квадрату в примере присвоена скорость в направлении х в размере 2 пикселей на каждый кадр, и скорость в направлении y в размере 2 пикселей на каждый кадр. В результате мы получаем линейное диагональное движение.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

// position
var x = 0;
var y = 0;
// velocity
var vx = 2;
var vy = 2;

// animation loop
function animate() {
  // clear canvas
  ctx.clearRect(0, 0, width, height);
  // draw square
  ctx.fillRect(x,y,20,20);
  
  // update position with velocity
  x += vx;
  y += vy;
  requestAnimationFrame(animate);
  
  // if square is out of view reset position to the start
  if (y > height || x > width) {
    x = 0;
    y = 0;
  }
}

animate();

Создаем ускорение с JavaScript

Ускорение – это коэффициент изменения скорости объекта. И как же мы воспроизводим это в JavaScript? У нас есть скорость vx и vy, и мы можем добавить ускорение в направлении x или y в каждом кадре. То есть, если ускорение равно 0,5 пикселей, мы добавим 0,5 пикселя к скорости x и скорости y в каждом кадре. Это заставит наш квадратик ускориться.

Невероятно простой и забавный пример – давайте сделаем фонтан из частиц!

Фонтан из частиц – это первый эффект банальной физики, который я анимировала. В частности, я сделала его с помощью Flash и ActionScript, но сейчас мы можем сделать это с JavaScript и canvas. По сути, я планирую использовать объект «частица» для создания фонтана.

Чтобы сделать фонтан, нам нужно сгенерировать некоторое количество частиц. Каждая частица должна иметь свое положение и скорость (vx и vy). Начальной позицией мы сделаем центр canvas, после чего зададим произвольную скорость частиц, чтобы они «распылялись» из нашего фонтана.

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);
}

В результате должно получиться что-то вроде этого (возможно, вам придется нажать «rerun», чтобы их увидеть).

Частицы просто распыляются вверх и никогда не падают вниз. Нам нужно добавить немного «силы притяжения», чтобы заставить частицы падать. Мы уже знаем, как это сделать, потому что силу притяжения, по сути, можно воспроизвести с помощью ускорения в направлении y (вниз). Давайте установим значение силы притяжения (ускорения) равное 0,04 пикселя. Также мы немного уменьшим прозрачность каждого кадра, чтобы каждая частица в результате растворялась. После этого мы сделаем нулевую прозрачность в точке, в которой мы будем «возвращать» нашу частицу в центр фонтана.



Таким образом, у нас получится бесконечный фонтан частиц! А во второй части, мы запустим в полет нашего первого пингвина.