Rysowanie spirali w canvas, jak wykonuje się ten kod?

0

Witajcie,
jak działa tu Math.PI - dlaczego nie wpisana jest po prostu wartość 3.14
oraz
jak wykonuje się ten kod Math.cos (angle) i Math.sin (angle)

Kod ten rysuje w canvas spirale.

...
var radius = 0;
var angle = 0;
 for (var n = 0; n < 150; n++)  {
             radius += 0.75;
             angle += (Math.PI *2/) 50;
             var x = canvas.width /2 + radius *Math.cos (angle);
             var y = canvas.height /2 + radius *Math.sin (angle);
             context.lineTo (x, y);
...
2

jak działa tu Math.PI - dlaczego nie wpisana jest po prostu wartość 3.14

To trochę jak gdybyś zapytał dlaczego zostało wykorzystane Math.sin(), a nie "po prostu" rozwinięcie z szeregu Taylora - Math.PI jest bardziej precyzyjne oraz czytelniejsze.

jak wykonuje się ten kod Math.cos (angle) i Math.sin (angle)

Jest to równanie parametryczne okręgu z drobną zmianą: radius zwiększa się z każdym obrotem pętli, przez co ostatecznie tworzy się spirala, a nie zwyczajny okrąg.

0

Dzięki Patryk,
zastanawiam dlaczego gdy zmienię tą część kodu


angle += (Math.PI *2) / 50;

na

angle += (Math.PI *2 ) / 1;  // i potem /2

to mam kolejno jedną prostą poziomą linię, a potem drugą prostą poziomą linię doklejoną do tej pierwszej.

Dopiero przy / 3 tworzy się trójkąt przypominający przycisk play.

0

Zmieniając wartość tej stałej wpływasz na kąt między poszczególnymi rysowanymi liniami:

  • przy (Math.PI * 2) / 2 masz 180 stopni (1 radian) czyli w efekcie otrzymasz dwie linie nachodzące na siebie (a dokładniej: otrzymałbyś, gdyby nie radius += 0.75;),
  • przy (Math.PI * 2) / 3 masz 120 stopni, czyli w efekcie tworzy się trójkąt równoboczny (a dokładniej: tworzyłby, gdyby nie radius += ...).
2

Math.PI *2 to 360°.
(Math.PI *2) / 50 to 1/50 pełnego kąta.
(Math.PI *2) / 1 oznacza że za każdym razem dostajesz ten sam kąt.
(Math.PI *2) / 2 to skoki co 180°.
Zrozumienie zacznij od przeczytania o tym.

1 użytkowników online, w tym zalogowanych: 0, gości: 1