{"id":367,"date":"2026-05-11T15:35:11","date_gmt":"2026-05-11T15:35:11","guid":{"rendered":"https:\/\/b-common.de\/?page_id=367"},"modified":"2026-06-27T14:58:47","modified_gmt":"2026-06-27T14:58:47","slug":"version-10","status":"publish","type":"page","link":"https:\/\/b-common.de\/","title":{"rendered":"Version &#8211; 10"},"content":{"rendered":"\n<style>\n.glitch-container{\n    width:100%;\n    max-width:400px;\n    aspect-ratio:3\/4;\n    margin:40px auto;\n    background:black;\n    overflow:hidden;\n    position:relative;\n}\n\n.glitch-container canvas{\n    width:100%;\n    height:100%;\n    display:block;\n}\n\n#flash{\n    position:absolute;\n    inset:0;\n    background:white;\n    opacity:0;\n    pointer-events:none;\n    transition:opacity .25s ease;\n    z-index:10;\n}\n<\/style>\n\n<div class=\"glitch-container\">\n    <div id=\"flash\"><\/div>\n    <canvas id=\"c\"><\/canvas>\n<\/div>\n\n<script>\nconst container = document.querySelector(\".glitch-container\");\nconst canvas = document.getElementById(\"c\");\nconst ctx = canvas.getContext(\"2d\");\nconst flash = document.getElementById(\"flash\");\n\nlet w = 0;\nlet h = 0;\nlet scaleFactor = 1;\n\nfunction resize() {\n    const rect = container.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n\n    w = rect.width;\n    h = rect.height;\n\n    canvas.width = Math.floor(w * dpr);\n    canvas.height = Math.floor(h * dpr);\n\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n    scaleFactor = Math.min(w, h) \/ 500;\n}\n\nresize();\nwindow.addEventListener(\"resize\", resize);\n\nconst img = new Image();\nimg.src = \"https:\/\/b-common.de\/wp-content\/uploads\/2026\/05\/IMG_1095-scaled-e1782568341686.jpeg\";\n\nlet decay = 5;\nlet energy = 0;\nlet activity = 0;\nlet startTime = Date.now();\n\nfunction flashBurst(){\n    flash.style.opacity = 1;\n    setTimeout(() => {\n        flash.style.opacity = 0;\n    }, 200);\n}\n\nflashBurst();\n\nfunction triggerInteraction(intensity){\n    decay += intensity * 2 * scaleFactor;\n    energy += intensity;\n    activity += intensity * 2;\n}\n\nfunction triggerMove(intensity){\n    decay += intensity * 1.2 * scaleFactor;\n    energy += intensity * 0.5;\n    activity += intensity;\n}\n\ncanvas.addEventListener(\"touchstart\", () => triggerInteraction(1));\ncanvas.addEventListener(\"touchmove\", () => triggerMove(1));\n\ncanvas.addEventListener(\"mousedown\", () => triggerInteraction(1));\n\ncanvas.addEventListener(\"mousemove\", (e) => {\n    if(e.buttons === 1){\n        triggerMove(0.5);\n    }\n});\n\nwindow.addEventListener(\"deviceorientation\", (e) => {\n    decay += Math.abs(e.gamma || 0) * 0.02 * scaleFactor;\n    activity += 0.3;\n});\n\nfunction crowdLevel(){\n    activity *= 0.98;\n\n    if(activity < 20) return 1;\n    if(activity < 60) return 2;\n    return 3;\n}\n\nfunction stage(){\n    let t = (Date.now() - startTime) \/ 1000;\n\n    if(t < 45) return 1;\n    if(t < 120) return 2;\n    if(t < 240) return 3;\n    return 4;\n}\n\nfunction isRebirth(){\n    return (Date.now() - startTime) < 2000;\n}\n\nfunction draw(){\n\n    const dpr = window.devicePixelRatio || 1;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n    if(!img.complete){\n        requestAnimationFrame(draw);\n        return;\n    }\n\n    let s = stage();\n    let c = crowdLevel();\n\n    decay *= 0.995;\n\n    if(s === 1) decay += 0.01 * scaleFactor;\n    if(s === 2) decay += 0.08 * scaleFactor;\n    if(s === 3) decay += 0.4 * scaleFactor;\n    if(s === 4) decay += 1.2 * scaleFactor;\n\n    decay = Math.min(decay, 300);\n\n    if(c === 2) decay *= 1.02;\n    if(c === 3) decay *= 1.08;\n\n    energy *= 0.98;\n\n    if(isRebirth()){\n\n        ctx.fillStyle = \"black\";\n        ctx.fillRect(0,0,w,h);\n\n        ctx.fillStyle = \"white\";\n        ctx.font = `${18 * scaleFactor}px sans-serif`;\n        ctx.textAlign = \"center\";\n\n        ctx.fillText(\"REBIRTH INITIALIZED\", w\/2, h\/2);\n\n        requestAnimationFrame(draw);\n        return;\n    }\n\n    ctx.fillStyle = \"rgba(0,0,0,0.1)\";\n    ctx.fillRect(0,0,w,h);\n\n    let modeBoost = c === 1 ? 0.6 : c === 2 ? 1.2 : 2.0;\n    let glitch = decay * (s * modeBoost);\n\n    for(let i=0; i < 10 + s*10 + c*5; i++){\n\n        let targetX = (Math.random() - 0.5) * glitch;\n        let targetY = (Math.random() - 0.5) * glitch;\n        let targetW = w + Math.random() * glitch;\n        let targetH = h + Math.random() * glitch;\n\n        ctx.globalAlpha = 0.05 + energy * 0.15;\n\n        ctx.drawImage(img, targetX, targetY, targetW, targetH);\n    }\n\n    ctx.globalAlpha = 1;\n\n    let particles = 10 + s*10 + c*10;\n\n    for(let i=0; i<particles; i++){\n\n        ctx.fillStyle = `rgba(255,255,255,${Math.random()*0.25})`;\n\n        ctx.beginPath();\n        ctx.arc(\n            Math.random()*w,\n            Math.random()*h,\n            Math.max(1, decay * 0.2 * scaleFactor),\n            0,\n            Math.PI * 2\n        );\n        ctx.fill();\n    }\n\n    let label =\n        c === 1 ? \"SOLO FIELD\" :\n        c === 2 ? \"TRANSITION FIELD\" :\n        \"CROWD FIELD\";\n\n    ctx.fillStyle = \"white\";\n    ctx.font = `${Math.max(14,16*scaleFactor)}px sans-serif`;\n\n    \/\/ LINKS: DECAY\n    ctx.textAlign = \"left\";\n    ctx.fillText(\n        \"DECAY: \" + decay.toFixed(1),\n        20 * scaleFactor,\n        40 * scaleFactor\n    );\n\n    \/\/ RECHTS: FIELD\n    ctx.textAlign = \"right\";\n    ctx.fillText(\n        label,\n        w - (20 * scaleFactor),\n        40 * scaleFactor\n    );\n\n    requestAnimationFrame(draw);\n}\n\ndraw();\n<\/script>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Am Anfang gibt es ein Bild.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Doch das Bild erscheint hier nicht als Objekt, sondern als Prozess. Es existiert nicht in einem stabilen Zustand, sondern in einer fortlaufenden Verhandlung mit Zeit, Bewegung und Anwesenheit. Mit jedem Augenblick beginnt seine Oberfl\u00e4che zu erodieren. Zeit schreibt sich als St\u00f6rung in die Darstellung ein. Ber\u00fchrungen, Gesten und die Verdichtung von Aktivit\u00e4t beschleunigen diesen Prozess.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Je mehr Aufmerksamkeit dem Bild zukommt, desto instabiler wird es. Was in digitalen Netzwerken gew\u00f6hnlich Sichtbarkeit erzeugt, f\u00fchrt hier zum Gegenteil: Aufmerksamkeit produziert Entropie. Das Werk reagiert nicht auf einzelne Betrachter, sondern auf die Intensit\u00e4t kollektiver Pr\u00e4senz. Das Bild beginnt zu flimmern, zu zerfallen, sich selbst zu \u00fcberschreiben.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Erinnerung verwandelt sich in Rauschen. Repr\u00e4sentation wird zu Spur. Aus einer fotografischen Oberfl\u00e4che entsteht ein instabiler Speicher, in dem jede Begegnung die Bedingungen seiner Sichtbarkeit ver\u00e4ndert. Das Bild verliert seine Eindeutigkeit und gewinnt zugleich eine andere Form von Existenz \u2013 als permanenter \u00dcbergang zwischen Entstehung und Verlust.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Die Arbeit versteht digitale Medien nicht als Technologien der Bewahrung, sondern als Systeme kontrollierter Verg\u00e4nglichkeit. Sichtbarkeit erscheint nicht als dauerhafter Zustand, sondern als ein fragiles Ereignis. Was sichtbar wird, ist nicht das Motiv selbst, sondern seine fortlaufende Aufl\u00f6sung.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Der Glitch ist dabei kein Fehler. Er ist die Sprache des Systems.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">So stellt die Arbeit nicht die Frage, was ein Bild zeigt. Sie fragt vielmehr, wie lange ein Bild sich erinnern kann \u2013 und was von ihm bleibt, wenn die Kr\u00e4fte von Zeit, Interaktion und kollektiver Anwesenheit beginnen, an seinem Ged\u00e4chtnis zu arbeiten.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Das Bild verschwindet nicht trotz seiner Betrachter.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background has-anarchy-font-family wp-block-paragraph\">Es verschwindet durch sie.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Am Anfang gibt es ein Bild. Doch das Bild erscheint hier nicht als Objekt, sondern als Prozess. Es existiert nicht in einem stabilen Zustand, sondern in einer fortlaufenden Verhandlung mit Zeit, Bewegung und Anwesenheit. Mit jedem Augenblick beginnt seine Oberfl\u00e4che zu erodieren. Zeit schreibt sich als St\u00f6rung in die Darstellung ein. Ber\u00fchrungen, Gesten und die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-367","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b-common.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=367"}],"version-history":[{"count":34,"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":736,"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/367\/revisions\/736"}],"wp:attachment":[{"href":"https:\/\/b-common.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}