Naslovi, podnaslavljanje, tajmingi

animacija.js

@@ -1,108 +1,175 @@
-var zaporedje = [
+//const branje = 6666
+//const branjeNaslova = 1700
+const mrmranje = 1000
+
+// Debug: za hitrenje
+const branje = 66
+const branjeNaslova = 10
+
+const naslov = [
+    "MANIFEST",
+    "SENZORIČNE",
+    "POEZIJE"
+]
+
+const podnaslov = [
+    "Finger",
+    "nails",
+    "on",
+    "a",
+    "Chalkboard",
+    "(Ono",
+    "mato",
+    "poija",
+    "na",
+    "drugo",
+    "žogo)"
+]
+
+const introTekst = [
+    "Do sedaj so ob poeziji z vsemi čuti in čutili, telesno in fizično, trpeli samo pesniki – MORALI pa bi tudi poslušalci!",
+    "Zavijanje z očmi, zehanje, ošinjanje urnih kazalcev – vsi ti preživetveni manevri, s katerimi se pretolčemo skozi bestialni napor literarnih branj, do sedaj še nikoli niso odtehtali torture pisanja literature;",
+    "zlogov ritma, ki tolčejo ob oboke lobanje in se kot seizmografski zapisi utelešajo na papirju ali ekranu.",
+    "Ti zahtevajo, da se k njim vedno znova vrača, kot Severin k udarcem svoje Wande – ker je pisanje disciplina, disciplina zaklinjanja razklenitve sintakse!",
+    "Naloga in končni cilj senzorične poezije je zatorej samo ena: dlakocepsko cepiti živčne končiče – S CIRKULARKO!",
+    "Senzorična poezija je poslednji glogov kol, zaboden v čifutsko srce vampirja, ki ne more umreti – Adorna!",
+    "Poezija po holokavstu JE mogoča. Poezija 21. stoletja naj bo torej poezija Abu-Ghraiba in Guantanama, ali pa naj za vekomaj umolkne!",
+    "Smrt vsem, živela Centrala!",
+    "PSSS: Mučitelj hodi po literarnih večerih."
+]
+
+const zaporedje = [
     {
-        tip: "tekst",
         vsebina: "neprekinjeno",
-        len: 0.5,
-        pavza: 0.1
+        len: 500,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "nizanje",
-        len: 0.5,
-        pavza: 0.1
+        len: 500,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "istih",
-        len: 0.5,
-        pavza: 0.1
+        len: 500,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "glasov",
-        len: 0.5,
-        pavza: 0.5
+        len: 500,
+        pavza: 500
     },
     {
-        tip: "tekst",
         vsebina: "je",
-        len: 0.2,
-        pavza: 0.1
+        len: 200,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "dobesedno",
-        len: 0.666,
-        pavza: 0.1
+        len: 666,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "slušni",
-        len: 0.5,
-        pavza: 0.1
+        len: 500,
+        pavza: 100
     },
     {
-        tip: "tekst",
         vsebina: "dražljaj",
-        len: 0.666,
-        pavza: 0.3
-    },
-    {
-        tip: "strobe",
-        len: 4,
-        interval: 0.05,
-        pavza: 3
+        len: 666,
+        pavza: 300
     }
-];
+]
 
-document.addEventListener('DOMContentLoaded', function () {
-    stevec = 0;
-    barva = true;
-    crka_el = document.getElementById("crka");
-    body_el = document.body;
+const barvA = barva => barva ? "white" : "black"
+const barvB = barva => barva ? "black" : "white"
 
-    function zamenjajBarve() {
-        if (barva) {
-            body_el.style.backgroundColor = "white";
-            crka_el.style.color = "black";
-        } else {
-            body_el.style.backgroundColor = "black";
-            crka_el.style.color = "white";
-        }
-        barva = !barva;
-    }
+const zamenjajBarve = barva => {
+    document.body.style.backgroundColor = barvA(barva)
+    document.crka.style.color = barvB(barva)
+    document.barva = !barva
+}
 
-    function predvajajKos(kos) {
-        if (kos.tip === "tekst") {
-            var crka_interval = kos.len / kos.vsebina.length;
-            kos.vsebina.split("").map(function(crka) {
-                setTimeout(function () {
-                    zamenjajBarve();
-                    crka_el.innerHTML = crka;
-                }, stevec * 1000);
-                stevec += crka_interval;
-            });
-        } else if (kos.tip === "strobe") {
-            setTimeout(function () {
-                crka_el.innerHTML = "";
-            }, stevec * 1000);
+const zamenjajCrko = crka => document.crka.innerHTML = crka
 
-            for (i = 0; i < kos.len; i += kos.interval) {
-                setTimeout(function () {
-                    zamenjajBarve();
-                }, stevec * 1000);
-                stevec += kos.interval;
-            }
+function animacija(kosi, stevec) {
+    const konec = kosi.reduce((stk, kos) => {
+        kos.vsebina.split("").map((crka, idx, { length }) => {
+            setTimeout(() => {
+                zamenjajBarve(document.barva)
+                zamenjajCrko(crka)
+            }, stk + idx / length * kos.len)
+        })
+
+        setTimeout(() => zamenjajCrko(""), stk + kos.len + 0.05)
+
+        return stk + kos.len + kos.pavza
+    }, stevec)
+
+    setTimeout(() => {
+        zamenjajCrko("")
+        const ponovitev = new Date().getTime() + 4000
+
+        console.log("strobe!", ponovitev)
+        const strobe = timestamp => {
+            document.zamenjajBarve(document.barva)
+            (timestamp < ponovitev) ? requestAnimationFrame(strobe) : setTimeout(zacetek, ponovitev)
         }
 
-        stevec += kos.pavza;
-    }
+        requestAnimationFrame(strobe)
+        strobe()
+    }, konec)
+}
 
-    function zacetek () {
-        zaporedje.map(predvajajKos);
+const podnaslovljenje = (kosi, stevec) => {
+    kosi.map((kos, idx) => setTimeout(() => {
+        zamenjajCrko(kos)
+    }, stevec + idx * branjeNaslova))
 
-        setTimeout(zacetek, stevec);
-    }
+    const pricetek = stevec + kosi.length * branjeNaslova + mrmranje
+    setTimeout(() => {
+        document.crka.style.fontSize = "16rem"
+    }, pricetek)
+    animacija(zaporedje, pricetek)
+}
 
-    setTimeout(zacetek, 2000);
-});
+const uvod = (kosi, stevec) => {
+    kosi.map((kos, idx) => setTimeout(() => {
+        zamenjajCrko(kos)
+    }, stevec + idx * branje))
+
+    const pricetek = stevec + kosi.length * branje
+    setTimeout(() => {
+        document.crka.style.fontSize = "12rem"
+    }, pricetek)
+    podnaslovljenje(podnaslov, pricetek)
+}
+
+const naslovljenje = (kosi, stevec) => {
+    kosi.map((kos, idx) => setTimeout(() => {
+        zamenjajCrko(kos)
+    }, stevec + idx * branjeNaslova))
+
+    const pricetek = stevec + kosi.length * branjeNaslova + mrmranje
+    setTimeout(() => {
+        document.crka.style.fontSize = "4rem"
+    }, pricetek)
+    uvod(introTekst, pricetek)
+}
+
+const zacetek = () => {
+    document.crka.style.fontSize = "12rem"
+    naslovljenje(naslov, mrmranje)
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.barva = true
+    document.crka = document.getElementById("crka")
+    document.zamenjajBarve = zamenjajBarve
+
+    document.body.style.backgroundColor = "white"
+    document.crka.style.color = "black"
+    document.crka.style.fontFamily = "Courier New"
+
+    zacetek()
+})

index.html

@@ -8,6 +8,7 @@
          }
          body {
              margin: 0;
+             padding: 0 10rem;
              background-color: black;
              display: flex;
              align-items: center;
@@ -15,11 +16,6 @@
              user-select: none;
              cursor: none;
          }
-         #crka {
-             color: white;
-             font-family: Courier;
-             font-size: 12rem;
-         }
         </style>
         <script src="animacija.js" type="text/javascript"></script>
     </head>