P5js est une librairie Javascript qui ajoute une balise <canvas> dans votre page web, et fournit tout un tas d'outil (en Javascript) pour y dessiner des formes et des images interactives.
On parle de design génératif, c'est à dire comment générer avec du code une infinité de formes graphiques, interactives ou statiques.
Plus d'infos sur le design génératif :
Pjs permet de faire un "croquis" en code, on appelle ça un "SKETCH" (mais on n'est pas obligé, c'est juste un programme Javascript).
Les codes vus en cours
Pour pouvoir charger des images en local il faut obligatoirement utiliser Firefox !
Pour passer en mode "statique" on écrit
noLoop();
dans la fonction draw().
ainsi draw() ne sera exécuté qu'une seule fois, ensuite le sketch s'arrête.
ainsi draw() ne sera exécuté qu'une seule fois, ensuite le sketch s'arrête.
Depuis le lien de chaque sketch vous pourrez :
- lire le code commenté
- afficher le sketch
- télécharger le zip du sketch complet
- lire le code commenté
- afficher le sketch
- télécharger le zip du sketch complet
pour tester vite-fait du code dans le navigateur, sans vous embêter.
pour fabriquer un vrai projet à conserver/publier.
Tout est prêt : index.html, le dossier js/, css/, etc
Vous n'avez plus qu'à modifier js/sketch.js
Tout est prêt : index.html, le dossier js/, css/, etc
Vous n'avez plus qu'à modifier js/sketch.js
Tutos textes et vidéos
Les super vidéos (en Anglais) de Daniel Shiffman, grand vulgarisateur de programmation créative.
Toutes les notions vues en cours (et d'autres) y sont abordées de manières ludique et pertinente.
Toutes les notions vues en cours (et d'autres) y sont abordées de manières ludique et pertinente.
Les tutos officiels pas à pas (en Anglais) de la communauté P5js.
Il vous suffit d'ajouter ce code dans votre sketch pour déclencher l'export lorsqu'on appuie sur la touche S :
function keyReleased(){
if(key=='s'){save();
}
}
Facile à intégrer à n'importe quel projet !
Export image de votre sketch
Pour aller plus loin
Une archive de mes modules/tutos P5js fabriqués en 2017 pour mes étudiants...
N'oubliez pas d'ouvrir la console d'erreurs quand vous codez du Javascript !
Exercice
Toujours valables pour celles/ceux qui ne l'ont pas encore fait !
→ Compte dans la note du 2nd semestre
Générer/composer en code une
couverture de livre ou d'album avec p5js
- choix libre d'une/plusieurs image(s) (png si vous
voulez de la transparence) à répéter de façon maîtrisée (ou
chaotique si c'est fait exprès) avec une boucle for
- ou travail de formes 2d répétées
- choix d'une/plusieurs typo(s) à intégrer pour le/les
titres (ou même du texte répété dans une boucle for)
- intégrer votre nom dans le visuel (par ex en format
discret dans un coin)
- pour cet exercice on travaille en mode statique, c'est à
dire sans interactivité, n'oublier donc pas de mettre noLoop()
à la fin de draw() pour arrêter la répétition de draw()
A mettre en ligne dans un dossier à votre nom sur
(Allez voir, il y a déjà des trucs cool !)
J'ajoute : intégrer le code pour exporter une image quand on appuie sur la touche S.
(ça me permettra de transformer la page en galerie par la suite)
Crédits : cette page est faite avec un outil de création de pages web (moches) fait maison par Gildas P.
┐[°ᴗ°]┌ Stinky CMS ©
Le CMS qui pue, le CMS qui tue !
Le CMS qui pue, le CMS qui tue !