┐[°ᴗ°]┌
 P5js
Quelques bouts de code ré-utilisables :
A voir sous la main :
- la "référence" P5js
- la console d'erreur du navigateur !
- de l'inspiration sur OpenProcessing
Pour faire une capture en appuyant sur la touche S du clavier :

function keyReleased(){
    // console.log(key);
    if( key == 's' ){
        save();
    }
}
Cette page est fait avec un CMS de folie
par Gildas P.
Cours 1 : bases et formes simples
Cours 2 : animation, interactions souris, aléatoire avec random()
Cours 3 : état/événements souris, événements clavier, export/capture en png
Cours 3 : preload et utilisation des images, boucle while et boucle for
Les codes vus en cours
Exercice
semestre 1
Créer une pochette de disque ou une couverture de livre
Avec les contraintes suivantes :
- utiliser P5js
- utiliser au moins une boucle for
- utiliser une image (ou plusieurs)
- utiliser une typo (ou plusieurs)
- intégrer le code d'export avec la touche S
- faire un truc chouette !
Votre oeuvre est à mettre en ligne ici :
https://etu.gildasp.fr/mpro23-24/rendu2-pochette-avec-boucle/
Design libre, sujet libre, format libre.
Compte pour votre note du semestre
Important !
Obligatoire !
à consulter
ou à télécharger...
(mais oubliez la boucle while, for c'est mieux)
Une très bonne explication en vidéo sur les boucles while et for par Daniel Shiffman (en Anglais)
Charger des images en local peut poser problème !
Utilisez Firefox avec la manip décrite ici (à faire une seule fois)
Ou utilisez l'extension "Live Server" de VS Code avec n'importe quel navigateur
Je recommande de faire les 2, comme ça vous êtes tranquille... et puis des fois on a la flemme d'utiliser le serveur.
Pour passer en mode "statique" on écrit

noLoop();

dans la fonction draw(),
ainsi draw() ne sera exécuté qu'une seule fois; c'est bien pour produire un visuel statique par exemple.
Mon "Lab" de 2017 propose aussi pas mal de choses produites pour/avec des étudiant(e)s.
Capture/export d'une image du sketch !
Un exemple, ma version de l'exercice :
(mais vous faites ce que vous voulez)
Je prévois de faire une galerie avec vos projets :)
Du coup merci d'ajouter une image capture.png à côté de index.html dans le dossier de votre projet !
(dans un dossier à votre nom, comme la dernière fois)
Cours4 : utiliser une typo, rotation d'une image, augmenter la qualité de l'export
Pour augmenter la qualité de l'image exportée, il suffit d'utiliser pixelDensity(4) dans le setup().

pixelDensity(4) → 4x plus de pixels
pixelDesnity(10) → 10x plus
etc
Cours 4 : BOUCLE FOR
image placée aléatoirement et de taille aléatoire
Le truc c'est de bien garder le ratio L/H pour ne pas déformer l'image...
monimage.width
monimage.height
permettent d'obtenir la taille "réelle" de l'image.
Cours 4 : BOUCLE FOR
Place, rotation et scale aléatoires avec push() et pop()
avec push() et pop() on peut tourner et scaler non-seulement une image mais aussi des formes plus complexes (ici image + cercle).
Cours 4 : BOUCLE FOR
Mandala en mode spyrographe avec push() et pop()
Cours 4 : BOUCLE FOR
Faire une grille régulière
Avec 2 boucles for imbriquées !
Une pour dupliquer kirby horizontalement...
et pour chaque kirby horizontal on répète kirby verticalement...
Centrer les rectangles, images etc
Par défaut un cercle est centré sur sa position, mais pas les rectangles ni les images.

Pour changer ça, dans setup() :

rectMode(CENTER);
imageMode(CENTER);
Ca parait plus compliqué, mais c'est plus puissant...