Activité 14 : p5js (4/4)

P5js en ligne : https://alpha.editor.p5js.org/

Partie 10 :

P5js et JavaScript nous donnent un grand nombre d'outils permettant de travailler sur des chaînes de caractères.

Il est possible de connaitre le nombre de caractères présents dans une chaîne à l'aide de "length".

À faire vous-même 10.1

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)

script.js


var msg;
function setup(){
    can=createCanvas(400,200);
    background(0);
    msg="Bonjour le monde!";
    nb=msg.length;
    textAlign(CENTER);
    fill(255);
    text("La chaîne '"+msg+"' est constituée de "+nb+" caractères",200,100)
}
function draw(){
}

Comme vous pouvez le constater, le caractère "espace" est comptabilisé.

La méthode "charAt" retourne le caractère situé à l'index qui a été passé en paramètre :

À faire vous-même 10.2

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var msg;
var c;
function setup(){
    can=createCanvas(400,200);
    background(0);
    msg="Bonjour le monde!";
    c=msg.charAt(3)
    textAlign(CENTER);
    fill(255);
    text("Le 4e caractère de la chaîne '"+msg+"' est un "+c,200,100)
}
function draw(){
}

Attention : le premier caractère a pour indice 0 (comme dans un tableau), donc, l'indice 3 correspond bien au 4e caractère.

Pour comparer 2 chaînes de caractères, il est possible d'utiliser le double égal "==".

À faire vous-même 10.3

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var msg1;
var msg2;
var msg;
function setup(){
    can=createCanvas(600,200);
    background(0);
    msg1="Bonjour le monde!";
    msg2="Bonjour le monde";
    msg="Les chaines de caractères '"+msg1+"' et '"+msg2+"' sont";
    textAlign(CENTER);
    fill(255);
    if (msg1==msg2){
        text(msg+ " identiques",300,100);
    }
    else{
        text(msg+ " différentes",300,100);
    }
}
function draw(){
}

La méthode "toUpperCase" permet de convertir tous les caractères d'une chaîne en majuscules. La méthode "toLowerCase" permet de convertir tous les caractères d'une chaîne en minuscules.

À faire vous-même 10.4

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var msg;
function setup(){
    can=createCanvas(400,200);
    background(0);
    msg="Bonjour le monde!";
    textAlign(CENTER);
    fill(255);
    text("Tous les caractères sont en minuscule : "+msg.toLowerCase(),200,50);
    text("Tous les caractères sont en majuscule : "+msg.toUpperCase(),200,150);

}
function draw(){
}

La méthode "substring" permet de retourner une partie d'une chaîne de caractères. Elle peut prendre un ou deux paramètres :


maChaine.substring(index_deb);

ou


maChaine.substring(index_deb, index_fin);

Si "index_fin" n'est pas précisé, la méthode retourne une chaîne composée des caractères situés entre "index_deb" et la fin de la chaîne. Si "index_fin" est renseigné, la méthode retourne une chaîne composée des caractères situés entre "index_deb" et "index_fin".

À faire vous-même 10.5

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var msg;
function setup(){
    can=createCanvas(600,200);
    background(0);
    msg="Bonjour le monde!";
    textAlign(CENTER);
    fill(255);
    text("Caractères à partir de l'indice 10 jusqu'à la fin de la chaîne : "+msg.substring(10),300,50);
    text("Caractères de l'indice 0 à l'indice 6 : "+msg.substring(0,7),300,150);
}
function draw(){
}

Attention : comme vous pouvez le constater le caractère situé à l'indice "index_fin" est exclu.

La méthode "indexOf" permet de recherche un motif de caractères (une suite de caractères) dans une chaîne. Si ce motif est trouvé, la méthode "indexOf" renvoie l'indice de position du premier caractère du motif.

À faire vous-même 10.6

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var msg;
var motif;
var i;
function setup(){
    can=createCanvas(400,200);
    background(0);
    msg="Bonjour le monde!";
    motif="jour";
    i=msg.indexOf(motif);
    textAlign(CENTER);
    fill(255);
    text("le début du motif '"+motif+"' se situe à l'index "+i,200,100);
}
function draw(){
}

À faire vous-même 10.7

Écrivez un programme qui permettra de donner l'indice de position du motif "on".

Comme vous l'avez peut-être remarqué, le motif "on" est présent à 2 endroits (dans "bonjour" et dans "monde"). La méthode "indexOf" renvoie l'indice de position du premier motif rencontré, le second est ignoré.

À faire vous-même 10.8

Écrivez un programme qui vous permettra de répondre à la question suivante : que renvoie la méthode "indexOf" dans le cas où le motif recherché n'est pas présent dans la chaîne ?

Il est possible de séparer les éléments d'une chaîne de caractères en utilisant un "caractère séparateur" :

La méthode "split" prend 2 arguments : la chaîne de caractères à séparer et le "caractère séparateur"


split("tata;titi;toto",";")

Dans l'exemple ci-dessus, la méthode "split" retourne le tableau suivant : ["tata","titi","toto"]

À faire vous-même 10.9

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var str;
var tab;
function setup(){
    can=createCanvas(400,200);
    background(0);
    str="toto;titi;tata";
    tab=split(str,";");
    textAlign(CENTER);
    fill(255);
    text(tab[1],200,100);
}
function draw(){
}

Il est tout à fait possible d'utiliser le caractère "espace" comme "caractère séparateur"

À faire vous-même 10.10

Écrivez un programme permettant de séparer les différents mots d'une phrase. Par exemple, en partant de la phrase "Bonjour le monde!", votre programme devra permettre d'afficher ceci :


le mot n°0 est 'Bonjour'
le mot n°1 est 'le'
le mot n°2 est 'monde!'

Attention votre programme devra fonctionner avec n'importe quelle phrase.

À faire vous-même 10.11

Écrivez un programme permettant d'inverser les mots d'une phrase. Par exemple, pour la phrase "Bonjour le monde!", on obtiendra "monde! le Bonjour"

Pour vous aider : il faudra (sans doute) utiliser la concaténation.

La méthode "splitTokens" est une méthode "cousine" de la méthode "split" qui permet de considérer plusieurs "caractères séparateurs" en même temps.

À faire vous-même 10.12

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var str;
var tab;
function setup(){
    can=createCanvas(400,200);
    background(0);
    str="toto titi,tata;tutu! hello";
    tab=splitTokens(str," ;,!");
    textAlign(CENTER);
    fill(255);
    for (i=0;i<tab.length;i=i+1){
        text(tab[i],200,20+20*i);
    }
}
function draw(){
}

Les "caractères séparateurs" sont placés les uns à la suite des autres (y compris le caractère "espace").

La méthode "join" a l'effet inverse de la méthode "split" :

À partir d'un tableau contenant des chaînes de caractères, la méthode "join" crée une chaîne unique. Chaque élément est séparé par un "caractère de séparation"

À faire vous-même 10.13

modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var str;
var tab;
function setup(){
    can=createCanvas(400,200);
    background(0);
    tab=["toto","titi","tata"];
    str=join(tab,";");
    textAlign(CENTER);
    fill(255);
    text(str,200,100);
}
function draw(){
}

À faire vous-même 10.14

Écrivez un programme permettant d'obtenir la chaîne "Bonjour le monde!" à partir de la chaîne "Bonjour*le*monde!" :


Avant : Bonjour*le*monde!
Après : Bonjour le monde!

Partie 11 : 

Cette activité va aborder l'utilisation de la programmation orientée objet. Si vous avez peu de souvenirs sur cette notion, n'hésitez pas à consulter de nouveau cette activité

À faire vous-même 11.1

Saisissez, analysez et testez ce code


Balle=function(){
    this.x=floor(random(20,380));
    this.y=floor(random(20,380));
    this.rayon=20;
    this.transp=floor(random(20,50))
    this.vx=3;
    this.vy=3;
    this.couleur={r:floor(random(0,255)),v:floor(random(0,255)),b:floor(random(0,255))}
    this.deplacement=function(){
        if (this.x<this.rayon || this.x>400-this.rayon){
            this.vx=-this.vx;
        }
        if (this.y<this.rayon || this.y>400-this.rayon){
            this.vy=-this.vy;
        }
        this.x=this.x+this.vx;
        this.y=this.y+this.vy;
    }
    this.affichage=function(){
       fill(this.couleur.r,this.couleur.v,this.couleur.b,this.transp);
       ellipse(this.x,this.y,this.rayon,this.rayon);
    }
}
function setup(){
  createCanvas(400,400);
  balle=new Balle();
}
function draw(){
  background(240);
  balle.deplacement();
  balle.affichage();
}

Ce code ne devrait pas vous poser de problème. Cependant, n'hésitez pas à poser des questions si nécessaire.

Dans le code ci-dessus, un seul objet est créé ("balle"), l'utilisation des objets prend tout son sens quand le programme crée une multitude d'objets. Ces objets sont "rangés" dans un tableau dès leur création.

À faire vous-même 11.2

Saisissez, analysez et testez ce code


Balle=function(){
    this.x=floor(random(20,380));
    this.y=floor(random(20,380));
    this.rayon=10;
    this.transp=floor(random(20,50));
    this.vx=floor(random(-3,3));
    this.vy=floor(random(-3,3));
    this.couleur={r:floor(random(0,255)),v:floor(random(0,255)),b:floor(random(0,255))}
    this.deplacement=function(){
        if (this.x<this.rayon || this.x>400-this.rayon){
            this.vx=-this.vx;
        }
        if (this.y<this.rayon || this.y>400-this.rayon){
            this.vy=-this.vy;
        }
        this.x=this.x+this.vx;
        this.y=this.y+this.vy;
    }
    this.affichage=function(){
       fill(this.couleur.r,this.couleur.v,this.couleur.b,this.transp);
       ellipse(this.x,this.y,2*this.rayon,2*this.rayon);
    }
}
var tabBalle=[];
function setup(){
  createCanvas(400,400);
  for (i=0;i<100;i=i+1){
      tabBalle.push(new Balle());
  }
}
function draw(){
  background(240);
  for (i=0;i<tabBalle.length;i=i+1){
      tabBalle[i].deplacement();
      tabBalle[i].affichage();
  }
}

Nous créons un tableau "tabBalle" et nous rangeons des objets de type "Balle" dans ce tableau. Dans la fonction "draw", nous passons en revue tous les objets contenus dans le tableau "tabBalle" grâce à une boucle "for".

Les variables systèmes "windowWidth" et "windowHeight" donnent respectivement, la largeur et la hauteur de la fenêtre de votre navigateur. Il est donc facile d'avoir une surface de dessin (canvas) qui prendra toute la fenêtre du navigateur, il suffira d'écrire :


createCanvas(windowWidth,windowHeight);

Si une fois votre navigateur ouvert, vous le redimensionnez, la fenêtre de dessin ne s'adaptera pas à cette nouvelle taille. Pour forcer la fenêtre de dessin à s'adapter, il faut ajouter la fonction suivante :


function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

À faire vous-même 11.3

Saisissez, analysez et testez ce code


function setup(){
  createCanvas(windowWidth-20,windowHeight-20);
}
function draw(){
  background(240);
}
function windowResized() {
  resizeCanvas(windowWidth-20, windowHeight-20);
}

Comme vous pouvez le constater, la taille du canvas s'adapte à la taille de la fenêtre de votre navigateur. Pour éviter d'avoir des "ascenseurs" sur le côté de la fenêtre du navigateur, je vous conseille de soustraire 20 pixels, comme cela a été fait ci-dessus.

 

Source : http://www.ac-grenoble.fr/disciplines/informatiquelycee/ICN_sec.html

Affichages : 4977