Screensavers.p5.js (suite)

— Suivi des mini-projets dans Miro

• https://miro.com/app/board/uXjVJHZdI0Q=/

— Transformer une forme avec push(), pop(), translate(), et rotate()

La documentation est assez claire sur le fonctionnement des "transformations 2D" (qui peuvent aussi fonctionner en 3D) : https://p5js.org/reference/p5/rotate/
Les grands principes :

• Les fonctions translate() et rotate() affectent tout le plan de travail
• Pour isoler une transformation il faut l'intégrer entre 2 fonctions push() et pop()

function setup() {
  createCanvas(800, 800);
  background(0);
  stroke(255);
  rectMode(CENTER); // positionner l'axe de rotation au centre

  // première transformation
  push();
  // les transformations s'appliquent uniquement pour les formes situées ici
  translate(width / 2, height / 2);
  rotate(radians(45));
  rect(0, 0, 100);
  pop();

  // 2e transformation complètement indépendante de la première
  push();
  // les transformations s'appliquent uniquement pour les formes situées ici
  translate(100, 100);
  rotate(radians(20));
  line(0, 0, 0, 100);
  pop();
}

— Boucles, suite

Voici un autre exercice liant boucle et rotation :

function setup() {
  createCanvas(800, 800);
  background(0);
  stroke(255);
  
  // boucle qui répète 36 fois le bloc de code
  for(let i = 0; i < 36; i++){
      push();
      translate(width/2,height/2); // on place au centre
      rotate(radians(i*10)); // rotation i * 10 (parce que 360°)
      line(0,0,0,200); // on trace la ligne verticale de 0,0 à 0,100
      pop();
  }
}

Ensuite il est possible de conditionner le nombre de répétition à une valeur, comme les secondes bien sûr, ou bien la posiion de la souris, ou le son du micro, etc.

Exemple avec la souris (les nombres en haut permettent de lier position de la souris et nombre de répétitions) :

Exemple avec les secondes :

Exemple avec le micro :

Exemple avec la météo (humidité à Lyon) :

Et enfin exemple complet d'horloge avec 3 transformations indépendantes liées aux heures, minutes et secondes.