Dans cette activité, nous allons évoquer le positionnement des différents éléments présents sur une page web.
Comme nous l'avons déjà vu dans les activités consacrées au HTML et au CSS (voir ici), les éléments se placent les uns à la suite des autres (on parle du "flux naturel du document"), les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML. Il existe 2 types de balises, les balises de type "block" qui prennent toute la largeur de la page (il est donc impossible d'avoir 2 éléments l'un à côté de l'autre si l'un des 2 éléments est de type "block"). Dit autrement, après une balise de type "block", nous aurons un retour à la ligne. Voici des exemples de balises de type "block" : p, div, toutes les balises h,...Autre type de balises, les balises de type "inline" qui prennent uniquement la largeur dont elles ont besoin (2 balises de type "inline" peuvent se ranger l'une à côté de l'autre). Dit autrement, après une balise de type "inline", nous n'aurons pas de retour à la ligne . Exemples de balises de type "inline" : span, a, img...
Pour en savoir sur les éléments de type "inline" et de type "block" n'hésitez pas à consulter l'excellent cours se trouvant sur le site OpenClassrooms (profitez de votre visite pour étudier le dimensionnement des éléments ("width" et "height") et la notion de marge (margin et padding)).
P5js propose aussi un moyen qui, au premier abord, vous paraîtra sans doute plus simple à utiliser, mais dont il faudra se méfier "comme de la peste" : le positionnement absolu (ici aussi, vous pouvez consulter le site OpenClassrooms si vous voulez en savoir plus sur les différents types de positionnements).
Pour positionner un élément de façon "absolue", il vous faudra utiliser la fonction "position"
La fonction "position" prend 2 paramètres : la coordonnée x de l'élément que l'on souhaite positionner et la coordonnée y de ce même élément. Le point de coordonnées (0,0) correspond au coin gauche supérieur de la fenêtre du navigateur.
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
function setup(){
noCanvas();
para1=createP("Voici un premier paragraphe");
para2=createP("Voici un deuxième paragraphe");
para3=createP("Voici un troisième paragraphe");
para4=createP("Voici un quatrième paragraphe");
}
function draw(){
}
Testez ce code puis ajoutez la ligne ci-dessous à la fin de la fonction "setup"
para4.position(5,5);
Comme vous pouvez le constater, avant de rajouter la ligne "para4.position(5,5);", il n'y a aucun problème, nous avons le "flux naturel" de la page (la balise "p" est de type block. En revanche, l'utilisation de la fonction "position" met un terme à cette "belle harmonie" : les éléments se marchent les uns sur les autres. C'est logique, l'utilisation d'un positionnement absolu interrompt le "flux naturel" et peut entraîner des résultats problématiques comme ici.
Vous allez me dire : "Et bien, il suffit de faire attention aux coordonnées des différents éléments et tout devrait bien se passer !"
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
function setup(){
noCanvas();
para1=createP("Voici un premier paragraphe");
para2=createP("Voici un deuxième paragraphe");
para3=createP("Voici un troisième paragraphe");
para4=createP("Voici un quatrième paragraphe");
para4.position (300,5);
}
function draw(){
}
À première vue, tout est ok, mais diminuez maintenant la taille de votre navigateur, et là, au bout d'un moment, vous devriez voir le quatrième paragraphe disparaitre.
Ce qui rend l'utilisation de la fonction "position" relativement périlleuse, c'est que vous ne contrôlez pas la taille de la fenêtre du navigateur. Si la fenêtre du navigateur est trop petite, certains de vous éléments pourraient ne pas apparaître.
conclusion : prudence avec la fonction "position", ne vous en servez pas "à tout bout de champ" !
ATTENTION : quand vous dessinez des figures dans un canvas, les coordonnées de ces figures sont toujours données par rapport au coin supérieur gauche du canvas, quelle que soit la position du canvas.
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var x=5;
var v=2;
function setup(){
para1=createP("Voici un premier paragraphe");
para2=createP("Voici un deuxième paragraphe");
para3=createP("Voici un troisième paragraphe");
para4=createP("Voici un quatrième paragraphe");
can=createCanvas(200,200);
fill(255,0,0);
}
function draw(){
background(240);
if (x<5 || x>195){
v=-v;
}
x=x+v;
ellipse(x,100,10,10);
}
Comme vous pouvez le constater, les coordonnées du disque sont bien données par rapport au canvas.
Modifiez le programme vu dans le "À faire vous-même 4.3", en ajoutant "can.position(10,10);" à la fin de la fonction "setup".
Comme vous pouvez le constater, les paragraphes sont recouverts par le canvas, mais malgré le déplacement du canvas, la "balle" continue à se déplacer comme auparavant
Il est possible de rendre le fond du canvas transparent à l'aide de la fonction "clear"
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var x=5;
var v=2;
function setup(){
para1=createP("Voici un premier paragraphe");
para2=createP("Voici un deuxième paragraphe");
para3=createP("Voici un troisième paragraphe");
para4=createP("Voici un quatrième paragraphe");
can=createCanvas(200,200);
fill(255,0,0);
can.position(10,10);
}
function draw(){
clear();
if (x<5 || x>195){
v=-v;
}
x=x+v;
ellipse(x,100,10,10);
}
Ce qui peut donner des effets "sympas"