interface du site alternatif de benoit wimart (graphiste)

javascript

Another

Acte 1

Pour mon dernier portfolio (graphiste), je voulais créer une interface avec GSAP et de la typographie animée. Après quelques expérimentations, le résultat n’était pas assez fluide, je suis donc passé à un site 100% canvas (la balise HTML) en utilisant les librairies PixiJS et GSAP.
Pour l’administration du site, j’ai opté pour une architecture combinant Google Sheets + CSV + PHP + structure de dossiers du site = génération de JSON avec textes et médias.
Pour simplifier, Google Sheets permet de créer un lien vers une version texte facile à lire en PHP (un langage du web), la structure des fichiers est aussi lisible en PHP et enfin l’écriture d’un fichier JSON optimise et rend la lecture en JavaScript/PHP plus simple.

Acte 2

J’ai une passion pour les interfaces ludiques, j’ai donc lancé le projet Another, avec une nouvelle interface chaque mois. J’utilise la même base JSON pour tester des présentations différentes. Une manière de tester des concepts et des idées avec des vraies données, une façon de découvrir des nouvelles choses.

interface du site alternatif de benoit wimart (graphiste)

interface du site alternatif de benoit wimart (graphiste)

interface du site alternatif de benoit wimart (graphiste)

SVG, JS, GSAP et plus.

Voici un kit (à améliorer) pour faire des dessins vectoriels en SVG avec du JavaScript.
Même si Processing semble mieux adapté pour ce genre de tache, faire son propre SVG permet une approche différente.
Dans ce kit, j’ai mis quelques fonctions pour dessiner des cercles, des lignes, des rectangles… mais il est assez simple d’en faire d’autres.
J’ai aussi ajouté des liens vers des librairies pour mes propres expérimentations.
Par exemple, GSAP permet pas mal de transformations rapides.

Mode d’emploi :

  • Ouvrir le dossier du zip dans Visual Studio Code (ou équivalent)
  • Ouvrir le fichier sketch.js dans le dossier 01 pour voir un exemple
  • Ouvrir index.html et lancer le liveserver (ou équivalent)
  • La touche S permet de sauvegarder en png et svg (il faut peut-être autoriser Chrome/Firefox)
  • Pour faire un autre sketch, dupliquer le dossier 01 et renommer le 🙂

Le kit.zip