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[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
See the Pen tableau + gsap + tl by Benoît Wimart (@benoitwimart) on CodePen.
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.
Bonus : https://mort-modern.losttype.com/ une typo et un site à découvrir (la licence web n’est pas gratuite, mais l’usage personnel (ou étudiant) l’est). https://vulfpeck.com/ ce groupe propose en merchandising un plugin son, un t‑shirt et une typographie !
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.
Document
Animer certaines balises.
Document
Animer les éléments d’une même class.
Document
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.
Document
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 :
ou il faut l’ajouter avec ce script en plus :
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).
Tap tap tap
Variation sans aléatoire
Document
Centrage.
Tap tap tap
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 !
Voici un algorithme basé sur le jeu du 421, on lance trois dés et on veut savoir si on a un 4, un 2 et un 1.
La première étape consiste à traduire les dés en code.
Je crée trois variables a, b, c et j’y associe un chiffre entier au hasard entre 1 et 6 inclus.
/*
les 3 dés
*/
/* un chiffre entier aléatoire entre 1 et 6 */
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
//The maximum is inclusive and the minimum is inclusive
}
/* 1er chiffre */
var a = getRandomIntInclusive(1,6);
/* 2e */
var b = getRandomIntInclusive(1,6);
/* 3e */
var c = getRandomIntInclusive(1,6);
Avec les nouvelles fonctions du JavaScript es6, on peut savoir si un tableau contient une valeur précise (il s’agit d’une boucle adaptée).
var tableau = [a,b,c];
tableau.some(function(e){return e === 4;}) // true
Il reste à mettre ceci dans une condition (if) avec l’opérateur logique « et (&&) » et notre algorithme est opérationnel.
if(
tableau.some(function(e){return e === 4;}) &&
tableau.some(function(e){return e === 2;}) &&
tableau.some(function(e){return e === 1;})
){
console.log('win');
}else{
console.log('loose');
}
Ton astuce est plus grande que la mienne
Vous trouverez sur le net d’autres algorithmes plus ou moins lisibles, mais il existe pour le 421, une astuce magique. 1re remarque
Si vous faites 4 × 2 × 1 ou 2 × 4 × 1, qu’importe l’ordre, on obtient 8. A‑t-on une autre combinaison qui fait 8… hélas oui, 2 × 2 × 2 = 8. 2e remarque
Si vous faites 4 + 2 + 1 qu’importe l’ordre, on obtient 7. A‑t-on une autre combinaison qui fait 7, hélas oui 3+3+1 ou 5+1+1. 3e remarque
À priori, ni la première remarque, ni la seconde s’avère utile pour faire un algorithme et pourtant il suffit de combiner les deux et vous avez un test parfait, rapide et efficace.
Si dé1 × dé2 × dé3 = 8 ET dé1 + dé2 + dé3 = 7, on a bien un 421.
Code final
/*
les 3 dés
*/
/* un chiffre entier aléatoire entre 1 et 6 */
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
//The maximum is inclusive and the minimum is inclusive
}
/* 1er chiffre */
var a = getRandomIntInclusive(1,6);
/* 2e */
var b = getRandomIntInclusive(1,6);
/* 3e */
var c = getRandomIntInclusive(1,6);
/* algo I moderne en es6 */
var tableau = [a,b,c];
console.log(tableau);
/* a-t-on un 4 ET */
/* a-t-on un 2 ET */
/* a-t-on un 1 ? */
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
if(
tableau.some(function(e){return e === 4;}) &&
tableau.some(function(e){return e === 2;}) &&
tableau.some(function(e){return e === 1;})
){
console.log('win');
}else{
console.log('loose');
}
/* algo II classique */
/* malin */
if(a*b*c === 8 && a+b+c === 7){
console.log('smart win');
}else{
console.log('smart loose');
}
See the Pen 421 by Benoît Wimart (@benoitwimart) on CodePen.
Petites compilations de ressources pour mi-décembre.
2016 & GSAP
Après avoir vu cet exemple utilisant GSAP et drawSVG : https://jenseign.com/2016/ ;
j’ai isolé la partie du code dans un CodePen. Le résultat est moins intéressant que la carte de vœux car c’est le tracé du SVG qui joue le rôle essentiel (il faut cliquer pour lancer la lecteur), mais la base du JavaScript est presque la même.
See the Pen drawSVG – 2016 by Benoît Wimart (@benoitwimart) on CodePen.
Pour vous rafraichir les idées et revoir les bases du JavaScript, Codecademy propose un outil pratique (attention les derniers chapitres ne sont plus pour les débutants).
En alternative française, vous trouverez quelques sites dans les ressources (à compléter).
Site du jour
Dix idées de mise en page et pas envie de trancher, faites dix points de rupture (site à tester en responsive) ! https://lynnandtonic.com/
Vous verrez souvent une technique CSS ancestrale du text-indent:-9999px pour cacher un texte d’un h1 et mettre une image de fond afin d’avoir l’entête du site avec un logo. Finalement, cette technique n’apport rien et Google suggère cette écriture plus simple.
Il vous reste à régler le CSS pour avoir un résultat parfait. N’oubliez pas la balise alt obligatoire et vous pouvez aussi mettre un SVG en image si cela optimise le poids.
Suite à la mise en ligne de nombreux projets d’étudiants, voici une liste d’erreurs et leurs solutions.
Le FTP
Plusieurs logiciels permettent de téléverser vos fichiers sur votre serveur, les plus connus sur Mac étant CyberDuck et FileZilla (en version client pas serveur).
Si la connexion ne marche pas sur votre ordinateur, l’erreur vient de votre hébergeur (c’est rare, mais testez sur une autre machine), de votre logiciel (changez de logiciel ou réinstallez), de vos réglages (FTP, pas Webdav ou autres), ou de vos identifiants (on copie/colle !).
Pour une connexion « normal », il vous faut trois informations :
L’adresse du serveur (p05.evxonline.net, ftp.cluster014.ovh.net, ftp.votrenomdedomaine.com)
Votre identifiant (souvent en rapport avec le nom de domaine)
Votre mot de passe (en général une chaîne complexe imposée par votre hébergeur)
La connexion n’est pas anonyme et le port est souvent celui par défaut (21).
Avant envoyer vos fichiers, il faut comprendre que votre hébergeur a configuré le serveur web ET le serveur FTP pour que les deux soient liés. En envoyant vos fichiers sur le serveur FTP, ils seront accessibles sur votre site à condition de respecter une première règle, la plupart des hébergeurs sont configurés pour avoir un dossier de référence tel que httpdocs, www ou public_html qui rendra public votre fichier sur votre site.
SFTP
La connexion en sFTP est recommandé, cette version est plus sécurisée, mais pas toujours disponible sur les serveurs mutualisés. Si vous pouvez, utilisez-là.
Sans FTP
Dans les cas extrêmes, votre hébergeur propose parfois une page web pour envoyer vos fichiers, c’est assez lourd à utiliser. Si vous n’avez pas le choix, vous pouvez envoyer un seul fichier compressé (.zip), généralement leur outil permet de décompresser celui-ci.
Les noms et l’arborescence
Les chemins
Un fichier test.html dans httpdocs aura pour adresse httpdocs/test.html et sera accessible à l’adresse www.domaine.com/test.html.
Un fichier test-dossier.html dans httpdocs/dossier aura pour adresse httpdocs/dossier/test-dossier.html et sera accessible à l’adresse www.domaine.com/dossier/test-dossier.html.
Index
Un fichier index.html dans httpdocs aura pour adresse httpdocs/index.html et sera accessible à l’adresse www.domaine.com/index.html ET/OU www.domaine.com, ce qui est plutôt la norme.
Parfois l’hébergeur est mal configuré et en l’absence d’un fichier « index » dans chaque dossier du site, on peut voir les fichiers présents, c’est à la fois pratique, mais complètement déconseillé pour des raisons de sécurité.
Les noms
Pour les noms de fichiers et de dossiers, on peut utiliser :
des chiffres
des lettres de a à z (selon le cas avec des capitales)
des tirets – ou _
le reste est à bannir (espace, accents, signes de ponctuations…)
Après
Une fois votre site en ligne, à chaque correction sur votre machine (on parle de version local), il faudra renvoyer les fichiers modifiés sur le FTP (version en ligne).
Certains éditeurs de code intègre un client FTP (Coda sur Mac), ils permettent de travailler sur un projet et de mettre en ligne de manière plus automatisée.
Cette fonction est disponible sur d’autres éditeurs sous forme d’extension.
