Pour mieux apprendre à coder des travaux numériques avec la librairie p5.js (processing en javascript), j’ai décidé de construire des briques successives. Aujourd’hui, la première brique, c’est d’être capable d’ajuster la taille du canevas en instantané à la taille de la fenêtre. C’est comme si on avait un canevas « responsive », allusion aux sites internet qui s’ajustent aux écrans utilisés.

Cet article est le premier d’une série .

Pour valider cette brique, j’ai décidé de dessiner un rectangle de rapport 16/9 qui occupe au maximum 95% de la dimensions la plus faible de l’écran. Ce rectangle doit donc respecter les règles suivantes :

  • son ratio largeur sur hauteur est en permanence de 16/9 : lorsque la largeur fait 16 la hauteur fait 9 ;
  • si la fenêtre est plus large que haute alors la hauteur du rectangle fait 95% de la hauteur de la fenêtre (et donc la largeur du rectangle représente 16/9 de cette hauteur) ;
  • si la fenêtre est plus haute que large alors la largeur du rectangle fait 95% de la largeur de la fenêtre (et donc la hauteur du rectangle représente 9/16 de cette largeur) ;

L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire Ajustement_canevas_2020_05_09_13_46_20. On peut aussi exécuter le code directement sur GitHub via cette url.

Le gif ci-dessous illustre le résultat obtenu :

Et en voici la version réalisée dans l’éditeur en ligne p5.js (https://editor.p5js.org/Anne-Laure/present/isSlIPoVn) :

La version éditable, où l’on voit le code est visible ici : https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn. Et voici le sketch en javascript :

/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
Dessiner un rectangle qui prend 95% de la hauteur ou largeur d'écran et se centre

****************************************************************/

var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle que je veux dessiner w = ratio * h 

var drawLoop = true ; // arrêter la boucle draw
function setup() {

  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);

  grafSize = createVector(0, 0);
  grafPos = createVector(0, 0);

}

function draw() {

  if( drawLoop) {
    
    background(95) ;
    let col = random(100) ; // couleur
    grafSize = ajustImage("sz", ratio);
    grafPos = ajustImage("ps", ratio);
    fill( col, 80, 80, 100 ) ;
    rect(grafPos.x, grafPos.y, grafSize.x, grafSize.y);  
    drawLoop = false ;
    
  }

}


function ajustImage(txt, ratio) {

  // RAPPEL ratio = 3/4 ; // ratio du rectangle que je veux dessiner w= 3 --> h = 4
  let coeff = 0.95; // on veut que l'image ne représente que 95% du plus petit côté du canevas
  let CanR = width / height;
  print(txt, " Canevas W/H ", CanR);

  let maxSize = createVector(0, 0);
  let gPos = createVector(0, 0);

  if (CanR >= 1) {
    // la largeur est supérieure à la hauteur. C'est la hauteur qui nous limite
    if ( height * coeff * ratio >= width * coeff ) {
        
      // il faut que la hauteur soit réduite malgré tout
      maxSize.y = width * coeff / ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.y = height * coeff ; 
    }   
    maxSize.x = maxSize.y * ratio ;
    
  } else {
    // la hauteur est supérieure à la largeur. C'est la largeur qui nous limite
    /* maxSize.x est le plus petit de 
        - la largeur du canevas * le coefficient d'occupation (pour avoir une bordure)
        - la hauteur du dessin qui doit quand même respecter le ratio initial sans dépasser la hauteur du canevas
    */
    if ( width * coeff / ratio >= height * coeff ) {
        
      // il faut que la largeur soit réduite malgré tout
      maxSize.x = height * coeff * ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.x = width * coeff ; 
    }
    
    maxSize.y = maxSize.x / ratio ;
  }

  maxSize.x = int(maxSize.x);
  maxSize.y = int(maxSize.y);
  gPos.x = (width - maxSize.x) / 2;
  gPos.y = (height - maxSize.y) / 2;


  if (txt == "sz") {
    print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, height, maxSize.y);
    return maxSize;
  } else if (txt == "ps") {
    print(txt, "x, y totx toty", gPos.x, gPos.y, maxSize.x + 2 * gPos.x, maxSize.y + 2 * gPos.y);
    return gPos;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // redessiner avec draw()
  drawLoop = true ;
}

Dans le sketch ci-dessus, il y a deux fonctions intéressantes :

  • function windowResized() qui est une fonction p5.js qui s’exécute automatiquement dès que l’on modifie la taille de la fenêtre active. A l’intérieur j’indique qu’il faut retailler le canevas à la taille de la fenêtre et que la variable drawLoop est repassée à true. Ca signifie que la fonction draw redessinera le contenu du canevas.
  • function ajustImage(txt, ratio) que j’ai créée pour calculer la taille du rectangle contenant l’image à afficher. C’est cette fonction qui fait que le rectangle affiché a des dimensions qui respectent les règles exposées.

Et voilà nous avons une première brique ! Les briques suivantes seront publiées dans cette même série, .

Print Friendly, PDF & Email
0 0 votes
Évaluation de l'article
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x