Сочейки към движение.

Нека се върнем на един от първите ни примери, този с обекта Mover, който се ускорява към мишката.

Може би забелязваш, че повечето фигури, които рисуваме, са окръжности. Това е удобно по ред причини, една от които е, че не трябва да взимаме предвид ротацията. Ако завъртиш един кръг, той ще изглежда по съвсем същия начин. Идва обаче време в живота на всеки програмист, който се занимава с движения, когато трябва да нарисува нещо на екрана, което сочи към посоката на движението. Може би рисуваш мравка, или кола, или космически кораб. А когато казваме, че "сочи към посока на движението", имаме предвид "завърта се според вектора на скоростта". Скоростта е вектор с х и y компоненти, но за да въртим в ProcessingJS, ни трябва ъгъл. Нека отново да начертаем нашата тригонометрична диаграма с обект вектор на скоростта:

Добре. Ние знаем, че определението за тангенс е:

т а н г е н с (ъ г ъ л) = \frac{с к о р о с т_{y}}{с к о р о с т_{x}}

Проблемът с горното е, че знаем скоростта, но не знаем ъгъла. Трябва да намерим ъгъла. Тук на помощ ни идва една специална функция, позната като обратен тангенс, наричена още аркустангенс или tan-1. (Има и обратен синус и обратен косинус.)

Ако тангенсът на някаква стойност "а" е равен на стойност "b", тогава и обратния тангенс от "b" е равен на "а" . Наример:


ако	$т а н г е н с (a) = b$ ‍
тогава	$a = а р к у с т а н г е н с (b)$ ‍

Виждаш ли по какъв начин стават обратни стойностите? Това ни позволява да намерим ъгъла по-горе :


ако	$т а н г е н с (ъ г ъ л) = с к о р о с т_{y} / с к о р о с т_{x}$ ‍
тогава	$ъ г ъ л = а р к у с т а н г е н с (с к о р о с т_{y} / с к о р о с т_{x}$ ‍)

След като имаме формулата, да видим къде трябва да я поставим във функцията display() на нашия движещ се обект. Забележи, че в ProcessingJS функцията за аркус тангенс се нарича atan(). JavaScript също има функция Math.atan() (както и всички основни тригонометрични функции), но ние ще използваме функциите, които идват от ProcessingJS.

Mover.prototype.display = function () {
  var angle = atan(this.velocity.y / this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

Горният код е доста близо и почти работи. Но все още имаме един голям проблем. Да речем, че по-долу имаме изобразени два вектора на скоростта.

Макар че изглеждат подобни, двата вектора сочат в съвсем различни посоки – в противоположни посоки, всъщност! Обаче ако приложим нашата формула, за да получим ъгъла на всеки вектор...

V1 ⇒ ъгъл = atan(3/-4) = atan(-0,75) = -0,644 радиана = -57 градуса
V2 ⇒ ъгъл = atan(-3/4) = atan(-0,75) = -0,644 радиана = -57 градуса

…получаваме един и същи ъгъл за всеки вектор. Това не може да е правилно и за двата; векторите сочат в различни посоки! В компютърната графика това е доста често срещан проблем. Вместо да използваме функцията atan() заедно с купчина условни твърдения, за да вземем предвид положителните/отрицателните случаи, в ProcessingJS (както и в JavaScript и в почти всички програмни среди) има една приятна функция, наречена atan2(), която го прави вместо нас.

Mover.prototype.display = function () {
  var angle = atan2(this.velocity.y, this.velocity.x);

  stroke(0, 0, 0);
  fill(127, 127, 127);
  pushMatrix();
  rectMode(CENTER);
  translate(this.position.x, this.position.y);
  rotate(angle);
  rect(0, 0, 30, 10);
  popMatrix();
};

За да опростим нещата още повече, обектът PVector предоставя функция, наречена heading(), която извиква atan2() вместо нас, за да можем да получим ъгъл на двуизмерна посока в радиани за всеки PVector.

Ето как изглежда програмата ни с всички неща. Премести мишката върху екрана, за да видиш как се върти!

Курсът "Компютърни симулации на физични явления" е производeн на "Природата на кода" от Даниел Шифман, използвана от Creative Commons Attribution-NonCommercial 3,0 Unported License.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.