Zykloidulus (js-Framework)

Inver­si­on bzw. Spie­ge­lung einer Kur­ve am Kreis. Mit den Funk­tio­nen mei­ner js-Klasse wer­den die Kur­ven in den HTML-Canvas gezeichnet.

Im Mai 2020 begann ich, „from scratch“ einen Funk­ti­ons­plot­ter zu pro­gram­mie­ren, wel­cher den HTML-Canvas als Aus­schnitt in der kom­ple­xen Zah­len­ebe­ne betrach­tet. Bei der sich drau­ßen aus­brei­ten­den Pan­de­mie war das eine gute Opti­on, mir die Zeit zu ver­trei­ben und dabei noch etwas zu ler­nen — über Java­script und über kom­ple­xe Mathe­ma­tik. Der Grund war auch, dass ab einer gewis­sen Kom­ple­xi­tät Excel ein­fach nicht mehr aus­reicht, um ver­nünf­ti­ge Dia­gram­me zu zeich­nen. Vor allem, wenn es genau wer­den soll und die Zeich­nun­gen spä­ter wei­ter­ver­ar­bei­tet wer­den sollen.

Die ers­ten Hür­den wie das umrech­nen der Bild­schirm­ko­or­di­na­ten zu Zeich­nungs­ko­or­di­na­ten und zurück sowie das Hand­ling bei Ände­rung der Bild­schirm­grö­ße lös­te ich mit einem Objekt »View«, das zwi­schen den Koor­di­na­ten­sys­te­men ent­spre­chend umrech­net und auch ein Ras­ter anzei­gen kann.

Punk­te wer­den als Objek­te mit Real- und Ima­gi­när­teil initia­li­siert, nicht wie üblich am Bild­schirm mit x und y. So kann ich damit auch im kom­ple­xen Zah­len­be­reich rech­nen. Es folg­ten Drei­ecke, Krei­se und Poly­go­ne. Spu­ren von Punk­ten auf­ein­an­der abrol­len­der Krei­se (Zyklo­iden), Spie­ge­lung am Kreis (Inver­si­on), Über­la­ge­rung unter­schied­li­cher Sinus-Schwingungen (Lis­s­a­jous) und die Mög­lich­keit, mit der Maus Punk­te zu set­zen und auch Punk­te ent­lang ande­rer Funk­tio­nen ent­lang lau­fen zu las­sen. Mit dem spie­le­ri­schen Erkun­den wuch­sen die Javascript-Objekte zu einem nütz­li­chen, rudi­men­tä­ren Frame­work heran.

 

Video: Lissajous-Figuren mit nahe bei­ei­nen­der lie­gen­den Fre­quen­zen bil­den eine Schwe­bung, die so aus­sieht, als wür­de sich das Teil dre­hen. Die Bäl­le erzeu­ge ich per Maus­klick und die lau­fen dann die gan­ze Linie entlang.

Video: Simu­la­ti­on soge­nann­ter Epi­zy­klo­iden, auf­ein­an­der abrol­len­der Krei­se. Auch hier gibt es per Maus­klick bun­te Bäl­le ent­lang der Linie. Und nach­fol­gend ein Bei­spiel für die Inver­si­on, d. h. Spie­ge­lung am Kreis: die Zahn­rad­fi­gur in der Mit­te wird am roten Kreis gespie­gelt. Auf dem Abbild läuft wie­der ein her­ge­klick­ter bun­ter Ball entlang.

Wenn so etwas funk­tio­niert ist es eine rich­ti­ge Freu­de, da bun­te Bäl­le ent­lang zu schi­cken. (Ja eigent­lich habe ich auch ande­re Hob­bies… aber es macht echt Spaß *klick*)

Ich benut­ze es gern, um mit Java­script mathe­ma­ti­sche Zeich­nun­gen zu erstel­len. Es ist nicht ver­gleich­bar mit den fürs Zeich­nen auf dem Can­vas eta­blier­ten (z. B. p5.js) und erhebt kei­nen Anspruch auf Voll­stän­dig­keit. Viel­mehr ist es für mich das Fern­glas, um auf mei­ne Art die Welt der kom­ple­xen Zah­len zu ent­de­cken. Abge­se­hen von der not­wen­di­gen aber noch weit­ge­hend feh­len­den Doku­men­ta­ti­on sehe ich erst ein­mal davon ab, mei­nen gefühlt unaus­ge­reif­ten Code auf Git­hub zu veröffentlichen.

Aber eins kann ich machen: Dich ermu­ti­gen, selbst mit den Mög­lich­kei­ten zu beschäf­ti­gen, wel­ches das Canvas-Tag bie­tet. Eine gute und inspi­rie­ren­de Quel­le war und ist mir dabei fürs Pro­gram­mie­ren The Coding Train und für die Mathe­ma­tik 3 Blue 1 Brown auf Youtube.