// copying its source code (it needs an extra file

// and a change to index.html to function)

​

let grammar;

​

// see http://www.crystalcodepalace.com/traceryTut.html

let rules = {

    "name": ["Arjun","Yuuma","Darcy","Mia","Chiaki","Izzi","Azra","Lina"],

    "animal": ["unicorn","raven","sparrow","scorpion","coyote","eagle","owl","lizard","zebra","duck","kitten"],

    "mood": ["vexed","indignant","impassioned","wistful","astute","courteous"],

    "story": ["#hero# traveled with her pet #heroPet#.  #hero# was never #mood#, for the #heroPet# was always too #mood#."],

    "origin": ["#[hero:#name#][heroPet:#animal#]story#"]

};

​

​

function setup() {

  createCanvas(400, 400);

  frameRate(0.5);

​

  grammar = tracery.createGrammar(rules);

}

​

function draw() {

  background(220);

  let generatedText = grammar.flatten("#origin#");

  // see also: grammar.expand("#origin#")

  textSize(18);

  text(generatedText, 20, 20, width-40, height-40);

}