​

var noms=["La ville","La rue","La place","La maison","La cuisine","Le placard"]

var verbe=["est"]

var partieune=["une bourgade","artère","un rond-point","une baraque","une pièce d’une habitation,","une armoire"]

var partiedeux=["où l'on prépare à manger","formé par une réunion de constructions et d'habitants","où s’exercent certaines activités","qui sert d'habitation","servant de meuble de rangement"]

​

​

function setup() {

  createCanvas(650, 400);

  frameRate(1);

  background(233,233,233);

  textSize(12);

  textStyle ('bold')

  textFont('arial');

}

​

function draw() {

  // Initialisation 

  var rand1 = int(random(noms.length));

  var rand2 = int(random(verbe.length));

  var rand3 = int(random(partieune.length));

  var rand4 = int(random(partiedeux.length));

  // point de départ de l'escalier

  var x1 = 10; 

  var x2 = x1;

  var y1 = 300;

  var y2 = 300;

  // echelle de l'escalier

  var echelle = 10;

  // Temps de pause en secondes

  var repos = 5;

  var message = noms[rand1] + " " + verbe[rand2]  + " " +                                              partieune[rand3] + " " +  partiedeux[rand4];

  // je vide l'écran

  background(233,233,233);

  // j'affiche le texte

  text(message, random(400), random(300), 200, 200);

  // Je fais l'escalier

  // ------------------

  // on sépare la phrase en mots

  var mots = split(message, ' ');

  // on passe sur tous les mots un à un 

  for(var i =0; i< mots.length; i++){

    // on sépare chaque mot en lettres

    var lettres = split(mots[i], '');

    // on calcule le nombre de lettres pour chaque mot

    var nombreDeLettre = lettres.length;

    // on définit le deuxième point de la ligne en x suivant la taille du mot

    // on multiplie le nombre de lettre par 10 pour avoir une ligne 

    // un peu grande - cette valeur peut être modifiée suivant la taille souhaitée

    x2 = x1 + (nombreDeLettre*echelle);

    // on dessine la ligne horizontale

    line(x1, y1, x2, y1);

    // on enlève une valeur au deuxième y pour faire une ligne 

    // verticale - cette valeur peut être modifiée suivant la 

    // hauteur souhaitée de l'escalier

    y2 = y2 - 20;

    // on dessine la ligne verticale

    line(x2, y1, x2, y2);

    // on update x et y pour les prochaines lignes

    x1 = x1 + (nombreDeLettre*echelle);

    y1 = y1 - 20;

  }

}