Fő tartalom

Kövesd a mutatót!

Térjünk vissza az egyik első példánkhoz, ahol a Mover objektum az egér irányába gyorsult! (A programban található megjegyzés: 1. Dan Shiffman, natureofcode.com példája alapján.)

Megfigyelheted, hogy eddig majdnem mindig köröket rajzoltunk. Ez sok szempontból nagyon kényelmes, többek között azért is, mert nem kell foglalkozni a forgatás kérdésével. Ha forgatjuk a kört, a kinézete mit sem változik. De mindig eljön az a pont a programozó életében, amikor valami olyat szeretne rajzolni, ami a mozgás irányába mutat. Mondjuk épp egy hangyát, autót vagy űrhajót rajzolsz. És amikor azt mondjuk, „a mozgás irányába mutat”, akkor az azt jelenti: „a sebességvektor szerint forog”. A sebesség egy vektor,

x

és

y

komponensekkel, de ahhoz, hogy ProcessingJS-ben forgatni tudjunk, egy szögre van szükségünk. Rajzoljuk csak ide még egyszer a trigonometria ábránkat az objektum sebességvektorával:

Idáig rendben vagyunk. Tudjuk azt is, hogy a tangens definíciója:

t a n g e n s (s z ö g) = \frac{s e b e s s é g_{y}}{s e b e s s é g_{x}}

Ezzel az a baj, hogy ismerjük a sebességet, de nem ismerjük a szöget. Az egyenletet a szögre kell megoldani. Itt jön be a képbe egy speciális függvény, a tangens inverz függvénye, amit arkusz-tangensként is ismerünk. (Létezik a szinusz és a koszinusz függvényeknek is inverze.)

a

-nak tangense

b

, akkor a

b

arkusz-tangense egyenlő

a

-val. Például:


ha	$t a n g e n s (a) = b$ ‍
akkor	$a = a r c t a n g e n s (b)$ ‍

Látod, hogy az inverz hogyan működik? Így a fenti összefüggés segítségével meg tudjuk határozni a szöget:


ha	$t a n g e n s (s z ö g) = s e b e s s é g_{y} / s e b e s s é g_{x}$ ‍
akkor	$s z ö g = a r c t a n g e n s (s e b e s s é g_{y} / s e b e s s é g_{x}$ ‍)

Most, hogy már megvan a képletünk, nézzük meg, hova kellene beilleszteni a mover display() függvényébe. Figyeld meg. hogy ProcessingJSben az arcusz-tangens függvény neve atan(). JavaScriptben a függvény neve Math.atan().

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

A fenti program már nagyon közel van a jó megoldáshoz, és majdnem működik. Viszont még mindig van egy nagy gondunk. Nézzük a lenti ábra két vektorát!

Látszólag hasonlóak, de a két vektor más-más irányba mutat – ebben az esetben ellenkező irányba! Ha viszont a képletet alkalmazzuk a vektorok szögének meghatározására...

V1 ⇒ szög = atan(3/-4) = atan(-0,75) = -0,644 radián = -57 fog
V2 ⇒ szög = atan(-3/4) = atan(-0,75) = -0,644 radián = -57 fok

...ugyanazt a szöget kapjuk mindkét vektor esetében. Ez nem lehet igaz mindkettőre, hiszen ellenkező irányba mutatnak! Az a helyzet, hogy ez a probléma a számítógépes grafikában gyakran előbukkan. Ezért létrehoztak egy kényelmes függvényt a ProcessingJSben (valamint a JavaScriptben és gyakorlatilag majdnem minden más programnyelvben) az atan() helyett: az atan2() használata elvégzi helyetted a bonyolult feltételes utasítások sorozatát a különböző pozitív/negatív kombinációk kiértékelésével.

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

Hogy még tovább egyszerűsítsük a dolgokat, maga a PVector objektum tartalmaz egy heading() nevű függvényt, ami meghívja az atan2() függvényt, ezáltal megkapod tetszőleges PVector 2D irányszögét radiánban.

Így néz ki az összerakott program. Mozgasd az egeret, és nézd, hogy forog! (A programban található megjegyzés: 1. sor: Dan Shiffman, natureofcode.com példája alapján.)

Ez a „Természetes szimulációk" tananyag a Daniel Shiffman által készített „The Nature of Code” alapján készült, a Creative Commons Attribution-NonCommercial 3.0 Unported License szerint.

Szeretnél részt venni a beszélgetésben?

Jelentkezz be

Rendezés:

Még nincs hozzászólás.

Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.

Programozás

Tantárgy/kurzus: Programozás > 5. témakör

Szeretnél részt venni a beszélgetésben?