Lorsqu’on conçoit des éléments visuels animés il peut être intéressant de superposer des éléments graphiques animés individuellement. Les GRAPHICS sont des canavas virtuels, ils peuvent être affichés à l’écran ou pas. Ils peuvent apparaître comme un élément qui est devant un autre, ou faire l’objet d’une transformation (rotation, translation, ….) sans que le reste du canevas soit altéré. Ils fonctionnent un peu comme des calques. des feuilles de papier virtuelles. On peut avoir plusieurs « graphics » ou calques dans le même projet.
Dans cette brique j’explore la création de 6 objets GRAPHIC, tous placés sur un canevas blanc qui fait la taille de l’écran :
- graf, un GRAPHIC gris (dont les dimensions correspondent à ce qui a été défini dans l’article « p5.js Brique 1 : un canevas « responsive« ) ;
- polyG[0], un GRAPHIC blanc de la même taille que précédemment à la hauteur près ;
- polyG[1] à polyG[4] des GRAPHIC qui sont des polygones rectangles, de 4 couleurs différentes.
L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire Polygones_ajustes_2020_05_10_08_12_27. On peut aussi exécuter le code directement sur GitHub via cette url.
Le script crée les 6 GRAPHIC, place les différents éléments les uns sur les autres. ce qui donne ceci :
Cette brique est visible sur https://editor.p5js.org/Anne-Laure/sketches/I4K–pRHH.
Le script complet, qui réutilise la fonction ajustImage(txt, ratio) définie dans dans l’article « p5.js Brique 1 : un canevas « responsive » n’a pas été modifiée. Elle sert à calculer la taille du premier rectangle gris, le GRAPHIC graf.
/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/I4K--pRHH
Dessiner des polygones à l'intérieur d'un rectangle qui s'ajustent à la taille du rectangle
Suite de https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
****************************************************************/
// les caractéristiques du rectangle de base
var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle w = ratio * h
var graf ; // le GRAPHICS qui va porter tout
var offsetY = 50 ; // l'espace en hauteur dédié à autre chose
var drawLoop = true ; // arrêter la boucle draw
var polyG = [] ; // le rectangle et les 4 polygones
function setup() {
createCanvas(windowWidth, windowHeight);
grafSize = createVector(0, 0);
grafPos = createVector(0, 0);
}
function draw() {
if( drawLoop) {
background( 255) ;
/*** initialiser les GRAPHICS, calculer les tailles ***/
grafSize = ajustImage("sz", ratio);
graf = createGraphics(grafSize.x, grafSize.y + offsetY );
for (let i = 0; i <5; i++) {
// renderer les formes
polyG[i] = createGraphics(grafSize.x, grafSize.y );
}
grafPos = ajustImage("ps", ratio);
/*** créer les GRAPHICS ***/
// graf est le renderer principal, celui qui sera sauvegardé
graf.background( 220 ) ;
/* créer les formes polyG[i] */
// i = 0 un simple rectangle blanc
polyG[0].fill( 255 ) ;
polyG[0].rect(0,0,graf.width, graf.height) ;
// i = 1 à 4 des polygones plus compliqués
let ep = grafSize.x/20 ; // espace autour des rectangles
let w = grafSize.x/2 - 3 * ep/2 ;
let h = grafSize.y/2 - 3 * ep/2;
polyG[1].fill( 255, 0, 0 ) ;
polyG[1].rect(ep,ep,w, h) ;
polyG[2].fill( 0, 255, 0 ) ;
polyG[2].rect(w+2*ep,ep,w, h) ;
polyG[3].fill( 0, 0, 255 ) ;
polyG[3].rect(w+2*ep,h+2*ep,w,h) ;
polyG[4].fill( 155, 55, 0 ) ;
polyG[4].rect(ep,h+2*ep,w, h) ;
for (let i = 0; i < 5; i++) {
// afficher les polygones dans graf
graf.image( polyG[i], 0, 0) ;
}
// graf.stroke(0) ;
graf.fill(0) ;
graf.textSize(offsetY/3) ;
graf.text("Et voilà !", 10, grafSize.y + 25 ) ;
graf.ellipse(grafSize.x/8, grafSize.y/4, 20, 20 ) ;
image( graf, grafPos.x, grafPos.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 OffH = height - offsetY ; // laisser place pour texte)
let CanR = width / OffH;
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 ( OffH * 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 = OffH * 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 >= OffH * coeff ) {
// il faut que la largeur soit réduite malgré tout
maxSize.x = OffH * 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 = (OffH - maxSize.y) / 2;
if (txt == "sz") {
print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, OffH, 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 ;
}
Et maintenant ?
Et voilà nous avons une deuxième brique ! Les autres briques sont et seront publiées dans cette même série, p5.js mes "briques" de connaissance. La prochaine étape sera de faire des polygones plus compliqués avec certains GRAPHIC. A suivre !