Pour suivre cette série d'activités, il est nécessaire d'avoir au préalable travaillé sur les activités consacrées à p5.js (voir ici).

À faire vous-même 1.1

À faire vous-même 1.2

Complétez le fichier "index.html" avec le code suivant : 


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Analyse d'un texte</title>
    <script src="p5.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

Ce fichier ne sera plus modifié dans la suite de ces activités. A chaque fois que vous aurez à créer un nouvel exemple, il vous suffira de "copier-coller" le dossier "txt_0" (en modifiant le nom).

Dans cette série d'activités, nous allons utiliser ce que nous avons vu sur la manipulation des chaînes de caractères, en travaillant sur l'analyse d'un texte afin de montrer en quoi l'informatique permet d'aider à la "compréhension" d'une œuvre littéraire.

Dans ces activités, nous allons utiliser un poème de Victor Hugo, "Trois ans après" (téléchargez (clic droit et "Enregistrer sous") le fichier texte "hugo.txt" ici). Une fois le fichier téléchargé, placez-le dans le dossier "txt_0".

p5js propose une fonction permettant de travailler sur un fichier texte (comme le fichier "hugo.txt"): "loadStrings"


loadStrings("hugo.txt")

Comme vous pouvez le constater, cette fonction ne prend qu'un seul paramètre : le chemin vers le fichier texte.

La fonction "loadStrings" renvoie un tableau de Strings (chaîne de caractères). À chaque retour à la ligne, une nouvelle chaîne de caractères est ajoutée au tableau.

Si, par exemple, vous avez un fichier texte "test.txt" qui contient les 2 lignes suivantes :


Bonjour mon nom est toto,
j'ai 20 ans.

avec la ligne


tab=loadStrings("test.txt")

nous aurons "tab[0]" qui contiendra la chaîne "Bonjour mon nom est toto," et "tab[1]" qui contiendra la chaîne "j'ai 20 ans.".

À faire vous-même 1.3

Saisissez, analysez et testez ce code


var tabTxt;
function preload() {
	tabTxt=loadStrings("hugo.txt");
}
function setup() {
	createCanvas(300,200);
	text(tabTxt[0],20,30);
	text(tabTxt[1],20,50);
}
function draw() {
}

Vous devriez voir les 2 premières lignes du poème de Victor Hugo s'afficher dans le canvas.

Dans le programme ci-dessus, nous utilisons la fonction preload. La fonction loadStrings doit se trouver dans cette fonction preload afin d'être sûr que le texte sera chargé en mémoire avant que les instructions contenues dans la fonction setup soient exécutées.

À faire vous-même 1.4

Créez un programme qui permettra d'afficher les 5 premières strophes du poème.

À faire vous-même 1.5

Créez un programme permettant d'obtenir ceci :