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.