HP

4 years ago · 31467d48f2
parent 77a391234a
commit 31467d48f2
43 changed files with 135594 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/1_letters/.DS_Store
+++ b/1_letters/.DS_Store
--- a/1_letters/chroma.min.js
+++ b/1_letters/chroma.min.js
--- a/1_letters/data/faust_kurz.txt
+++ b/1_letters/data/faust_kurz.txt
@ -0,0 +1,17 @@
 Ihr naht euch wieder, schwankende Gestalten,
 Die früh sich einst dem trüben Blick gezeigt.
 Versuch ich wohl, euch diesmal festzuhalten?
 Fühl ich mein Herz noch jenem Wahn geneigt?
 Ihr drängt euch zu! nun gut, so mögt ihr walten,
 Wie ihr aus Dunst und Nebel um mich steigt;
 Mein Busen fühlt sich jugendlich erschüttert
 Vom Zauberhauch, der euren Zug umwittert.
 Ihr bringt mit euch die Bilder froher Tage,
 Und manche liebe Schatten steigen auf;
 Gleich einer alten, halbverklungnen Sage
 Kommt erste Lieb und Freundschaft mit herauf;
 Der Schmerz wird neu, es wiederholt die Klage
 Des Lebens labyrinthisch irren Lauf,
 Und nennt die Guten, die, um schöne Stunden
 Vom Glück getäuscht, vor mir hinweggeschwunden.
--- a/1_letters/data/library_babel_extract1.txt
+++ b/1_letters/data/library_babel_extract1.txt
@ -0,0 +1 @@
 I say that the Library is unending. The idealists argue that the
hexagonal rooms are a necessary form of absolute space or, at least, of our
intuition of space. They reason that a triangular or pentagonal room is
inconceivable. (The mystics claim that their ecstasy reveals to them a circular
chamber containing a great circular book, whose spine is continuous and which
follows the complete circle of the walls; but their testimony is suspect; their
words, obscure. This cyclical book is God.) Let it suffice now for me to repeat the
classic dictum: The Library is a sphere whose exact center is any one of its
hexagons and whose circumference is inaccessible.
--- a/1_letters/gg-dep-bundle.js
+++ b/1_letters/gg-dep-bundle.js
--- a/1_letters/index.html
+++ b/1_letters/index.html
@ -0,0 +1,28 @@
 <!DOCTYPE html><html><head>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <!-- Generative Design Dependencies here -->
    <!-- GG Bundled -->
    <script src="gg-dep-bundle.js"></script>
    <!-- Opentype -->
    <script src="opentype.min.js"></script>
    <!-- Rita -->
    <script src="rita-small.min.js"></script>
    <!-- Chroma -->
    <script src="chroma.min.js"></script>
    <!-- Jquery -->
    <script src="jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- sketch additions -->
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- main -->
    <script src="sketch.js"></script>
 </body></html>
--- a/1_letters/jquery-3.3.1.min.js
+++ b/1_letters/jquery-3.3.1.min.js
--- a/1_letters/opentype.min.js
+++ b/1_letters/opentype.min.js
--- a/1_letters/p5.dom.min.js
+++ b/1_letters/p5.dom.min.js
--- a/1_letters/p5.min.js
+++ b/1_letters/p5.min.js
--- a/1_letters/p5.sound.min.js
+++ b/1_letters/p5.sound.min.js
--- a/1_letters/rita-small.min.js
+++ b/1_letters/rita-small.min.js
--- a/1_letters/sketch.js
+++ b/1_letters/sketch.js
@ -0,0 +1,140 @@
 // P_3_1_3_02
 //
 // Generative Gestaltung – Creative Coding im Web
 // ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
 // Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
 // with contributions by Joey Lee and Niels Poldervaart
 // Copyright 2018
 //
 // http://www.generative-gestaltung.de
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
 /**
 * analysing and sorting the letters of a text
 * connecting subsequent letters with lines
 *
 * MOUSE
 * position x          : interpolate between normal text and sorted position
 *
 * KEYS
 * 1                   : toggle lines on/off
 * 2                   : toggle text on/off
 * 3                   : switch all letters off
 * 4                   : switch all letters on
 * a-z                 : switch letter on/off
 * CONTROL             : save png
 */
 'use strict';
 var joinedText;
 var alphabet;
 var drawLetters = [];
 var posX;
 var posY;
 var drawLines = false;
 var drawText = true;
 function preload() {
  joinedText = loadStrings('data/library_babel_extract1.txt');
 }
 function setup() {
  createCanvas(1920, windowHeight);
  textFont('monospace', 30);
  fill(0);
  joinedText = joinedText.join(' ');
  alphabet = getUniqCharacters();
  for (var i = 0; i < alphabet.length; i++) {
    drawLetters[i] = true;
  }
 }
 function draw() {
  background(213,204,255);
  posX = 20;
  posY = 40;
  var oldX = 0;
  var oldY = 0;
  // go through all characters in the text to draw them
  for (var i = 0; i < joinedText.length; i++) {
    // again, find the index of the current letter in the character set
    var upperCaseChar = joinedText.charAt(i).toUpperCase();
    var index = alphabet.indexOf(upperCaseChar);
    if (index < 0) continue;
    var sortY = index * 20 + 40;
    var m = map(mouseX, 50, width - 50, 0, 1);
    m = constrain(m, 0, 1);
    var interY = lerp(posY, sortY, m);
    if (drawLetters[index]) {
      if (drawLines) {
        if (oldX != 0 && oldY != 0) {
          stroke(181, 157, 0, 100);
          line(oldX, oldY, posX, interY);
        }
        oldX = posX;
        oldY = interY;
      }
      if (drawText) {
        noStroke();
        text(joinedText.charAt(i), posX, interY);
      }
    } else {
      oldX = 0;
      oldY = 0;
    }
    posX += textWidth(joinedText.charAt(i));
    if (posX >= width - 200 && upperCaseChar == ' ') {
      posY += 30;
      posX = 20;
    }
  }
 }
 function getUniqCharacters() {
  var charsArray = joinedText.toUpperCase().split('');
  var uniqCharsArray = charsArray.filter(function(char, index) {
    return charsArray.indexOf(char) == index;
  }).sort();
  return uniqCharsArray.join('');
 }
 function keyReleased() {
  if (keyCode == CONTROL) saveCanvas(gd.timestamp(), 'png');
  if (key == '1') drawLines = !drawLines;
  if (key == '2') drawText = !drawText;
  if (key == '3') {
    for (var i = 0; i < alphabet.length; i++) {
      drawLetters[i] = false;
    }
  }
  if (key == '4') {
    drawText = true;
    for (var i = 0; i < alphabet.length; i++) {
      drawLetters[i] = true;
    }
  }
  var index = alphabet.indexOf(key.toUpperCase());
  if (index >= 0) {
    drawLetters[index] = !drawLetters[index];
  }
 }
--- a/1_letters/style.css
+++ b/1_letters/style.css
@ -0,0 +1,8 @@
 html, body {
  padding: 0;
  margin: 0;
 }
 canvas {
  vertical-align: top;
 }
--- a/2_letters+code/.DS_Store
+++ b/2_letters+code/.DS_Store
--- a/2_letters+code/chroma.min.js
+++ b/2_letters+code/chroma.min.js
--- a/2_letters+code/data/faust_kurz.txt
+++ b/2_letters+code/data/faust_kurz.txt
@ -0,0 +1,17 @@
 Ihr naht euch wieder, schwankende Gestalten,
 Die früh sich einst dem trüben Blick gezeigt.
 Versuch ich wohl, euch diesmal festzuhalten?
 Fühl ich mein Herz noch jenem Wahn geneigt?
 Ihr drängt euch zu! nun gut, so mögt ihr walten,
 Wie ihr aus Dunst und Nebel um mich steigt;
 Mein Busen fühlt sich jugendlich erschüttert
 Vom Zauberhauch, der euren Zug umwittert.
 Ihr bringt mit euch die Bilder froher Tage,
 Und manche liebe Schatten steigen auf;
 Gleich einer alten, halbverklungnen Sage
 Kommt erste Lieb und Freundschaft mit herauf;
 Der Schmerz wird neu, es wiederholt die Klage
 Des Lebens labyrinthisch irren Lauf,
 Und nennt die Guten, die, um schöne Stunden
 Vom Glück getäuscht, vor mir hinweggeschwunden.
--- a/2_letters+code/data/library_babel_extract1.txt
+++ b/2_letters+code/data/library_babel_extract1.txt
@ -0,0 +1 @@
 I say that the Library is unending. The idealists argue that the
hexagonal rooms are a necessary form of absolute space or, at least, of our
intuition of space. They reason that a triangular or pentagonal room is
inconceivable. (The mystics claim that their ecstasy reveals to them a circular
chamber containing a great circular book, whose spine is continuous and which
follows the complete circle of the walls; but their testimony is suspect; their
words, obscure. This cyclical book is God.) Let it suffice now for me to repeat the
classic dictum: The Library is a sphere whose exact center is any one of its
hexagons and whose circumference is inaccessible.
--- a/2_letters+code/gg-dep-bundle.js
+++ b/2_letters+code/gg-dep-bundle.js
--- a/2_letters+code/index.html
+++ b/2_letters+code/index.html
@ -0,0 +1,28 @@
 <!DOCTYPE html><html><head>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <!-- Generative Design Dependencies here -->
    <!-- GG Bundled -->
    <script src="gg-dep-bundle.js"></script>
    <!-- Opentype -->
    <script src="opentype.min.js"></script>
    <!-- Rita -->
    <script src="rita-small.min.js"></script>
    <!-- Chroma -->
    <script src="chroma.min.js"></script>
    <!-- Jquery -->
    <script src="jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- sketch additions -->
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- main -->
    <script src="sketch.js"></script>
 </body></html>
--- a/2_letters+code/jquery-3.3.1.min.js
+++ b/2_letters+code/jquery-3.3.1.min.js
--- a/2_letters+code/opentype.min.js
+++ b/2_letters+code/opentype.min.js
--- a/2_letters+code/p5.dom.min.js
+++ b/2_letters+code/p5.dom.min.js
--- a/2_letters+code/p5.min.js
+++ b/2_letters+code/p5.min.js
--- a/2_letters+code/p5.sound.min.js
+++ b/2_letters+code/p5.sound.min.js
--- a/2_letters+code/rita-small.min.js
+++ b/2_letters+code/rita-small.min.js
--- a/2_letters+code/sketch.js
+++ b/2_letters+code/sketch.js
@ -0,0 +1,120 @@
 // P_3_1_3_01
 //
 // Generative Gestaltung – Creative Coding im Web
 // ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
 // Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
 // with contributions by Joey Lee and Niels Poldervaart
 // Copyright 2018
 //
 // http://www.generative-gestaltung.de
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
 /**
 * analysing and sorting the letters of a text
 * changing the letters alpha value in relation to frequency
 *
 * MOUSE
 * position x          : interpolate between normal text and sorted position
 *
 * KEYS
 * a                   : toggle alpha mode
 * s                   : save png
 */
 'use strict';
 var joinedText;
 var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ,.;!? ';
 var counters = [];
 var posX;
 var posY;
 var drawAlpha = true;
 function preload() {
  joinedText = loadStrings('data/library_babel_extract1.txt');
 }
 function setup() {
  createCanvas(1920, windowHeight);
  noStroke();
  textFont('monospace', 30);
  joinedText = joinedText.join(' ');
  // use the following command, to collect all characters in the text automatically
  // alphabet = getUniqCharacters();
  for (var i = 0; i < alphabet.length; i++) {
    counters[i] = 0;
  }
  countCharacters();
 }
 function draw() {
  background(213,204,255);
  posX = 20;
  posY = 40;
  // go through all characters in the text to draw them
  for (var i = 0; i < joinedText.length; i++) {
    // again, find the index of the current letter in the character set
    var upperCaseChar = joinedText.charAt(i).toUpperCase();
    var index = alphabet.indexOf(upperCaseChar);
    if (index < 0) continue;
    if (drawAlpha) {
      fill(0, counters[index] * 3);
    } else {
      fill(0);
    }
    var sortY = index * 20 + 40;
    var m = map(mouseX, 50, width - 50, 0, 1);
    m = constrain(m, 0, 1);
    var interY = lerp(posY, sortY, m);
    text(joinedText.charAt(i), posX, interY);
    posX += textWidth(joinedText.charAt(i));
    if (posX >= width - 200 && upperCaseChar == ' ') {
      posY += 30;
      posX = 20;
    }
  }
 }
 function countCharacters() {
  for (var i = 0; i < joinedText.length; i++) {
    // get one character from the text and turn it to uppercase
    var c = joinedText.charAt(i);
    var upperCaseChar = c.toUpperCase();
    var index = alphabet.indexOf(upperCaseChar);
    // increase the respective counter
    if (index >= 0) counters[index]++;
  }
 }
 function getUniqCharacters() {
  var charsArray = joinedText.toUpperCase().split('');
  var uniqCharsArray = charsArray.filter(function(char, index) {
    return charsArray.indexOf(char) == index;
  }).sort();
  return uniqCharsArray.join('');
 }
 function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
  if (key == 'a' || key == 'A') drawAlpha = !drawAlpha;
 }
--- a/2_letters+code/style.css
+++ b/2_letters+code/style.css
@ -0,0 +1,8 @@
 html, body {
  padding: 0;
  margin: 0;
 }
 canvas {
  vertical-align: top;
 }
--- a/3_words/.DS_Store
+++ b/3_words/.DS_Store
--- a/3_words/chroma.min.js
+++ b/3_words/chroma.min.js
--- a/3_words/data/AllTheWorldsAStage.txt
+++ b/3_words/data/AllTheWorldsAStage.txt
@ -0,0 +1,28 @@
 All the world's a stage,
 And all the men and women merely players;
 They have their exits and their entrances;
 And one man in his time plays many parts,
 His acts being seven ages. At first the infant,
 Mewling and puking in the nurse's arms;
 Then the whining school-boy, with his satchel
 And shining morning face, creeping like snail
 Unwillingly to school. And then the lover,
 Sighing like furnace, with a woeful ballad
 Made to his mistress' eyebrow. Then a soldier,
 Full of strange oaths, and bearded like the pard,
 Jealous in honour, sudden and quick in quarrel,
 Seeking the bubble reputation
 Even in the cannon's mouth. And then the justice,
 In fair round belly with good capon lin'd,
 With eyes severe and beard of formal cut,
 Full of wise saws and modern instances;
 And so he plays his part. The sixth age shifts
 Into the lean and slipper'd pantaloon,
 With spectacles on nose and pouch on side,
 His youthful hose, well sav'd, a world too wide
 For his shrunk shank; and his big manly voice,
 Turning again toward childish treble, pipes
 And whistles in his sound. Last scene of all,
 That ends this strange eventful history,
 Is second childishness and mere oblivion;
 Sans teeth, sans eyes, sans taste, sans every thing.
--- a/3_words/data/library_babel_extract1.txt
+++ b/3_words/data/library_babel_extract1.txt
@ -0,0 +1 @@
 I say that the Library is unending. The idealists argue that the
hexagonal rooms are a necessary form of absolute space or, at least, of our
intuition of space. They reason that a triangular or pentagonal room is
inconceivable. (The mystics claim that their ecstasy reveals to them a circular
chamber containing a great circular book, whose spine is continuous and which
follows the complete circle of the walls; but their testimony is suspect; their
words, obscure. This cyclical book is God.) Let it suffice now for me to repeat the
classic dictum: The Library is a sphere whose exact center is any one of its
hexagons and whose circumference is inaccessible.
--- a/3_words/gg-dep-bundle.js
+++ b/3_words/gg-dep-bundle.js
--- a/3_words/index.html
+++ b/3_words/index.html
@ -0,0 +1,28 @@
 <!DOCTYPE html><html><head>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <!-- Generative Design Dependencies here -->
    <!-- GG Bundled -->
    <script src="gg-dep-bundle.js"></script>
    <!-- Opentype -->
    <script src="opentype.min.js"></script>
    <!-- Rita -->
    <script src="rita-small.min.js"></script>
    <!-- Chroma -->
    <script src="chroma.min.js"></script>
    <!-- Jquery -->
    <script src="jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- sketch additions -->
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- main -->
    <script src="sketch.js"></script>
 </body></html>
--- a/3_words/jquery-3.3.1.min.js
+++ b/3_words/jquery-3.3.1.min.js
--- a/3_words/opentype.min.js
+++ b/3_words/opentype.min.js
--- a/3_words/p5.dom.min.js
+++ b/3_words/p5.dom.min.js
--- a/3_words/p5.min.js
+++ b/3_words/p5.min.js
--- a/3_words/p5.sound.min.js
+++ b/3_words/p5.sound.min.js
--- a/3_words/rita-small.min.js
+++ b/3_words/rita-small.min.js
--- a/3_words/sketch.js
+++ b/3_words/sketch.js
@ -0,0 +1,254 @@
 // P_3_1_3_05
 //
 // Generative Gestaltung – Creative Coding im Web
 // ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
 // Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
 // with contributions by Joey Lee and Niels Poldervaart
 // Copyright 2018
 //
 // http://www.generative-gestaltung.de
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
 /**
 * analysing and sorting the words of a text by Part of Speech
 * connecting subsequent letters with lines.
 *
 * MOUSE
 * position x          : interpolate between normal text and sorted position
 *
 * KEYS
 * 1                   : toggle grey lines on/off
 * 2                   : toggle colored lines on/off
 * 3                   : toggle text on/off
 * 4                   : switch all letters off
 * 5                   : switch all letters on
 * a-z                 : switch letter on/off
 * ctrl                : save png
 *
 * CONTRIBUTED BY
 * [Niels Poldervaart](http://NielsPoldervaart.nl)
 * Adapted from P_3_1_3_04
 */
 'use strict';
 var joinedText;
 var textPOSTags = [];
 // Alphabetical list of PENN part-of-speech tags
 // source: https://rednoise.org/rita/reference/PennTags.html
 var allPOSTags = [
  'cc',
  'cd',
  'dt',
  'ex',
  'fw',
  'in',
  'jj',
  'jjr',
  'jjs',
  'ls',
  'md',
  'nn',
  'nns',
  'nnp',
  'nnps',
  'pdt',
  'pos',
  'prp',
  'prp$',
  'rb',
  'rbr',
  'rbs',
  'rp',
  'sym',
  'to',
  'uh',
  'vb',
  'vbd',
  'vbg',
  'vbn',
  'vbp',
  'vbz',
  'wdt',
  'wp',
  'wp$',
  'wrb'
 ];
 var allPOSTagsFull = [
  'Coordinating conjunction',
  'Cardinal number',
  'Determiner',
  'Existential there',
  'Foreign word',
  'Preposition or subordinating conjunction',
  'Adjective',
  'Adjective, comparative',
  'Adjective, superlative',
  'List item marker',
  'Modal',
  'Noun, singular or mass',
  'Noun, plural',
  'Proper noun, singular',
  'Proper noun, plural',
  'Predeterminer',
  'Possessive ending',
  'Personal pronoun',
  'Possessive pronoun',
  'Adverb',
  'Adverb, comparative',
  'Adverb, superlative',
  'Particle',
  'Symbol',
  'to',
  'Interjection',
  'Verb, base form',
  'Verb, past tense',
  'Verb, gerund or present participle',
  'Verb, past participle',
  'Verb, non-3rd person singular present',
  'Verb, 3rd person singular present',
  'Wh-determiner',
  'Wh-pronoun',
  'Possessive wh-pronoun',
  'Wh-adverb'
 ];
 var counters = [];
 var posX;
 var posY;
 var drawGreyLines = false;
 var drawColoredLines = true;
 var drawText = true;
 function preload() {
  joinedText = loadStrings('data/library_babel_extract1.txt');
 }
 function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  textFont('monospace', 18);
  fill(0);
  for (var i = 0; i < allPOSTags.length; i++) {
    counters.push(0);
  }
  joinedText = joinedText.join(' ');
  joinedText = joinedText.split(/\s+/);
  for (var i = 0; i < joinedText.length; i++) {
    var wordPOSTag = RiTa.getPosTags(RiTa.stripPunctuation(joinedText[i]))[0];
    textPOSTags.push(wordPOSTag);
    var tagIndex = allPOSTags.indexOf(wordPOSTag);
    if (tagIndex >= 0) {
      counters[tagIndex]++;
    }
    joinedText[i] += ' ';
  }
 }
 function draw() {
  background(360);
  translate(50, 0);
  noStroke();
  posX = 0;
  posY = 50;
  var sortPositionsX = [];
  var oldPositionsX = [];
  var oldPositionsY = [];
  for (var i = 0; i < joinedText.length; i++) {
    sortPositionsX[i] = 0;
    oldPositionsX[i] = 0;
    oldPositionsY[i] = 0;
  }
  var oldX = 0;
  var oldY = 0;
  // draw counters
  if (mouseX >= width - 50) {
    textSize(10);
    for (var i = 0; i < allPOSTags.length; i++) {
      textAlign(LEFT);
      text(allPOSTags[i] + ' (' + allPOSTagsFull[i] + ')', -20, i * 20 + 40);
      textAlign(RIGHT);
      text(counters[i], -25, i * 20 + 40);
    }
    textAlign(LEFT);
    textSize(18);
  }
  translate(256, 0);
  // go through all characters in the text to draw them
  for (var i = 0; i < joinedText.length; i++) {
    // again, find the index of the current letter in the alphabet
    var wordPOSTag = textPOSTags[i];
    var index = allPOSTags.indexOf(wordPOSTag);
    if (index < 0) continue;
    var m = map(mouseX, 50, width - 50, 0, 1);
    m = constrain(m, 0, 1);
    var sortX = sortPositionsX[index];
    var interX = lerp(posX, sortX, m);
    var sortY = index * 20 + 40;
    var interY = lerp(posY, sortY, m);
    if (drawGreyLines) {
      if (oldX != 0 && oldY != 0) {
        stroke(0, 10);
        line(oldX, oldY, interX, interY);
      }
      oldX = interX;
      oldY = interY;
    }
    if (drawColoredLines) {
      if (oldPositionsX[index] != 0 && oldPositionsY[index] != 0) {
        stroke(index * 10, 80, 60, 50);
        line(oldPositionsX[index], oldPositionsY[index], interX, interY);
      }
      oldPositionsX[index] = interX;
      oldPositionsY[index] = interY;
    }
    if (drawText) {
      text(joinedText[i], interX, interY);
    }
    sortPositionsX[index] += textWidth(joinedText[i]);
    posX += textWidth(joinedText[i]);
    if (posX >= min(width, 1000)) {
      posY += 40;
      posX = 0;
    }
  }
 }
 function keyReleased() {
  if (keyCode == CONTROL) saveCanvas(gd.timestamp(), 'png');
  if (key == '1') drawGreyLines = !drawGreyLines;
  if (key == '2') drawColoredLines = !drawColoredLines;
  if (key == '3') drawText = !drawText;
 }
--- a/3_words/style.css
+++ b/3_words/style.css
@ -0,0 +1,8 @@
 html, body {
  padding: 0;
  margin: 0;
 }
 canvas {
  vertical-align: top;
 }
		`@ -0,0 +1 @@`
							I say that the Library is unending. The idealists argue that the hexagonal rooms are a necessary form of absolute space or, at least, of our intuition of space. They reason that a triangular or pentagonal room is inconceivable. (The mystics claim that their ecstasy reveals to them a circular chamber containing a great circular book, whose spine is continuous and which follows the complete circle of the walls; but their testimony is suspect; their words, obscure. This cyclical book is God.) Let it suffice now for me to repeat the classic dictum: The Library is a sphere whose exact center is any one of its hexagons and whose circumference is inaccessible.