index.js

/// <reference path="./node_modules/@types/p5/lib/addons/p5.sound.d.ts" />
/// <reference path="./node_modules/@types/p5/global.d.ts" />
/// <reference  path="./node_modules/@types/p5/literals.d.ts" />
/// <reference path="./node_modules/@types/p5/constants.d.ts" />


const text1 = "Die Gewohnheit ist der Strick, mit dem wir uns aus der Komplexität der Welt ziehen. Wir lernen ein Leben lang, uns an das Leben zu gewöhnen. Doch die Routinen sind zweifelhafte Komplizen. Ich habe einen alten Wiener Kartonagen-Fabrikanten gekannt, der seine Gewohnheiten hatte. Er ließ sich täglich an den Rand der Alpen chauffieren, um in einem ganz bestimmten Landgasthof ein Schnitzel zu essen und danach eine Flasche Wasser zu trinken. Daraufhin wurde eine Stunde in freier Natur geruht. Im Kopf des Kartonagen-Fabrikanten hatte sich irgendwann der zwingende Gedanke eingenistet, dass er deshalb so alt geworden sei, weil er oft in einem bestimmten voralpinen Landgasthof ein Wiener Schnitzel aß, eine Flasche Wasser trank und dann ruhte. Das machte er dann jeden Tag. Die Sache endete naturgemäß fatal. Das vermeintlich Lebensverlängernde wurde zur Todesursache. Man musste den schweren und schwer schnitzelsüchtigen Kartonagen-Fabrikanten in nicht allzu hohem Alter begraben. An nichts gewöhnt man sich so schnell wie an Gewohnheiten. Kaum haben wir uns ans Gehen gewöhnt, gehen wir routiniert an Orte, die neue Routinen hervorbringen. Im Guten wie im Schlechten. Dreißig bis vierzig Prozent unseres Alltags bestünden aus Routinen, sagen die Neuropsychologen. Wenn es nicht so wäre, würden wir unter der Last der Entscheidungen zusammenbrechen. Was wir oft machen, wird außerdem in einem bestimmten, besonders abgesicherten Teil des Gehirns abgespeichert. Wenn wir eines Tages dement sind, wissen wir vielleicht an der Haustür schon nicht mehr, wohin wir eigentlich wollten, aber weil wir die Routine des Gehens nicht vergessen haben, irren wir durch die Stadt. Wenn wir Glück haben, nehmen wir an der Haustür den umgekehrten Weg und bleiben einfach daheim. Die Routinen nehmen zu. Die Gewohnheit ist der Strick, mit dem wir uns aus der Komplexität der Welt zu ziehen versuchen. Das kann helfen, ist aber, apropos Strick, nicht ganz ungefährlich. Viele sind frühmorgens Routiniers hygienischer Prozeduren oder der Eierkocherei, andere wiederum greifen zum Glas. Das sind Routiniers des eigenen Untergangs. Nirgendwo erkennt man die Wechselwirkung von Komplexität und scheinbarer Vereinfachung besser als in der Sucht. Die Gewohnheit macht die Dinge wieder komplex. Was immer man über das Leben sagt: Im Grunde ist es nur dazu da, dass wir uns an unsere Existenz gewöhnen. Wir müssen uns daran gewöhnen, dass wir ein Ich sind, und das gelingt leichter, wenn wir uns mit unserem Ich nicht ständig vor den Augen herumfuchteln. Wir gehen unsere Wege, ohne ständig daran denken zu müssen, welche Wege dieses Ich geht. Wir schmieren uns Butter aufs Brot und machen daraus keinen Akt der Selbstverwirklichung. Im Laufe des Lebens werden die Routinen immer mehr, und der Widerstand gegen sie wird schwächer. Wenn wir Pech haben, bewohnen wir auf den letzten Metern nur noch unsere Gewohnheiten. Der große russische Kritiker und Schriftsteller Wiktor Schklowski hat sehr beeindruckend darüber geschrieben, wie das Leben zum Nichts zerrieben wird, wenn es nur noch aus unbewusstem Alltag besteht: „Die Automatisierung verschlingt alles: die Dinge, die Kleider, die Möbel, die Frau und die Angst vor dem Krieg.“ Mögen die Möbel, die Dinge und die Angst vor dem Krieg durch Gewohnheiten verschlungen werden, aber die eigene Frau? Paare, die ihre über die Jahre gewachsene Leidensfähigkeit feiern, sagen gerne, dass man sich aneinander gewöhnt habe. Die Gewohnheit ist die zufriedene Schwester der Langeweile, aber beide sind eng verwandt. Hildegard Knef hat einmal einen Schlager gesungen, der hieß: „Ich brauch Tapetenwechsel“. Sie hat diesen Schlager zu einer Zeit gesungen, als ich noch nicht wusste, dass der im Lied vorkommende Tapetenwechsel eine Metapher ist. Mir waren die Innendekorationsprobleme von Frau Knef ein Rätsel, weil bei uns zu Hause ziemlich oft tapeziert wurde. Mein diesbezüglich eifriger Vater, der am liebsten auch noch meine Mutter tapeziert hätte, summte das Lied von Hildegard Knef gerne mit. Vielleicht brauchte er Tapetenwechsel. Gegen Langeweile hilft Verfremdung, sagt Wiktor Schklowski. Deshalb gibt es nicht nur Tapeten, sondern auch die Kunst. „Ziel der Kunst ist es, uns ein Empfinden für das Ding zu geben, ein Empfinden, das Sehen und nicht nur Wiedererkennen ist.“ Was macht die Kunst? Sie sorgt für „Verfremdung der Dinge und Komplizierung der Form“. Das Schöne am Menschen: Er kann auch mit seinen Gewohnheiten eine Komplizierung der Form erreichen. Um nicht gewöhnlich zu wirken, ist er exzentrisch. Seine Gewohnheiten sind Habitus, und er verkehrt im Klub der Habitués. In der Gesellschaft der Hutträger wird man ihn seltener finden, denn die Hutträger sind eine andere Klasse von Gewohnheitsmenschen. Sie erkennen einander, lüften die Hüte. Sie sind die Mittelklasse. Dass die Mittelklasse ausstirbt, kann man daran sehen, dass es immer weniger Hüte, aber immer mehr Frisuren gibt. Im letzten „Literarischen Quartett“ des ZDF hat der über Bücher mitdiskutierende Schriftsteller Moritz von Uslar einen Schal getragen. Der Schal war sorgsam über das Jackett drapiert und befand sich mit seiner unbunten Försterhaftigkeit im Kontrast zu fröhlich gemusterten Socken. Wer sich für kleidungstechnische Besonderheiten entschieden hat, muss so tun, als wären sie ganz normal. Er muss so tun, als wäre es ganz normal, bei Zimmertemperaturen Schal zu tragen. Man gewöhnt sich an die Schalträger. Oft sind es Schauspieler, die mit diesem Accessoire in Fernseh-Talkshows sitzen und aus ihrem Leben erzählen. Gerne kratzen sie sich dabei nachdenklich mit der rechten Hand am linken Ohr oder umgekehrt. Sisyphos‘ Ohnmacht. In der Welt der Fernseh-Ticks hatte Karl Lagerfeld seinen Fächer, und Karl Lauterbach hat seinen Finger. Der rechte Zeigefinger des deutschen Politikers und Corona-Erklärers fährt oft blindlings in die Luft. Er setzt die Satzzeichen einer Exzentrik, die so nerdhaft ist, dass dieser freundliche Mensch in der Politik jedenfalls außergewöhnlich wirkt. Exzentrik, die Abweichung vom Gewöhnlichen, muss man sich leisten können. Sie macht den Starken stärker, aber sie schwächt den Schwachen. In den Routinen seines Tuns darf er nicht auffallen und aus den Gewohnheiten nicht heraus. Als ich nicht mehr ganz jung war, sondern Student, brauchte ich Geld. Zu seinen Lebzeiten habe ich manchmal den Wiener Kartonagen-Fabrikanten an den Rand der Alpen chauffiert. Ich habe aber auch an einer Stätte perfekter Zwecke gearbeitet: in einem Lagerhaus. Dort ging alles seinen Gang. Die Bauern der Umgebung brachten, was sie gesät und geerntet hatten. Sie ließen ihr Getreide mahlen oder holten sich Zierzwerge für die Vorgärten ihrer Bauernhäuser. Nur ein Bauer war anders. Die Welt der Zwecke und Gewohnheiten war ihm zerfallen, das halb gemahlene Korn wollte er nicht zu Ende mahlen lassen, wenn ihn seine ganz und gar herabdrückende Traurigkeit befiel. Er lud seine Säcke wieder auf und fuhr davon. Am nächsten Tag kam er wieder, stand unter den unverzagt Routinierten. Um den Mann, der seine Felder bestellen sollte, war es nicht gut bestellt. Wie ein tragischer niederösterreichischer Sisyphos rollte er einen Stein durch sein Bauernleben. Über den originalen, vielleicht gar nicht so tragischen Sisyphos hört man manches. Dass er ein Schlitzohr war und es sogar mit dem Tod aufnahm. Ewig einen riesigen Stein den Berg hinaufbefördern zu müssen, war bekanntlich die Strafe dafür. Wer an die Effizienz von Routinen glaubt, fragt sich: Hat sich Sisyphos irgendwann daran gewöhnt? Hat er sich, um es mit Hildegard Knef zu sagen, für Tapetenwechsel gar nicht interessiert? Der Mythos von Sisyphos ist eine launige Geschichte über das Immergleiche. Eine Geschichte über die Macht der Gewohnheit und darüber, was die Gewohnheit aus uns macht.";
const text = text1.slice();
const textquelle = "Text: Jandl, Paul (2021): Die Gewohnheit ist der Strick, mit dem wir uns aus der Komplexität der Welt ziehen. Wir lernen ein Leben lang, uns an das Leben zu gewöhnen. Doch die Routinen sind zweifelhafte Komplizen, Neue Zürcher Zeitung, abgerufen am 27.07.2022 von https://www.nzz.ch/feuilleton/gewohnheiten-wir-glauben-wir-leben-falsch-alles-nur-routine-ld.1610330"
let speed = 1;
let correct = 0;
let fails = 0;
let add = 0;
let letter = 0;
let editortext = [];
let showntext;

let firstchar = [];
let newtext;
const texteditor = document.getElementById('texteditor');
const cursor = document.getElementById('cursor');
const counter1 = document.getElementById('counter1');
const body = document.getElementById('body');
const div = document.getElementById('div');
let indent = 0;
let background = 255;
let bgr;
let ind = indent + "vw";

let pressedkey = "";

let ewidth = 0;

let start = Date.now();
let millis = 0;
let seconds = 0;
let deletedletters = 0;
let writtenletters = 0;

let insert;
let go = 0;
let about = 0;
const abouttext = "<h3>What?</h3><p>TypeToDelete ist ein minimalistischer Texteditor, der <br>die Funktionen eines klassischen Texteditors umkehrt. <br>Anstatt eine leere Seite zu bieten, auf die man einen <br>eigenen Text schreiben kann, schreibt er die Seite <br>selber voll. Nur indem man schneller tippt als er, <br>kann man den Text löschen und eine leere Seite <br>erreichen. Doch Tippfehler erschweren den Weg.<br><br></p><h3>Why?</h3><p>Im Gegensatz zu werbeüberladenen Internetseiten mit <br>vielen Inhalten und noch mehr Menüpunkten und den vie-<br>len Informationen und Möglichkeiten, denen wir stän-<br>dig ausgesetzt sind, ist dies eine sehr minimalistische, <br>aufgeräumte Seite mit wenig Funktionen und keinen Un-<br>terseiten. Hier gibt es keine Buttons, die Seite wird <br>nicht wie üblich mit der Maus, sondern nur mithilfe <br>der Tastatur bedient.<br><br>Dieser Texteditor hinterfragt Gewohnheiten, indem <br>er sie auf den Kopf stellt. Er dient weniger als ein <br>Werkzeug und eher als ein Spiel, das Nutzer:innen <br>herausfordert und deren Ehrgeiz weckt.<br><br></p><h3>How?</h3><p>Sobald die Seite aufgerufen wird, startet ein Countdown. <br>Ist der abgelaufen werden nach und nach die einzelnen <br>Buchstaben des vorgegebenen Textes (Jandl, Paul (2021): <br>Die Gewohnheit ist der Strick, mit dem wir uns aus <br>der Komplexität der Welt ziehen. Wir lernen ein Leben <br>lang, uns an das Leben zu gewöhnen. Doch die Routi-<br>nen sind zweifelhafte Komplizen, Neue Zürcher Zeitung, <br>abgerufen am 27.07.2022 von <i>https://www.nzz.ch/feuil-<br>leton/gewohnheiten-wir-glauben-wir-leben-falsch-alles-<br>nur-routine-ld.1610330</i>) in ein Array gespeichert und <br>mithilfe von innerHTML in die Seite eingefügt. Links an <br>der Seite läuft ein Counter mit, der die Länge des <br>Arrays zählt und somit jederzeit anzeigt, wie viele Zei-<br>chen auf dem Bildschirm zu sehen sind. Hat man alle <br>Zeichen entfernt und eine leere Seite vor sich, so zeigt <br>dieser also wieder 0 an.<br><br>Mithilfe eines EventListeners wird nun darauf gewartet, <br>dass eine Taste gedrückt wird. Sobald dies geschieht, <br>wird die Funktion typeToDelete ausgelöst. Diese gleicht <br>zunächst das getippte Zeichen mit der ersten Position <br>im Array ab. Stimmen diese überein, wird die Position aus <br>dem Array gelöscht und der aktualisierte Text wieder <br>in das Dokument geschrieben, sodass der erste Buchstabe <br>des Textes verschwindet. Ist das getippte Zeichen je-<br>doch falsch, werden zusätzliche Zeichen am Ende des Textes <br>angefügt, zunächst nur eins, beim zweiten Fehler schon <br>zwei und beim dritten acht. Beim vierten und allen weiteren <br>Fehlern werden jeweils 16 Zeichen an den Text angefügt. <br>Es lohnt sich also nicht nur schnell, sondern auch genau <br>zu tippen. Andersherum werden auch die richtigen Zei-<br>chen gezählt. Schafft man 15 nacheinander, werden zwei <br>Zeichen am Ende des Textes entfernt.<br><br>Sobald alle Zeichen entfernt und die Seite leer ist, <br>wird der EventListener für die typeToDelete-Funktion ent-<br>fernt und durch einen neuen ersetzt, der nun bei Tasten-<br>druck die Funktion typeToWrite abruft. Diese überprüft, ob <br>es sich bei der Taste um einen Buchstaben, eine Zahl oder <br>ein Interpunktionszeichen handelt und fügt diese dem Array <br>hinzu, welches anschließend wieder mithilfe von innerHTML <br>dem Dokument hinzufügt wird. Dabei gibt es zwei Sonderfunk-<br>tionen. Bei dem Buchstaben „ä“, wird nicht einfach dieser <br>eingefügt, sondern das Füllwort „ääääääähh“. Möchte man ei-<br>nen Buchstaben löschen und benutzt die Backspace-Taste, <br>wird nicht wie gewohnt der letzte Buchstabe entfernt, son-<br>dern der erste, indem die erste Position mithilfe des <br>Befehls shift aus dem Array gelöscht wird.<br><br></p><h3>Who?</h3><p>Martha Lohse hat diese Seite im Rahmen des Kurses <br>„Generative Gestaltung“ von Fabian Morón Zirfas <br>im Sommersemester 2022 an der HAWK Hildesheim <br>programmiert.</p>";

document.addEventListener('keydown', typeToDelete);
counter1.innerHTML = "0";

texteditor.addEventListener('keydown', function(event){
  event.preventDefault()
});



function draw() { 
  
  if(go === 0){
    if(seconds < 1){
      texteditor.innerHTML = "3";
      console.log(textquelle);
    } else if(seconds < 2){
      texteditor.innerHTML = "2";
    } else if(seconds < 3){
      texteditor.innerHTML = "1";
    } else if(seconds < 4){
      texteditor.innerHTML = "0";
    } else{
      go = 1;
      start = Date.now();
    }
  }

  millis = Date.now() - start;
  seconds = Math.floor(millis / 1000);

 if(go === 1 && about < 3){
  cursor.innerHTML = "_"; 
  if(frameCount >= speed) {
    editortext.push(text[letter]);
    showntext = editortext.join('');
    texteditor.innerHTML = showntext;
    letter++;
    speed += random(10,15);
    counter1.innerHTML = showntext.length;
  } 

  firstchar = editortext.slice(0,1);
  newtext = editortext;
 
  if(editortext.length === 0 && frameCount > 1){
    noLoop();
    document.removeEventListener('keydown', typeToDelete);
    document.addEventListener('keydown', typeToWrite);
  }

  if(letter === text.length){
    noLoop();
  }
} else if(about === 3){
  texteditor.innerHTML = abouttext;
}
}


function typeToDelete(e) {

  indent = 0; 
  ind = indent + "vw";
  div.style.setProperty("text-indent", ind);

  //console.log(e.key);

if(e.key === "?"){
  about++;
} else {
  about = 0;
}

if(letter < text.length){
  if(e.key === firstchar[0]){
    editortext.shift();
    showntext = editortext.join('');
    texteditor.innerHTML = showntext;
    firstchar = editortext.slice(0,1);
    newtext = editortext.slice(1, editortext.length);
    counter1.innerHTML = showntext.length;
    correct++;
    deletedletters++;
  } else if(e.key !== "Shift"){
      correct = 0;
      add = Math.pow(2, fails);
      for(i=0; i<add; i++){
        editortext.push(text[letter]);
        showntext = editortext.join('');
        texteditor.innerHTML = showntext;
        letter++;
        counter1.innerHTML = showntext.length;
      }
      if(fails < 4){
      fails++;
      }
    }

  if(correct === 15){
    for(i=0; i<2; i++){
      editortext.pop();
      showntext = editortext.join('');
      texteditor.innerHTML = showntext;
      letter = letter-1;
      counter1.innerHTML = showntext.length;
      correct = 0;
    }
  }

  if(firstchar[0] === " "){
    indent = 1.2; 
    ind = indent + "vw";
    div.style.setProperty("text-indent", ind);
  }
} else {
  console.log("time:", seconds, "seconds");
  console.log("deleted letters:", deletedletters);
  letter = 0;
}
}

function typeToWrite(e) {
  
  pressedkey = e.key;
  insert = e.key;

  if(e.key === "ä"){
    insert = "ääääääähh";
  }

  if(pressedkey.length === 1){
    editortext.push(insert);
    showntext = editortext.join('');
    texteditor.innerHTML = showntext;
    writtenletters++;
  }

  if(e.key === "Backspace" && editortext.length > 0){
    editortext.shift();
    showntext = editortext.join('');
    texteditor.innerHTML = showntext;
    writtenletters = writtenletters-1;
  }
}