Koncano

animacija.js

@@ -1,10 +1,11 @@
-//const branje = 6666
-//const branjeNaslova = 1700
+const branje = 6666
+const branjeNaslova = 1700
 const mrmranje = 1000
 
 // Debug: za hitrenje
-const branje = 66
-const branjeNaslova = 10
+//const branje = 66
+//const branjeNaslova = 10
+//const mrmranje = 10
 
 const naslov = [
     "MANIFEST",
@@ -38,53 +39,76 @@ const introTekst = [
     "PSSS: Mučitelj hodi po literarnih večerih."
 ]
 
+const za = x => ({
+    vsebina: "",
+    len: 0,
+    pavza: x
+})
+const zb = {
+    vsebina: "neprekinjeno",
+    len: 650,
+    pavza: 250
+}
+const zc = {
+    vsebina: "nizanje",
+    len: 400,
+    pavza: 200
+}
+const zd = {
+    vsebina: "istih",
+    len: 350,
+    pavza: 150
+}
+const ze = {
+    vsebina: "glasov",
+    len: 350,
+    pavza: 100
+}
+const zf = {
+    vsebina: "je",
+    len: 160,
+    pavza: 40
+}
+const zg = {
+    vsebina: "dobesedno",
+    len: 450,
+    pavza: 200
+}
+const zgb = {
+    vsebina: "dobesed",
+    len: 400,
+    pavza: 200
+}
+const zh = {
+    vsebina: "slušni",
+    len: 400,
+    pavza: 100
+}
+const zi = {
+    vsebina: "dražljaj",
+    len: 666,
+    pavza: 250
+}
+const strb = (len, pavza) => ({
+    len,
+    pavza
+})
+
 const zaporedje = [
-    {
-        vsebina: "neprekinjeno",
-        len: 500,
-        pavza: 100
-    },
-    {
-        vsebina: "nizanje",
-        len: 500,
-        pavza: 100
-    },
-    {
-        vsebina: "istih",
-        len: 500,
-        pavza: 100
-    },
-    {
-        vsebina: "glasov",
-        len: 500,
-        pavza: 500
-    },
-    {
-        vsebina: "je",
-        len: 200,
-        pavza: 100
-    },
-    {
-        vsebina: "dobesedno",
-        len: 666,
-        pavza: 100
-    },
-    {
-        vsebina: "slušni",
-        len: 500,
-        pavza: 100
-    },
-    {
-        vsebina: "dražljaj",
-        len: 666,
-        pavza: 300
-    }
+    za(1200), zb, zc, zd, ze, zf, zg, zh, zi,
+    za(300), zb, zc, zd, ze, zf, zgb, strb(1300, 0),
+    za(0), zb, zc, zd, ze, zf, zg, zh, zi,
+    za(300), zb, zc, zd, ze, zf, zgb, strb(1200, 0),
+    za(0), zb, zc, zd, ze, zf, zg, zh, zi,
+    za(0), zb, zc, zd, ze, zf, zgb, strb(1300, 0),
+    za(0), zb, zc, zd, ze, zf, strb(1850, 0),
+    za(0), zb, zc, zd, ze, zf, zg, strb(1200, 0),
 ]
 
 const barvA = barva => barva ? "white" : "black"
 const barvB = barva => barva ? "black" : "white"
 
-const zamenjajBarve = barva => {
+function zamenjajBarve (barva) {
     document.body.style.backgroundColor = barvA(barva)
     document.crka.style.color = barvB(barva)
     document.barva = !barva
@@ -92,32 +116,49 @@ const zamenjajBarve = barva => {
 
 const zamenjajCrko = crka => document.crka.innerHTML = crka
 
+function strobe (timestamp) {
+    zamenjajBarve(document.barva)
+    if (timestamp < document.koncajStrobe) requestAnimationFrame(strobe)
+}
+
+function startStrobe(timestamp) {
+    document.koncajStrobe += timestamp
+    requestAnimationFrame(strobe)
+}
+
 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)
+        // Crka?
+        if (kos.vsebina !== undefined) {
+            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)
+        //Strobe?
+        } else {
+            setTimeout(() => {
+                zamenjajCrko("")
+                document.koncajStrobe = kos.len
+                requestAnimationFrame(startStrobe)
+            }, stk)
+        }
 
         return stk + kos.len + kos.pavza
     }, stevec)
 
+    // Na koncu ponovimo vajo
     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)
-        }
-
-        requestAnimationFrame(strobe)
-        strobe()
+        animacija(zaporedje, 0)
+        document.zvok.pause()
+        document.zvok.currentTime = 0
+        document.zvok.play()
     }, konec)
 }
 
@@ -129,6 +170,7 @@ const podnaslovljenje = (kosi, stevec) => {
     const pricetek = stevec + kosi.length * branjeNaslova + mrmranje
     setTimeout(() => {
         document.crka.style.fontSize = "16rem"
+        document.zvok.play()
     }, pricetek)
     animacija(zaporedje, pricetek)
 }
@@ -165,6 +207,7 @@ const zacetek = () => {
 document.addEventListener('DOMContentLoaded', () => {
     document.barva = true
     document.crka = document.getElementById("crka")
+    document.zvok = document.getElementById("zvok")
     document.zamenjajBarve = zamenjajBarve
 
     document.body.style.backgroundColor = "white"

index.html

@@ -21,5 +21,8 @@
     </head>
     <body>
         <span id="crka"></span>
+        <audio id="zvok" preload="auto">
+            <source src="zvok.oga" type="audio/ogg" />
+        </audio>
     </body>
 </html>