Experiment: Visualisierung von Ebenen-Geometrien mit Javascript und WebGL

 

Wie transfomiere ich eigentlich ein Quadrat zum Torus, zu einer Kugel oder einer Welle?

Jeder Punk (a,b) auf der Einheits-Quadratebene [-1,1]×[-1,1] – der Kreis der euklidischen Maximumsmetrik d∞ – wird abgebildet auf einen 3D-Punkt (x,y,z). Die Zielkoordinaten werden dazu über drei voneinander unabhängige Javascript-Funktionen ermittelt. Diese drei Funktionen wiederum sind definiert über drei Terme, die über ein HTML-Interface eingegeben werden können.

 

 

Zur interaktiven Demo: http://int2byte.de/public/plane-geometry/main.html

Code auf Github: https://github.com/IkarosKappler/plane-geometry

 

Testterme für den Torus:

termX := (5*2*cos((x+1)*PI)) * cos((y+1)*PI)

termY := (5*2*cos((x+1)*PI)) * cos((y+1)*PI)

termZ := 4*2*sin((x+1)*PI)

Anmerkung A: Die 5 bestimmt den inneren Torusradius, die 4 den äußeren Torusradius.

Anmerkung B: Für Sinus und Kosinus werden die Eingabeparameter von [-1,1] nach [0,2*PI] transformiert, dahier die (x+1)*PI bzw (y+1)*PI. 

Verwedente Bibliotheken:

 - THREE.js (Visualisierung) 

 - expr-eval von silentmatt (Term-Parser, https://github.com/silentmatt/expr-eval)

 - DAT.GUI (Parametereingabe)