var data = "This is Poko";
              var data2 = "Poko is terribly depressed today";
              
              function setup() {
                createCanvas(900, 500);
                textSize(35);
                noLoop();
                noStroke();
                textAlign(CENTER);
                fill(56, 76, 76, 150);
              }
              
              function draw() {
                background('#d2c8d5');
              
                // poko is represented as a simple circle for now

                ellipse(width / 2, height * 0.45, 70);
              
                /* at the moment the two sentences are printed with delay in between
                and then the screen redraws */

                typeWriter(data, 0, width / 2 - (data.length * 10), height * 0.7, 70, 300);
                typeWriter(data2, 0, width / 2 - (data2.length * 10), height * 0.8, 50, 2800);
                setTimeout(redraw, 7000);
              }
              
              /* the typeWriter function draws each letter equally spaced,
              not taking into account the widths of each letter.
              This was unintentional to get the typing effect to work correctly, but the
              erratic spacing does add to the disjointed feeling.
              */

              function typeWriter(sentence, n, x, y, speed, delay) {
                setTimeout(function () {
                  if (n < (sentence.length)) {
                    text(sentence.substring(n, n + 1), x + n * 20, y);
                    n++;
                    setTimeout(function () {
                      typeWriter(sentence, n, x, y, speed, 0)
                    }, speed);
                  }
                }, delay);
              }
            
          
            
              let started = false;
              let narrative = {};
              let currentScreen;
              
              // I have tried to consolidate the narrative in a json file
              
              function preload() {
                narrative = loadJSON('narrative.json');
              }
              
              function setup() {
                createCanvas(900, 500);
                textSize(22);
                noLoop();
                noStroke();
                textAlign(CENTER);
                fill(56, 76, 76, 150);
              
                currentScreen = 0;
              
                background('#d2c8d5');
                text('c  l  i  c  k', width / 2, height / 2);
              
              }
              
              function draw() {
                if (started) {
              
                  noLoop();
                  background('#d2c8d5');
              
                  ellipse(width / 2, height * 0.45, 70);
              
                  /* So far I can run the typewriter function for each line on each screen,
                  then redraw the screen and run the next set of sentences */
              
                  for (let i = 0; i < narrative.screens[currentScreen].sentences.length; i++) {
                    let line = narrative.screens[currentScreen].sentences[i].content;
                    let lineID = narrative.screens[currentScreen].sentences[i].id;
                    let speed = narrative.screens[currentScreen].sentences[i].speed;
                    let delay = narrative.screens[currentScreen].sentences[i].delay;
                    typeWriter(line, 0, width / 2 - (line.length * 8), 
                    height * (0.7 + lineID / 10), speed, delay);
                  };
                  currentScreen++;
                  let refreshDelay = narrative.screens[currentScreen].refresh;
                  setTimeout(redraw, refreshDelay);
                }
              
                // Typewriter function
              
                function typeWriter(sentence, n, x, y, speed, delay) {
                  setTimeout(function () {
                    if (n < (sentence.length)) {
                      text(sentence.substring(n, n + 1), x + n * 16, y);
                      n++;
                      setTimeout(function () {
                        typeWriter(sentence, n, x, y, speed, 0)
                      }, speed);
                    }
                  }, delay);
                }
              }
              
              function mouseClicked() {
                if (!started) {
                  started = true;
                  loop();
                }
              }
            
          
            
              {
              "screens": [
                {
                  "sentences": [
                    {
                      "id": 0,
                      "content": "this is poko",
                      "speed": 70,
                      "delay": 300
                    },
                    {
                      "id": 1,
                      "content": "poko is terribly depressed today",
                      "speed": 50,
                      "delay": 2800
                    }
                  ]
                },
                {
                  "sentences": [
                    {
                      "id": 0,
                      "content": "poko is a little boy",
                      "speed": 60,
                      "delay": 600
                    },
                    {
                      "id": 1,
                      "content": "(maybe)",
                      "speed": 70,
                      "delay": 3800
                    }
                  ],
                  "refresh": 7000
                },
                {
                  "sentences": [
                    {
                      "id": 0,
                      "content": "a serious little boy",
                      "speed": 60,
                      "delay": 700
                    },
                    {
                      "id": 1,
                      "content": "a sensitive little boy",
                      "speed": 50,
                      "delay": 3800
                    }
                  ],
                  "refresh": 6000
                },
                {
                  "sentences": [
                    {
                      "id": 0,
                      "content": "little poko is a sensitive little",
                      "speed": 60,
                      "delay": 400
                    },
                    {
                      "id": 1,
                      "content": " silly little boy",
                      "speed": 50,
                      "delay": 2600
                    }
                  ],
                  "refresh": 7000
                }
              ]
            }