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

Odpowiedz Nowy wątek
2019-05-05 12:20
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);
...
edytowany 2x, ostatnio: Kubs, 2019-05-05 12:23
Wkradł się błąd. Powinno być (Math.PI * 2) / 50; - Kubs 2019-05-06 20:39

Pozostało 580 znaków

2019-05-05 12:26
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.


edytowany 3x, ostatnio: Patryk27, 2019-05-05 14:11

Pozostało 580 znaków

2019-05-06 20:56
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.

edytowany 2x, ostatnio: Kubs, 2019-05-06 20:59

Pozostało 580 znaków

2019-05-06 21:09
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 += ...).

edytowany 5x, ostatnio: Patryk27, 2019-05-07 07:56
@Patryk27: niespójne: jeśli (Math.PI * 2) / 3 równa się 120, to Math.PI * 2 nie może równać się 180. - Silv 2019-05-06 23:53
whoops, oczywiście - miało być sto dwadzieścia, thanx :-) - Patryk27 2019-05-07 07:55
@Patryk27: dzięki. A dla rozjaśnienia jeszcze tej kwestii mógłbyś podać jakiś link/informacje od czego zacząć by to zrozumieć? - Kubs 2019-05-07 23:10
@Kubs: sugerowałbym poczytać o trygonometrii - wtedy zrozumiesz skąd wynikają te wszystkie zależności, dlaczego 2*Pi to akurat 360 stopni czy też w jaki sposób sin + cos pozwalają rysować zarówno trójkąty, jak i okręgi :-) Zaczniesz też rozumieć wzory podane na stronie zalinkowanej przez @Delor. - Patryk27 2019-05-07 23:13
Dobrze, bardzo doceniam. Dziękuje. - Kubs 2019-05-07 23:15

Pozostało 580 znaków

2019-05-06 21:18
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.

Dziękuje. Również za link. Tam podane są informacje trudne do zrozumienia dla mnie. Czy jest tam coś konkretnego na co muszę zwrócić przede wszystkim uwagę? Jakiś punkt wyjściowy? - Kubs 2019-05-07 23:09
Początek czyli 'Definicja', 'Przejście od układu biegunowego do kartezjańskiego' oraz miara łukowa kąta. Tyle wystarczy do narysowania spirali. - Delor 2019-05-08 00:51
Fajnie, spróbuje. - Kubs 2019-05-08 11:17
@Delor: czyli to /1 narysuje linie prostą w poziomie od końca promienia do środka kręgu (kąt 0)? - Kubs 2019-05-10 18:23
Kąt 0 więc pierwszy punkt będzie w odległości 0.75 a każdy kolejny o 0.75 dalej od środka. - Delor 2019-05-10 21:35

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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