Рубрики
Без рубрики

Как создать простой физический двигатель в JavaScript – Часть 2

Если вы не читали часть 1, вы можете проверить ее здесь. Теперь, когда мы поняли самые маленькие … Tagged with JavaScript, Tulciory, ShowDev, WebDev.

Если вы не читали часть 1, вы можете проверить ее здесь.

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

Поскольку мы знаем, что F = ma От Smart Boy Newton мы сначала будем работать с ускорением, прежде чем приступить к принудительному.

Что такое ускорение? Что с вами делает ускорение? Что вам нужно, чтобы что -то ускорилось?

« Ускорение – это скорость изменения скорости объекта по времени».

Скорость изменения скорости => ускорение

Какая скорость?

«Скорость – это скорость изменения положения объекта по времени»

Скорость изменения положения => скорость

Мы уже написали изменение позиции в последнем примере кода. Теперь посмотрим, как реализовать ускорение.

Ускорение:

Ускорение может быть 2 типа

  1. Постоянный
  2. Случайный

Постоянное ускорение:

Когда скорость изменения скорости находится в одном и том же направлении, тогда ускорение является постоянным. Хорошо, держись, слишком много технических терминов, Джаггернаут – движется с постоянным ускорением.

Случайное ускорение:

Когда скорость изменения скорости… удерживаться, когда ваш объект не движется по прямой линии, как Jagganaaaat … вы получаете случайное ускорение.

Давайте сначала рассмотрим код для постоянного ускорения

Sketch.js

let ball;

function setup() {
  createCanvas(500, 500);
  ball = new Ball();
}

function draw() {
  background(0);
  ball.move();
  ball.bounce();
  ball.show();
}

Мы просто создадим мяч и напишем 3 функции в классе мяча, чтобы перемещаться, отскочить и показать объект.

Ball.js

class Ball {
  constructor(){
    this.location = createVector(width/2,height/2);
    this.velocity = createVector(0,0);
    this.acceleration = createVector(0,0.5);
  }

  move(){
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
  }

  bounce(){
    if(this.location.x<10){
      this.location.x = 10;
      this.velocity.x = -this.velocity.x;
    }
    else if(this.location.x>width-10){
      this.location.x = width-10;
      this.velocity.x = -this.velocity.x;
    }
    if(this.location.y<10){
      this.location.y = 10;
      this.velocity.y = -this.velocity.y;
    }
    else if(this.location.y>height-10){
      this.location.y = height-10;
      this.velocity.y = -this.velocity.y;
    }
  }

  show(){
    fill(255);
    ellipse(this.location.x , this.location.y , 20 ,20);
  }
}

Вот только 36 строк кода.

Начнем с конструктора

Мы просто инициализируем объект, чтобы начать в центре экрана, со скоростью 0 и ускорением 0,5 на положительной оси Y (что означает вниз).

Далее мы переместим мяч с MOVE () функция Мы уже знаем, что мы можем перемещать мяч с линейным движением, изменив вектор скорости. Но теперь у нас есть дополнительный вектор под названием.

Итак, в соответствии с определением,

Velocity => изменение положения (сумма вектора местоположения на вектор скорости)

Ускорение => изменение скорости (сумма вектора скорости на вектор ускорения)

Технически вы закончили, Bounce () Функция существует, чтобы проверить, попадает ли объект по границам или нет (он довольно эксплуатационен).

Наконец, Show () Функция только показывает объект в его текущем месте (сумма всего)

И вот выход:

Теперь поговорим о Случайное ускорение

Мы возьмем тот же пример

let ball;

function setup() {
  createCanvas(500, 500);
  ball = new Ball();
}

function draw() {
  background(0);
  ball.move();
  ball.bounce();
  ball.show();
}

В Ball.js Класс, мы просто что -то изменим и добавим новые линии

class Ball {
  constructor(){
    this.location = createVector(width/2,height/2);
    this.velocity = createVector(0,0);
    this.limit = 10;
  }

  move(){
    this.acceleration = p5.Vector.random2D();
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
    this.velocity.limit(this.limit);
  }

  bounce(){
    if(this.location.x<10 || this.location.x>width-10){
      this.velocity.x = this.velocity.x * -1;
    }

    if(this.location.y<10 || this.location.y>height-10){
      this.velocity.y = this.velocity.y * -1;
    }
  }

  show(){
    fill(255);
    ellipse(this.location.x , this.location.y , 20 ,20);
  }
}

Теперь P5 предлагает вектор, который является случайным и 2D (что означает только x и y, содержащийся в векторе), так что вам не нужно писать случайную функцию (конечно, вы можете попытаться написать ее самостоятельно).

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

Вместо этого у нас есть предел значение, которое является свойством векторов p5, которое ограничивает все его величины до предельного значения. Мы только что добавили, чтобы наш объект не вышел из -под контроля, ускоряя слишком много.

Мы определенно не хотим, чтобы это произошло

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

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

И вот выход:

Что такое сила? Что вызывает применение силы? Что вам нужно, чтобы добавить силу?

Сила это толчок или тяга на объект с массой, который заставляет его изменять скорость (для ускорения).

Таким образом, у нас есть скорость, у нас есть ускорение, давайте кодируем силу. Держись, где масса тогда??

Да, масса – очень важный термин, который влияет на применяемую силу или примененную. Но если мы предположим, что наши объекты кода – это та же самая масса, которая является «1», так что масса отменяется из уравнения, она становится F

То, что мы только что создали (постоянное ускорение такое же, как и при массе 1)

Теперь мы начнем рассматривать массу. Есть много типов сил, таких как

  • Применяется Сила Анкет
  • Гравитационная Сила .
  • Нормальный Сила Анкет
  • Трэнд Сила Анкет
  • Сопротивление воздуха Сила Анкет
  • Напряжение Сила .
  • Весна Сила.

Сначала увидим, как применить основную силу, силу трения и гравитационная сила.

Основная сила с массой:

Для этого примера мы возьмем 2 объекта (1 с меньшей массой и 1 с большей массой) и применим 2 силы (сила тяжести и силу ветра).

Sketch.js

let ball = \[\];

function setup() {
  createCanvas(600, 600);
  for(var i = 0; i< 2 ; i++){
    ball\[i\] = new Ball(((i/2)+0.25)*width,height/2,i);
  }
}

function draw() {
  background(0);
  for(var i = 0; i

Мы создадим 2 шара и применим силу гравитации и ветра.

Для гравитации мы должны умножить массу объекта, потому что Закон Умного мальчика Ньютона универсальной гравитации утверждает, что Каждая частица привлекает любую другую частицу во вселенной силой, которая прямо пропорциональна продукту их масс и обратно пропорционален квадрату расстояния между их центрами Анкет

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

Ball.js

class Ball {
  constructor(x,y,m){
    this.location = createVector(x,y);
    this.velocity = createVector(0,0);
    this.acceleration = createVector(0,0);
    this.mass = (m+0.5)*2;
  }

  applyForce(force){
    this.f = force.div(this.mass)
    this.acceleration.add(this.f);
  }

  move(){
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
    this.acceleration.mult(0);
  }

  bounce(){
    if(this.location.x<(this.mass_20)/2){
      this.location.x = (this.mass_20)/2;
      this.velocity.x = -this.velocity.x;
    }
    else if(this.location.x>width-(this.mass_20)/2){
      this.location.x = width-(this.mass_20)/2;
      this.velocity.x = -this.velocity.x;
    }
    if(this.location.y<(this.mass_20)/2){
      this.location.y = (this.mass_20)/2;
      this.velocity.y = -this.velocity.y;
    }
    else if(this.location.y>height-(this.mass_20)/2){
      this.location.y = height-(this.mass_20)/2;
      this.velocity.y = -this.velocity.y;
    }
  }

  show(){
    fill(255);
    ellipse(this.location.x , this.location.y , this.mass_20 , this.mass_20 );
  }
}

Этот фрагмент точно такой же, как и ранее, за исключением того факта, что мы должны просто включить общий метод силы.

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

F

Итак,/м

Теперь мы получаем ускоряющуюся силу. Просто добавьте его к скорости.

И вуаля, у нас есть:

Сила трения:

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

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

Просто, сделайте длину скорости 1 и умножьте толщиной другого материала.

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

Sketch.js

let ball;
let liquid;

function setup() {
  createCanvas(600, 600);
  ball = new Ball(width/2,0);
  liquid = new Liquid(0, height/2);
}

function draw() {
  background(0);
    //apply the force of gravity
    let gravity = createVector(0,0.2);
    gravity.mult(ball.mass);
    if(ball.inside(liquid)) {
      let friction = ball.velocity.copy();
      friction.normalize();
      let c = -0.5;
      friction.mult(c);
      ball.applyForce(friction)
    }
    ball.applyForce(gravity);
    ball.move();
    ball.bounce();
    liquid.show();
    ball.show();
}

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

Если расположение шарикового объекта находится внутри жидкости, то мяч испытывает силу трения + гравитация.

Ball.js

class Ball {
  constructor(x,y){
    this.location = createVector(x,y);
    this.velocity = createVector(0,0);
    this.acceleration = createVector(0,0);
    this.mass = 4;
  }

  inside (liquid) {
    if(this.location.y >= liquid.location.y) {
      return true;
    }
    else {
      return false;
    }
  }

  applyForce(force){
    this.f = force.div(this.mass)
    this.acceleration.add(this.f);
  }

  move(){
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
    this.acceleration.mult(0);
  }

  bounce(){
    if(this.location.x<(this.mass*20)/2){
      this.location.x = (this.mass*20)/2;
      this.velocity.x = -this.velocity.x;
    }
    else if(this.location.x>width-(this.mass*20)/2){
      this.location.x = width-(this.mass*20)/2;
      this.velocity.x = -this.velocity.x;
    }
    if(this.location.y<(this.mass*20)/2){
      this.location.y = (this.mass*20)/2;
      this.velocity.y = -this.velocity.y;
    }
    else if(this.location.y>height-(this.mass*20)/2){
      this.location.y = height-(this.mass*20)/2;
      this.velocity.y = -this.velocity.y;
    }
  }

  show(){
    fill(255);
    ellipse(this.location.x , this.location.y , this.mass*20 , this.mass*20   );
  }
}

Inside () Функция принимает жидкий объект в качестве параметра и проверяет, находится ли место Y -объекта y -объекта более или равным месту жидкости Y. Если расположение y мяча больше, чем расположение y жидкого объекта, то мяч находится внутри жидкости и возвращает True.

А затем в эскизе, если Inside () Функция возвращает true, шаричный объект получает силу трения, добавленную как

let friction = ball.velocity.copy();
friction.normalize();
let c = -0.5;
friction.mult(c);
ball.applyForce(friction)
  • Первоначально мы сделаем копию скорости объекта шарика.
  • Нормализуйте вектор скорости (что означает, что его величина равна 1 или просто сделать длину вектора быть 1).
  • Получите значение ‘c’, c – коэффициент вязкости.
  • Теперь умножьте нормализованный вектор на коэффициент вязкости.
  • Наконец, примените эту силу к объекту.

И ваш окончательный результат:

И там это у тебя, СИЛА .

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

Планетарные орбиты

И в предстоящих дискуссиях мы пройдем

  • Жидкая физика
  • Жесткая физика тела
  • Мягкая физика тела

Оригинал: “https://dev.to/soorajsnblaze333/how-to-create-a-simple-physics-engine-in-javascript-part-2-4gnd”

Читайте ещё по теме: