blog

Bap s01e01 et s01e02

épisode 2

Pour profiter de cette période de vacances, je vous propose de découvrir comment coder en Javascript pour faire de la musique.
Mon choix s’est porté sur la librairie Bap, relativement complète et inspirée du MPC, elle semble moins populaire que P5JS, mais à quelques avantages.

Pour cette première approche, je ne charge pas de son (sample) et n’utilise pas d’effect. Par la suite, nous verrons comment faire avec de vrais sons et interagir avec la boucle ou créer des phrases rythmiques selon des données (variables).

See the Pen BAP JS s01e01 by Benoît Wimart (@benoitwimart) on CodePen.0

épisode 2

See the Pen BAP JS s01e02 by Benoît Wimart (@benoitwimart) on CodePen.0

source image

regex & Brackets

Les expressions régulières (regex) malgré leur aspect ingrat et rebutant, peuvent rendre de précieux services, même aux graphistes.
Présentes dans la plupart des langages (javascript, php…), on les retrouve aussi dans des logiciels comme Brackets ou InDesign.

Sous Brackets, elles s’activent dans le module « rechercher / remplacer » (qui s’appelle Remplacer) et en activant le bouton « .* » ; elles permettent de rechercher des motifs de chaîne de caractères. Un motif étant une suite de caractères correspondant à une certaine logique comme une date (xx-xx-xxxx), un numéro de téléphone, un mail…

Pour illustrer, supposons que mon texte comporte des années à quatre chiffres et que celle-ci seraient plus valorisées avec un style spécifique.


1999
2020
// devient //
<span class="year">1999</span>
<span class="year">2020</span>

On va utiliser une regex simplifiée.

\d signifie un chiffre (0, 1, 2, 3 à 9) 
\d\d signifie deux chiffres (00, 01, 02… 99) 
\d\d\d\d signifie quatre chiffres (0000 à 9999), c'est la regex pour une année à quatre chiffres.

Pour remplacer, il faut capturer avec des parenthèses, chaque capture s’appellera « $chiffre ».

(\d\d\d\d) sera stocké dans $1
(\d\d)-(\d\d) seront stockés dans $1 $2

champ 1 : (\d\d\d\d)
champ 2 : <span class="year">$1</span>

En pratique et images

Avant (n’oubliez pas le bouton .*)
brackets regex
Après
brackets regex

Pour aller plus loin :

open source / copyright

En complément des conférences, voici deux documentaires. Le premier raconte l’histoire de Linux et plus, le second parle du copyright.


RiP : remix manifesto (à voir gratuitement sur le site de l’ONF)

Bonus :
Revolution OS (2001)

Quelques liens vus en conférence

Typographie

Visual Data

entrainement JavaScript (partie 1)

À la demande, voici quelques exercices de JavaScript.

Boucle

Voici une boucle qui va de 0 à 9 (soit dix boucles).
exercice 1 : faire une boucle pour 7 à 77.
exercice 2 : faire une boucle qui affiche 0, 10, 20 … 90.

for(var i = 0; i<10 ; i++){
  console.log(i);
}

Démo

Éléments du document

En stockant un élément dans une variable, on peut manipuler celui-ci.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p id="test"></p>
<script>
  var test = document.querySelector('#test');
  test.textContent = "Helvetica";
  test.style.color = "#f60";
</script>
</body>
</html>

démo
exercice 3 : mettre le texte en gras (il y a un piège).

suite

Voici une requête qui stocke tous les éléments du sélecteur.

var elements = document.querySelectorAll('p');

Hélas, JavaScript ne sait pas faire elements.style.color = "#f60"; pour manipuler plusieurs éléments, il faudra les appeler via des crochets p[0] pour le premier, p[1] pour le deux!ème… et si vous avez une variable avec un chiffre ‘a = 1’ vous pouvez écrire p[a].

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  p[0].style.color = "#f60";
  p[1].style.color = "#f60";
  p[2].style.color = "#f60";
</script>
</body>
</html>

Boucle + sélecteur

On combine les deux !

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  for(i=0;i<3;i++){
    ****.style.color = "#f60"; //**** = exercice 
  }
</script>
</body>
</html>
Ces exercices n’ont aucune application ‚mais sont des bases pour réaliser des choses plus complexes.

Tableaux, JS et GSAP

Dans les trucs et astuces de la programmation, une notion est importante, celle des tableaux.
L’écriture passe par des crochets et des virgules et on accède aux différentes entrées par des crochets et un nombre.

var tableau = [10,15,42]; // un tableau
console.log(tableau[0]); // 10
console.log(tableau[1]); // 15
console.log(tableau[2]); // 42

On peut compter le nombre d’éléments dans un tableau avec la propriété length

console.log(tableau.length); // 3

La maitrise des tableaux passe par l’usage des boucles.

var tableau = [10,15,42]; // un tableau
for(i=0;i<tableau.length;i++){
console.log(i+'--->'+tableau[i]);
}
// 0--->10
// 1--->15
// 2--->42

Application avec GSAP

Je créé un tableau par point d’un trajet :

var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];

Je créé un tableau pour un trajet en combinant les deux :

var e32 = [be,ch,uk,es,fr]; // oui c'est possible !
console.log(e32[0][1]); // e[32][0] donne be et be[1] donne -200
À cette étape, il faut ouvrir la console de Chrome et faire des tests !
var tl32 = new TimelineMax({repeat:-1});
 
var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];
 
var e32 = [be,ch,uk,es,fr];
 
for(i=0;i<e32.length;i++){
  tl32.to('#e32',.5,{
    x:e32[i][0],
    y:e32[i][1]
  });
}

See the Pen tableau + gsap + tl by Benoît Wimart (@benoitwimart) on CodePen.0

boing : rebondir

Cette semaine, une base de script pour faire un rebond façon pong avec un algorithme simplifié.
Pour la partie « mathématiques », le rebond consiste à inverser la direction du mouvement (en x comme en y selon le mur).
Si vous avancez de deux pas devant vous, pour simuler un rebond contre un mur, dès que vous serez contre le mur, il faudra avancer de moins deux pas (ou reculer de deux pas), on maintient ainsi la même vitesse.

Pour la partie code, la boucle dessine() est optimisée pour une vitesse d’affichage de 60 images par seconde, avec l’usage de requestAnimationFrame(), il s’agit d’un setInterval plus optimisé pour les animations fluides.

Note : ce code n’est pas parfait, GSAP est là pour une éventuelle amélioration et le déplacement du rectangle serait plus optimisé avec un translation « transform ».
// je sélectionne mon rectangle
var rect = document.querySelector("rect");
// j'assigne à celui-ci un déplacement en x et en y
rect.vx = 2;
rect.vy = 3;
 
// je crée une fonction dessine avec un auto appel rAF (boucle) à la fin de celle-ci
function dessine() {
  // je récupère les attr x et y du rect dans le svg
  var a = Number(rect.getAttribute("x"));
  var b = Number(rect.getAttribute("y"));
  // si ces points sont hors cadre, j'inverse le déplacement, c'est le test de collision et le rebond
  if (a < 0 || a > 350) {
    rect.vx = -rect.vx;
  }
  if (b < 0 || b > 350) {
    rect.vy = -rect.vy;
  }
  // je mets à jour x et y
  TweenMax.set(rect, {
    attr: {
      x: a + rect.vx,
      y: b + rect.vy
    }
  });
  // la boucle rAF = 60fps si possible
  window.requestAnimationFrame(dessine);
}
 
// je lance la fonction
dessine();

See the Pen SVG rect /dessine by Benoît Wimart (@benoitwimart) on CodePen.0

GSAP + SVG

Pour un sujet de cours autour du SVG et du JavaScript voici un article de remise en forme.

Les bases du SVG

Le SVG est un format de dessin vectoriel, vous pouvez en créer et éditer avec Illustrator, Sketch, Inkscape, mais aussi directement à la main.
Le code du fichier est lisible avec un éditeur de type Brackets ou autres et utilise une base xml. On retrouve donc des balises, des attributs et des choses très similaires au HTML.
Quelques noms de balises :

  • svg (la base du document)
  • g pour groupe
  • path pour chemin
  • circle pour cercle
  • rect pour rectangle
  • line pour ligne
  • defs et use pour les symboles

Dans les points importants à connaître, le SVG permet de nommer les éléments via des ID et des Class, ce qui est fortement utile pour GSAP.

Illustrator est une usine à gaz, ses SVG sont parfois problématiques, évitez les fonctions trop complexes (transparence, pathfinder, masque, maillage et effets. Exportez votre travail et observez le code, celui-ci doit être assez lisible. Si cela est nécessaire de faire des effets, faites une recherche sur le MDN de Mozilla pour reproduire les ombres, les dégradés…

Les bases de GSAP

GSAP est une libraire JavaScript. Son usage principal est de réaliser des animations pour le web (et parfois des interfaces). Dans les fonctions proposées, la création d’une timeline virtuelle permet de créer et d’ajuster rapidement des animations complexes. À la manière d’un After Effects, on ajoute des éléments, des transitions, des points et on contrôle l’ensemble avec du code à la place d’une interface.

Avoir des connaissances en JavaScript permet d’aller plus loin, mais créer une simple animation ne demande pas énormément de vocabulaire et grammaire JavaScript.

GSAP avec SVG

Pourquoi du SVG ?

  • GSAP peut animer du HTML, mais celui-ci peut avoir ses limites, animer les éléments dans un SVG est bien souvent plus performant.
  • Le SVG est parfait pour un résultat lisse, fluide avec des formes complexes.
  • Vous connaissez suffisamment Illustrator et le design graphique pour produire de belles formes.

Bouts de code pratique

Savoir utiliser TimelineMax suffit à produire des animations évoluées.
Notamment avec timeline.to(‘sélecteur’,durée en secondes,{propriété à animer : valeur, autre propriété à animer : valeur});

Animer un élément par son ID.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
   <circle id="cercle" r="30" cx="30" cy="60" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax(); // je crée une timeline
    tl.to('#cercle', 10, {  // j'ajoute une transition 'to' à ma 'tl' pour '#cercle' pendant 10 s
      x: 500, // va à droite de 500px (on n'oublie pas la virgule)
      y: 200  // va en bas de 200px (pas de virgule pour le dernier)
    });
  </script>
</body>
</html>

Animer certaines balises.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
   <circle r="30" cx="30" cy="60" />
   <circle r="20" cx="170" cy="60" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('circle', 10, {
      x: 30,
      y: 20
    });
  </script>
</body>
</html>

Animer les éléments d’une même class.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
    <style>.color{fill:#f60}</style>
   <circle r="20" cx="30" cy="30" />
   <circle class="color" r="20" cx="30" cy="90" />
   <circle class="color" r="20" cx="30" cy="150" />
    </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('.color', 5, {
      x: 300,
      fill:'black', // en svg background-color = fill
      opacity:0.3
    });
  </script>
</body>
</html>

D’autres combinaisons sont possibles pour cibler les éléments à animer, on utilise les mêmes sélecteurs qu’en CSS.
Exemples :

  • ‘#voiture-verte .roues’ toutes les .roues de mon élément #voiture-verte
  • ‘.nuages:nth-of-type(3)’ le 3e élément à avoir la class nuages
  • ‘line:nth-child(2n)’ une ligne sur deux

Le chainage.
Les transitions ajoutées à la timeline s’enchainent.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
 
<body>
  <svg width="800" height="800">
    <style>.color{fill:#f60}</style>
    <circle r="20" cx="30" cy="30" />
    <circle class="color" r="20" cx="30" cy="90" />
    <circle class="color" r="20" cx="30" cy="150" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('.color', 1, {
      x: 300,
      fill: 'black',
      opacity: 0.3
    });
    tl.to('circle', 1, {
      x: 30,
      fill: '#f60',
      opacity: 1
    });
  </script>
</body>
</html>

Les plugins

Pour répondre à des usages différents, GSAP propose des extensions gratuites et payantes.
DrawSVG permet d’animer un tracé en dessinant une partie ou l’intégralité de celui-ci ; ce plugin est payant mais testable sur Codepen. Si vous l’avez sur votre machine, il doit être dans le même dossier que votre html.
AttrPlugin permet d’animer les attributs d’un élément SVG.
Il est présent par défaut dans cette version :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

ou il faut l’ajouter avec ce script en plus :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/AttrPlugin.min.js"></script>

Les bidouilles de codeurs

Voici une démo avec du code JS avancé pour cloner les nœuds du SVG (nœud = l’élément et ses enfants).

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tap tap tap</title>
  <style>
    body{
      background: #000;
    }
  </style>
</head>
 
<body>
  <svg id="root" width="800" height="800">
    <defs>
      <g id="Port">
         <text x="0" y="0" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <use x="500" y="500" href="#Port" />  
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
    /* la boucle */    var intervalID = window.setInterval(myCallback, 100);
    var count=0;
 
 
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      var random_a = Math.random() * 800 - 400; // un chiffre entre -400 et 400
      var random_b = Math.random() * 800 - 400;
      svg.appendChild(clone);
      // V1 pour une animation plus complexe 
      //tl = new TimelineMax();
      //tl.to('use:last-child',2,{x:random_a,y:random_b,opacity:0});
      // V2 juste une transition 
      TweenMax.to('use:last-child',2,{x:random_a,y:random_b,rotation:random_b,opacity:0});
 
      // suppression des clones après 25 boucles
      if(count>25){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS CLAVIER */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole
      document.querySelector('#Port text').innerHTML = e.key;
    })
 
  </script>
 
</body>
</html>

Variation sans aléatoire

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      background: #000;
      width:800px;
      margin:20px auto;
    }
  </style>
</head>
 
<body>
  <svg id="root" width="799" height="800"><!--les valeurs sont ajustées-->
    <defs>
      <g id="Port">
         <text x="3" y="-5" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <use x="400" y="400" href="#Port" />  
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
 
    // la boucle
 
    var intervalID = window.setInterval(myCallback, 16);
    var count=0;
 
 
    var x = 400; // même centre que le symbole
    var y = 400;
    var mx = 18; // mouvement en x
    var my = 21; // mouvement en y
 
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      x=x+mx; // déplacement
      y=y+my;
      posx = x - 400; // position par translation 
      posy = y - 400;
 
      // le rebond 
 
      if(posx >= 400 || posx<-400){
       mx = mx* -1; // on inverse la direction
      }
 
      if(posy >= 400 || posy<-400){
       my = my* -1; // on inverse la direction
      }
 
      svg.appendChild(clone);
      // note : l’usage de GSAP n’est pas forcement justifié dans cette exemple
      TweenMax.to('use:last-child',0,{x:posx,y:posy}); // en mettant 3 à la place de 0 c’est amusant
 
      // suppression des clones après x boucles
      if(count>1000){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole 
      document.querySelector('#Port text').innerHTML=e.key;
 
      // l'effet ci-dessous n'est pas extra, 
      // mais je le laisse en commentaire pour faire des tests 
      //var tl = new TimelineMax();
      //tl.staggerFromTo('use',.3,{rotation:0},{rotation:360},-.05);
    })
 
  </script>
 
</body>
</html>

Centrage.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tap tap tap</title>
  <style>
    body{
      background: #222;
      height:99vh;
      margin:0;
    }
  </style>
</head>
 
<body>
  <svg id="changement" width="100%" height="100%">
    <defs>
      <g id="Port">
         <text x="0" y="0" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <rect x="0" y="20" width="800" height="800"/>
 
    <g id="root">
      <use x="400" y="400" href="#Port" />
    </g>
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
    /* la boucle */    var intervalID = window.setInterval(myCallback, 100);
    var count=0;
    var w = window.innerWidth/2;
 
    // je centre le rect et mon groupe #root
    TweenMax.set('rect,#root',{x:w-400});
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      var random_a = Math.random() * 2000 - 1000; // un chiffre entre -400 et 400
      var random_b = Math.random() * 1000 - 500;
      svg.appendChild(clone);
      // V1 pour une animation plus complexe 
      //tl = new TimelineMax();
      //tl.to('use:last-child',2,{x:random_a,y:random_b,opacity:0});
      // V2 juste une transition 
      TweenMax.to('use:last-child',2,{x:random_a,y:random_b,rotation:random_b,opacity:0});
 
      // suppression des clones après 25 boucles
      if(count>25){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS CLAVIER */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole
      document.querySelector('#Port text').innerHTML = e.key;
    })
 
  </script>
 
</body>
</html>

Les bidouilles de graphistes

  • Pour masquer un élément on peut mettre l’opacité à 0 (avec GSAP ou Illustrator),
  • Si vous ne savez pas cloner en code, clonez dans Illustrator ou Brackets (attention à ne pas cloner les ID)

Les erreurs

  • Confusions entre ID, Class et balise,
  • Balises non-fermées sur script ou svg…
  • Si on ouvre une parenthèse ou un crochet ou un accolade, il faut la fermer,
  • Les virgules, les points et les points-virgules sont sources de problèmes.

En cas d’erreur, toujours regarder dans la console, voir la ligne soulignée ou celle avant, relire la doc et repartir d’un exemple !