Ich habe grafar geöffnet - meine Bibliothek zum Rendern. Der größte Teil des Codes wurde 2013-2016 für meine Diplomarbeit geschrieben. Für die nächsten 5 Jahre lag das Projekt auf dem Tisch - ich war nicht ganz zufrieden mit der API, es gab viele coole Funktionen, die ich hinzufügen konnte, die Arbeit war scheiße und es gab tausend weitere Gründe, sie noch nicht zu veröffentlichen , Wissen Sie. Immerhin gibt es so viele Menschen auf der Welt, die schlauer sind als ich, und sie werden sich definitiv etwas Besseres einfallen lassen, oder?
Letzte Woche bin ich wieder auf diesen wunderschönen Code gestoßen, der sich auf Github verstaubt - ich fand ihn immer noch cool und bin mir sicher, dass er jemandem viel Zeit sparen wird. Also lieferte ich dem Projekt eine erstklassige Dokumentation, aktualisierte den Build und startete den Hype-Modus.
Um ehrlich zu sein, ist dies die erste öffentliche Veröffentlichung des Graphars. Höchstwahrscheinlich gibt es Fehler darin, und ich kann nicht für immer die volle Stabilität der API versprechen. Trotzdem bin ich mir sicher, dass Sie auf die Grafik achten sollten, und hier ist der Grund:
Einfache API. Mit nur 10 Codezeilen haben Sie die Oberfläche direkt in Ihrem Browser erstellt. Die API ist auf die Arbeit mit mathematischen Objekten ausgerichtet - Kurven, Flächen, Punkte - und verwendet ein ausgeklügeltes Objekttopologiemodell, damit alles wie erwartet funktioniert.
. -, , , , — 1 30FPS. WebGL , .
c 3D 2D. ThreeJS, 3D — , . 2D, .
. Grafar — (- MobX). , , .
, , . codesandbox.
— . :
const p = grafar.range(-2, 2, 500).select();
const q = grafar.range(0, 1, 2).select();
([-2, 2] p, [0, 1] q) , .
(x,y,z):
const xp = grafar.map([p, q], (p, q) => Math.cos(8 * p) * q);
const yp = grafar.map([p, q], (p, q) => Math.sin(8 * p) * q);
. -, , p q — , . -, xp yp — p q, xp yp .
, — :
const container = document.getElementById("app");
const panel = grafar.panel(container);
grafar.pin([xp, yp, p], panel);
7 :
, — , grafar. :
. , , . — , .
Wenn Sie an der Bibliothek interessiert sind, lesen Sie die Dokumentation (bisher nur in englischer Sprache). Der vollständige Bibliothekscode ist auf dem Github verfügbar. In ishyus kann man sich über einen Fehler beschweren oder Sie bitten, sich an der Entwicklung von zu beteiligen (ich helfe nicht zu verhindern).
Wie auch immer, ich hoffe du fandest es interessant. Viel Glück mit den Charts!