Cliquez ou appuyez d’un doigt sur l’illustration pour ajouter de nouveaux points. JavaZ tracera instantanément la courbe la plus lissée qui passe successivement par tous les points. [1] |
Lecture/Pause |
Réinitialisation |
- JavaZ
- Application de dessin basée sur les technologies graphiques des navigateurs Web. JavaZ dessine à la volée des images dynamiques et des illustrations interactives à incorporer dans des pages web.
\ˈdʒɑ.vəz\
Le projet JAVAZ
Comme l’artiste peint sur une toile avec des pinceaux et de l’huile, le développeur Web dessine sur des pages html [2] avec du code. Cela a été rendu possible par les technologies graphiques des navigateurs modernes. De plus, le code lui donne la possibilité de créer ses propres outils de création. L’objectif principal de JavaZ est de profiter de ces capacités graphiques astucieuses et ingénieuses des navigateurs web.
Comme le montre en partie l’illustration ci-dessus, l’application issue du projet JavaZ est :
Interactif | Auto-animé | ||
Responsive | Ouvert aux opendatas |
Une illustration JavaZ vaut mieux qu’un long discours
JavaZ est orienté objet, son code utilise des objets JS pour générer des outils de création. L’architecture JavaZ est déterminée par le choix des bons objets et l’organisation de l’interaction entre eux.
Ce site Internet comporte une rubrique qui illustre étape par étape les outils de création de JavaZ [3] :
Creation tool | ||
Du dessin gravitationnel | massPoint | |
Un petit coup de punaise * | massPoint | |
Un petit coup de pouce * | massPoint | |
Du masquage dynamique * | massPoint | |
Du dessin géométrique | -----mathPoint -------------- | |
Du dessin d’ingénierie | /\/\/\/\/\/junction /\/\/\/\/\/ | |
Du recadrage dynamique | environment | |
Oscillation & balancement | engine | |
Du rendu dynamique polyvalent : |
render | |
* A paraître |
JavaZ combine ces outils de création
pour générer des graphiques originaux.
Les navigateurs sont des machines à dessiner
Dans les pages Web modernes, une zone de dessin peut être générée via l’élément HTML5 <canvas>
. Cet élément est une API [4], une interface de programmation. Cet élément n’est accessible que via un langage de codage avec des fonctions graphiques : Javascript.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
JavaScript (JS) est le troisième langage de programmation le plus populaire et a été initialement créé pour rendre les pages Web dynamiques. Les programmes JS sont appelés scripts. Ils peuvent être écrits directement dans le code HTML d’une page Web et s’exécuter automatiquement lors du chargement de la page.
JavaZ bénéficie d’une compatibilité étendue des navigateurs et des plates-formes en plus d’une prise en charge généralisée des pages Web, car près de 90% des sites Web ont été portés vers HTML5 [5].
Qu’y a-t-il sous le capot ?
JavaZ hérite principalement des spécifications de Javascript et de l’élément <canvas>
HTML5 :
Polyvalent et convivial pour les débutants. Javascript est le langage de script le plus populaire au monde pour les développeurs Web front-end. | Open source. JavaZ utilise exclusivement des ressources de base gratuites, fonctionne dans tous les systèmes d’exploitation et est compatible avec les appareils mobiles. | ||
Ubiquitous. JavaZ peut éditer ses graphiques dans n’importe quel navigateur, sans logiciel propriétaire spécifique. | Vectoriel. Les rendus de graphiques JavaZ sont toujours nets, car les algorithmes calculent l’image finale selon la taille d’affichage demandée. |
JavaZ a des fonctionnalités spécifiques :
Javaz est interactif et auto-animé. JavaZ a une boucle d’animation intégrée ce qui permet en outre l’interactivité et la modélisation physique. | JavaZ utilise le rendu multicouche, à la façon des applications de dessin (superposition de calques). | ||
JavaZ utilise JSON, un format texte pour stocker et envoyer des données sur un réseau. JSON est autodescriptif et donc facile à décoder. Les données JSON peuvent facilement être envoyées entre ordinateurs et utilisées par n’importe quel langage de programmation. | JavaZ peut dessiner des formes géométriques simples fournies par l’API <canvas> de base, mais aussi des courbes et de formes plus complexes. Comme illustré ci-dessus, il peut par exemple ajuster des courbes aux points d’un plan. | ||
JavaZ est pur JS. Cela signifie qu’il ne nécessite aucune bibliothèque JS( même jQuery). JavaZ est non modulaire pour rester compatible avec les anciens navigateurs. | JavaZ est web réactif (web responsive) afin de s’adapter à tous types d’écran et de résolutions. |
Néanmoins :
JavaZ n’est pas un framework facile à mettre en oeuvre, et ne doit pas être réellement considéré comme une bibliothèque. Principalement parce qu’il n’a pas encore sa propre interface utilisateur. | |
De par l’implémentation de l’élément <canvas> et son rendu, les calculs parfois lourds impliqués dans les animations peuvent nuire aux performances réelles et perçues de l’application. |
JavaZ, une application pour « CODesigner » ou « JAVartiste »
Don’t design and code, make code to new design.
Les images les plus courantes et les plus populaires publiées sur Internet par des dessinateurs ou des illustrateurs sont des images matricielles. Ces images, principalement des photos, sont stockées sous la forme d’une grille bidimensionnelle de pixels carrés colorés aux formats principalement JPEG, GIF et PNG. Ils ne sont pas interactifs et auto-animés de manière limitée.
Une alternative beaucoup moins populaire offre plus de polyvalence : les images vectorielles. Ces images ne sont pas constituées d’un nombre spécifique de points. Les images sont stockées sous la forme d’un ensemble de formes géométriques (telles que des points, des lignes, des courbes et des polygones) accompagnées d’instructions [6]. Un dessin vectoriel est un objet numérique produit par un ordinateur grâce à des formules mathématiques.
L’élément <canvas>
se base sur le graphisme vectoriel ainsi que sur la formidable versatilité de JavaScript, permettant des dessins, des graphes, des animations, des jeux et des compositions d’images interactives et dynamiques.
Tout illustrateur, dessinateur ou designer sachant coder peut tirer parti de ces technologies Web. Avec du code et des scripts, il peut ajouter de nouvelles dimensions à ses graphismes, comme la simulation physique des objets dessinés, l’animation, ainsi que l’interactivité avec l’utilisateur, le reste de la page Web ou les open datas… Bref, ce n’est pas seulement du dessin, c’est aussi de la conception et de l’ingénierie.
L’exemple ci-dessus montre comment un graphique auto-animé peut réagir au contrôle tactile ou à la souris, ainsi qu’aux boutons à l’intérieur de la page Web. Il s’adapte pour calculer la courbe la plus lissée qui passe par tous les points déterminés successivement. Grâce à leur propriété vectorielle, même redimensionnés à la volée, les graphismes restent nets et impeccables.
Un CODesigner, un graphiste qui sait coder, se tient sur ses deux jambes. Les deux domaines, celui du graphisme et celui des mathématiques, sont parfois tellement imbriqués que cette double compétence n’en devient qu’une, celle de trouver une nouvelle application graphique à des concepts mathématiques, concepts qui sont déjà à la source de nombreux calculs en graphisme. Un exemple très simple est la construction d’une courbe par la méthode d’interpolation de Spline. Cette méthode peut être personnalisée pour construire ses propres courbes personnalisées, pour dessiner des courbes sous forme de nuages, d’accolades... et donc créer des formes nouvelles, diverses et complexes.
Du point de vue de Codesigner, force est de constater que les outils popularisés par la situation parfois monopolistique des applications propriétaires mais incontournables dans le domaine du design graphique ont conduit à la fois à une certaine indigence mathématique et à une certaine standardisation des méthodes de création. Travailler en tant que CODesigner permet de s’affranchir de ce cadre et d’explorer de nouveaux territoires graphiques.
Les idées abstraites, les concepts mathématiques purs, les formes, les couleurs et le temps sont parmi les ingrédients avec lesquels travaille un CODesigner. Concevoir, c’est découvrir des relations et faire des arrangements et des réarrangements entre ces ingrédients.
Puis-je intégrer un <canvas>
JavaZ sur mon site Web ?
Oui,
Chaque fois que l’élément <canvas>
est disponible, un code HTML avec la balise de script sera publié au pied de la page Web ou apparaît le <canvas>
.
- Copier ce code HTML avec l’élément
<script>
. - collez l’élément
<script>
de préférence à la fin de votre fichier HTML, par exemple à la fin de la section body.
Par défaut, l’élément <canvas>
sera inséré au plus haut niveau de l’arborescence du body de votre page html, à moins que vous n’ayez ajouté préventivement un <div id="javaz"></div>
à l’endroit où vous souhaitez que le <canvas>
soit affiché .
<!DOCTYPE html>
<html>
<head></head>
<body>
/*
your HTML code
*/
<div id="javaz"></div>
/*
your HTML code
*/
<script type="text/javascript" src="https://javaz.graphics/squelettes/js/javaz.js?jsonSrc=squelettes/json/json_autoCurve.txt;renderSrc=squelettes/render/render_autoCurve.js;CrossOrigin=true" defer>
</body>
</html>
Le <canvas>
JavaZ est web réactif (responsive) et s’adaptera à l’espace laissé par le DOM.
Encore un détail…
En programmant JavaZ, j’ai été frappé par le fait que j’ai rencontré un tas de mathématiciens français :
- Loup Verlet et son intégration Verlet pour une animation stable,
- Pierre Béziers et les courbes de Bézier. Cette courbe paramétrique est essentielle à l’infographie. Pierre Béziers l’a utilisé dans les années 1960 pour dessiner les courbes de la carrosserie des voitures Renault.
- Jean-Baptiste Joseph Fourier et ses transformations…
Ces mathématiciens simplifient grandement la tâche d’un CODesigner… Tous mes respects et merci !
Et après ?
Nouvelles fonctionnalités JavaZ à venir :
- collision de particules
massPoint
. - mise à niveau des événements de pointeur.
- Implémentation audio.
- pointant sur le pointeur de la souris avec
arc.tan()
- Motion path Animation (animer un élément par rapport aux valeurs x, y et angle d’un élément Curve/path).
- Animation de dessin au trait utilisant la propriété ’stroke-dashoffset’.
- Dessin au trait utilisant les transformées de Fourier
- Capacités de parsing SVG
… et tant d’autres choses si joliment mathématiques !
En attendant :
Goodbye JPEG ! Au revoir GIF ! Aufwiedersehen PNG !
[1] D’autres fonctionnalités javaz sont également disponibles dans cette illustration, mais vous pouvez les découvrir par vous-même
[2] HTML signifie Hypertext Markup Language, est le format de document utilisé pour les pages Web
[3] Les explications et notions mathématiques techniques sont réduites au minimum pour la compréhension du sujet.
[4] Une API est un ensemble de fonctionnalités et de règles qui existent à l’intérieur d’un programme logiciel (l’application) permettant une interaction avec lui via un logiciel - par opposition à un utilisateur humain interface. L’API peut être considérée comme un simple contrat (l’interface) entre l’application qui la propose et d’autres éléments, tels que des logiciels ou du matériel tiers.
[5] HTML5 Canvas est accessible à partir des ordinateurs de bureau , tablettes et smartphones .
[6] les images vectorielles sont idéales pour les logos.