A l'instar de Desmos ou Géogébra, EKwa est un simple traceur de fonction écrit en Javascipt, pouvant devenir un peu plus complexe en manipulant bien JS.
Il est possible de se balader dans le graphe généré par la fonction, choisir un intervalle, zoomer et choisir l'ecart (discrétisation entre chaque x
de f(x)
). La fonctionnalité la plus interessante est la saisie de fonction a l'aide des librairies natives de Javascript (Math.*)
.
Le fonctionnement est le plus basique qui soit, un canvas qui dessine un carré sur un pixel de la page a l'aide de chaque valeur de f(x)
.
Une contrainte pour les Non-Javascriptien, les fonctions doivent obligatoirement etre ecrite en Javascript. Pourquoi ce choix ? Afin d'uniformiser toutes les façons d'écrire une fonction, pouvoir visualiser et surtout, visualiser l'équivalent d'un code Javascript (qui fait des boucles, etc...).
Un point important, les positions des points sont recalculer a chaque fois ce qui peut etre un peu embettant niveau performance.
L'application est écrite en Javascript natif donc pour l'inclure dans un projet React, veuillez effectuer toutes les transformations nécessaire.
L'application est disponible sous differente forme : sur le web (via gh-pages), en application pour un mode hors-ligne (via ElectronJS, désolé pour les 200mo) et en version auto-heberger web sur un navigateur.
Ce projet peut evoluer en different point. Ameliorer l'intéraction avec l'application pour un Non-Javascriptien, rendre plus rapide l'application parce que la c'est un peu laborieux. Peut etre rajouter plus de design et rajouter plus de fonctionnalité tel que le téléchargement du graphes en plusieurs format, etc... Pour finir, vous pouvez rendre le projet "compatible" avec Node.js. En effet, une biblioteque interessante, Math.js, permet de se liberer du javascript lors de l'ecriture de la fonction. Il suffira juste de changer scripts/utils.mjs
avec les implementations necéssaire.
Le projet est sans licence, faites en ce que vous voulez. Servez vous en tant que : template pour faire évoluer l'application, traceur de courbe personnalisé en modifiant le css, element de visualisation de fonction pour un exposer ou autre.
Nous pouvons faire des simples courbes tel que :
ou en javascript :
(x) => Math.sin(x) + Math.pow(x, 2);
ou bien cette fonction :
ou en Javascript :
Math.cos(x) * (Math.pow(Math.tan(x), 2) / Math.pow(Math.E, Math.sin(x)));
Dans l'introduction, je parlais d'une façon un peu plus complexe de construire des fonctions.
Dans le cas simple, nous sommes restreint qu'a une fonction. Cela est du au traitement interne de la transformation string ↦ function via eval(string)
. En effet, l'application fait une concaténation :
eval("(x) =>" + str);
// ou "str" est le retour d'une fonction sous forme de string. Ex : eval("(x) =>" + "Math.cos(x)") retournera cos(x).
On peut utiliser cette subtilité pour créer des sous-fonctions a n-parametres tel que :
soit :
en mettant ceci :
((j, k) => Math.pow(Math.sin(Math.tan(j)) / Math.log(k), k))(
Math.pow(Math.E, x),
Math.pow(x, Math.log(x / Math.pow(x, 2)))
);
dans le champ de saisie de f(x), soit la version extra-compressé de :
const g = (j, k) => Math.pow(Math.sin(Math.tan(j)) / Math.log(k), k);
const f = (x) =>
g(Math.pow(Math.E, x), Math.pow(x, Math.log(x / Math.pow(x, 2))));
// boucle en i=0, i+1, 0 -> inf
console.log(
f(i) ===
((j, k) => Math.pow(Math.sin(Math.tan(j)) / Math.log(k), k))(
Math.pow(Math.E, i),
Math.pow(i, Math.log(i / Math.pow(i, 2)))
)
); // donne true
C'est un peu long mais en gros,
ou
sont des transformations quelconques de λ.