J'ai ouvert grafar - ma bibliothèque pour le rendu. La majeure partie du code a été écrite en 2013-2016 pour ma thèse. Pendant les 5 années suivantes, le projet était sur la table - je n'étais pas tout à fait satisfait de l'API, il y avait beaucoup de fonctionnalités intéressantes que je pourrais ajouter, le travail était nul, et il y avait mille autres raisons de ne pas encore le publier , vous connaissez. Après tout, il y a tellement de gens dans le monde qui sont plus intelligents que moi, et ils vont certainement trouver quelque chose de mieux, non?
La semaine dernière, je suis tombé à nouveau sur ce beau code qui prenait de la poussière sur github - je pensais qu'il avait toujours l'air cool et je suis sûr que cela fera gagner beaucoup de temps à quelqu'un. J'ai donc fourni au projet une documentation de classe mondiale, mis à jour la version et lancé le mode hype.
Pour être honnête, c'est la première version publique du graphar. Très probablement, il contient des bogues et je ne peux pas promettre à jamais la stabilité totale de l'API. Mais quand même, je suis sûr que vous devriez faire attention au graphique, et voici pourquoi:
API simple. Avec seulement 10 lignes de code, vous avez créé la surface directement dans votre navigateur. L'API est conçue pour travailler avec des objets mathématiques - courbes, surfaces, points - et utilise un modèle de topologie d'objets ingénieux pour que tout fonctionne comme prévu.
. -, , , , — 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. :
. , , . — , .
Si vous êtes intéressé par la bibliothèque, consultez la documentation (pour l'instant uniquement en anglais). Le code complet de la bibliothèque est disponible sur le github . Dans ishyus peut se plaindre d'un bug ou vous demander de participer au développement de (je n'aide pas à prévenir).
Quoi qu'il en soit, j'espère que vous l'avez trouvé intéressant. Bonne chance avec les graphiques!