pictalink : création graphique et interactivité

Dans la continuité de l'article Créer une horloge dans le navigateur avec p5.js, où l'on a pu voir qu'il est possible d'utiliser des données pour créer facilement une application graphique, essayons un nouveau modèle d'horloge basé sur la rotation en utilisant cette fois-ci Processing. Processing (disponible à l'adresse processing.org ), est un logiciel et un langage de programmation créé en 2001 par deux étudiants du MIT. Basé sur le langage Java, il est adapté à l'apprentissage du code dans la perspective des arts graphiques. Processing est libre et open source. Il permet de développer des applications pour les principaux systèmes d'exploitation (Windows, Mac, GNU/Linux ou même Android). Tout comme p5.js, Processing s'articule autour de deux parties setup() et draw() , la première n'étant lue qu'une fois au démarrage pour lancer les paramètr...

Inkscape est un outil de dessin vectoriel libre et gratuit. Il permet de faire des illustrations, des cartes, diagrammes, pour une utilisation aussi bien sur des supports imprimés que pour le web. Le logiciel est disponible dans sa version stable 0.92.2 (téléchargeable sur le site Internet  inkscape.org ). À l'ouverture d'Inkscape, nous créons un nouveau fichier par défaut. Celui-ci se présente sous la forme d'un cadre de format A4 en mode portrait. Pour notre dessin, nous allons supprimer le format actuel et l'afficher à 100%. Avec la commande Ctrl+Maj+D , vous affichez les propriétés du document. Nous n'avons pas besoin de travailler sur un format A4 pour notre illustration, ainsi, dans la section Bordure de l'onglet Page, décochez « Afficher la bordure de page ». Vous pouvez fermer la fenêtre. Si le dessin ne s'affiche pas encore à 100% ; vous pouvez appuyer sur la touche du chiffre 1 ou dans « Affichage / Zoom / Zoom 1:1 ». L'af...

A l'aide de la bibliothèque JavaScript p5.js, il est possible d'extraire des données, de les manipuler et de les exploiter sous la forme d'une création graphique. Nous allons voir comment, à partir des données de l'horloge de l'appareil, créer une pendule avec les aiguilles qui tournent en temps réel pour afficher l'heure (après tout, c'est bien là la fonction d'une horloge). Les outils nécessaires à cet exercice sont : un éditeur de texte (Brackets par exemple) un navigateur Internet le fichier de la bibliothèque JavaScript p5.js (à télécharger à partir du site de p5 dans l'onglet « Download ») La page HTML Créons tout d'abord une page HTML classique. Dans l'entête, nous insérons les liens vers le fichier de la bibliothèque p5 et vers le fichier de l'animation elle-même : <!DOCTYPE html> <html lang="fr"> <head...