{"id":198,"date":"2026-05-01T08:57:22","date_gmt":"2026-05-01T08:57:22","guid":{"rendered":"https:\/\/b-common.de\/?page_id=198"},"modified":"2026-07-08T18:34:29","modified_gmt":"2026-07-08T18:34:29","slug":"beziehung","status":"publish","type":"page","link":"https:\/\/b-common.de\/?page_id=198","title":{"rendered":"B E Z I E H U N G"},"content":{"rendered":"\n<div style=\"display:flex; flex-direction:column; gap:20px; align-items:center; font-family:Arial;\">\n\n  <div style=\"display:flex; flex-direction:column; gap:25px; align-items:center; justify-content:center;\">\n\n    <canvas id=\"squareCanvas\" width=\"250\" height=\"250\"><\/canvas>\n\n    <canvas id=\"circleCanvas\" width=\"250\" height=\"250\"><\/canvas>\n\n  <\/div>\n<\/div>\n\n<script>\nconst sq = document.getElementById(\"squareCanvas\");\nconst sqx = sq.getContext(\"2d\");\n\nconst cir = document.getElementById(\"circleCanvas\");\nconst cctx = cir.getContext(\"2d\");\n\nlet running = false;\nlet animationId;\n\nlet phase = 0;\nlet frame = 0;\nconst switchEvery = 400;\n\nlet angle = 0;\n\n\/\/ Pixelgr\u00f6\u00dfe f\u00fcr das Quadrat (hier ge\u00e4ndert f\u00fcr gr\u00f6\u00dfere Pixel)\nconst pSize = 8; \n\n\/\/ ---------------- INIT ----------------\nfunction init() {\n  drawSquareReset();\n  startSim(); \/\/ \ud83d\udd25 AUTORUN\n}\n\ninit();\n\n\/\/ ---------------- SQUARE (ENTROPY SYSTEM) ----------------\nfunction squareStep() {\n  const size = sq.width;\n  \n  \/\/ Da ImageData bei gr\u00f6\u00dferen Bl\u00f6cken zu tr\u00e4ge\/komplex im Mischen ist,\n  \/\/ lesen wir Bl\u00f6cke aus und tauschen sie direkt auf dem Canvas.\n  if (phase === 0) {\n    \/\/ CHAOS: Tausche zuf\u00e4llige Pixel-Bl\u00f6cke\n    for (let i = 0; i < 150; i++) {\n      let x1 = Math.floor(Math.random() * (size \/ pSize)) * pSize;\n      let y1 = Math.floor(Math.random() * (size \/ pSize)) * pSize;\n      let x2 = Math.floor(Math.random() * (size \/ pSize)) * pSize;\n      let y2 = Math.floor(Math.random() * (size \/ pSize)) * pSize;\n\n      let img1 = sqx.getImageData(x1, y1, pSize, pSize);\n      let img2 = sqx.getImageData(x2, y2, pSize, pSize);\n\n      sqx.putImageData(img1, x2, y2);\n      sqx.putImageData(img2, x1, y1);\n    }\n  } else {\n    \/\/ ORDER: L\u00e4sst das Quadrat langsam wieder verblassen \/ wei\u00df werden\n    let img = sqx.getImageData(0, 0, size, size);\n    let d = img.data;\n    for (let i = 0; i < d.length; i += 4) {\n      if (d[i] < 255) d[i] += (255 - d[i]) * 0.05;\n      if (d[i+1] < 255) d[i+1] += (255 - d[i+1]) * 0.05;\n      if (d[i+2] < 255) d[i+2] += (255 - d[i+2]) * 0.05;\n    }\n    sqx.putImageData(img, 0, 0);\n  }\n}\n\n\/\/ ---------------- CIRCLE (TIME SYSTEM) ----------------\nfunction circleStep() {\n  cctx.clearRect(0, 0, cir.width, cir.height);\n\n  const cx = cir.width \/ 2;\n  const cy = cir.height \/ 2;\n  const radius = 80;\n\n  \/\/ Kreisbahn\n  cctx.beginPath();\n  cctx.arc(cx, cy, radius, 0, Math.PI * 2);\n  cctx.strokeStyle = \"#333\";\n  cctx.lineWidth = 2;\n  cctx.stroke();\n\n  \/\/ Richtung abh\u00e4ngig von Phase\n  let dir = (phase === 0) ? 1 : -1;\n\n  angle += 0.05 * dir;\n\n  let x = cx + Math.cos(angle) * radius;\n  let y = cy + Math.sin(angle) * radius;\n\n  cctx.beginPath();\n  cctx.arc(x, y, 10, 0, Math.PI * 2);\n  cctx.fillStyle = \"red\";\n  cctx.fill();\n}\n\n\/\/ ---------------- RESET SHAPE ----------------\nfunction drawSquareReset() {\n  sqx.fillStyle = \"#ffffff\";\n  sqx.fillRect(0, 0, sq.width, sq.height);\n\n  \/\/ Initial-Struktur mit gr\u00f6\u00dferen Pixel-Bl\u00f6cken f\u00fcllen\n  for (let x = 0; x < sq.width; x += pSize) {\n    for (let y = 0; y < sq.height; y += pSize) {\n      if (Math.random() > 0.3) { \/\/ Nicht jedes Feld f\u00fcllen f\u00fcr mehr Dynamik\n        sqx.fillStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;\n        sqx.fillRect(x, y, pSize, pSize);\n      }\n    }\n  }\n}\n\n\/\/ ---------------- LOOP ----------------\nfunction loop() {\n  if (!running) return;\n\n  frame++;\n\n  if (frame % switchEvery === 0) {\n    phase = 1 - phase; \/\/ \ud83d\udd01 Rollenwechsel\n  }\n\n  squareStep();\n  circleStep();\n\n  setTimeout(() => {\n    animationId = requestAnimationFrame(loop);\n  }, 60);\n}\n\n\/\/ ---------------- CONTROLS ----------------\nfunction startSim() {\n  if (!running) {\n    running = true;\n    loop();\n  }\n}\n<\/script>\n\n\n\n<p class=\"has-base-2-background-color has-background wp-block-paragraph\">Zwei Systeme, ein gemeinsamer Taktgeber. Das Quadrat kennt zwei Zust\u00e4nde: Chaos, in dem zuf\u00e4llige Bl\u00f6cke ihre Pl\u00e4tze tauschen, und Ordnung \u2013 die hier aber keine R\u00fcckkehr zum Ursprung bedeutet, sondern ein Verblassen ins Wei\u00dfe. Es gibt kein gespeichertes Original, zu dem zur\u00fcckgekehrt werden k\u00f6nnte. Was als Beruhigung erscheint, ist tats\u00e4chlich Ausl\u00f6schung: Die bunte Struktur wird nicht wiederhergestellt, sie wird getilgt. Ordnung und Erinnerungslosigkeit fallen hier zusammen.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background wp-block-paragraph\">Psychologisch ist das eine andere Verarbeitung von Stress als im ersten System. Dort gab es einen Ursprung, zu dem die Reaktion zur\u00fcckfand \u2013 eine Form von Resilienz, so verzerrt sie auch war. Hier existiert dieser Anker nicht. Beruhigung bedeutet nicht Integration des Erlebten, sondern dessen Tilgung. Das erinnert an dissoziative Bew\u00e4ltigung: der Reiz wird nicht verarbeitet, sondern durch Leere ersetzt. Was von au\u00dfen wie Ruhe aussieht, ist von innen ein Verlust an Substanz \u2013 die Farben, die f\u00fcr Erregung, Vielfalt, Lebendigkeit stehen k\u00f6nnten, verschwinden restlos.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background wp-block-paragraph\">Der Kreis daneben \u00fcbersetzt das in Bewegung. Ein Punkt kreist vorw\u00e4rts, solange das Quadrat im Chaos ist, r\u00fcckw\u00e4rts, sobald es sich wei\u00dft. Zeit bekommt eine Richtung, die nicht aus sich selbst folgt, sondern aus dem Zustand eines anderen Systems abgeleitet wird. Medienk\u00fcnstlerisch ist das die eigentliche Setzung: Zeit wird hier nicht dargestellt, sondern gekoppelt \u2013 zu einer abh\u00e4ngigen Variable eines Prozesses, den sie selbst nicht steuert. Die Kreisbahn, die klassische Ikone zyklischer, wiederkehrender Zeit, wird hier zum blo\u00dfen Indikator eines fremden Zustands degradiert.<\/p>\n\n\n\n<p class=\"has-base-2-background-color has-background wp-block-paragraph\">Das ist die politische Pointe: Geschichte wird nicht dokumentiert, sondern geschrieben \u2013 vorw\u00e4rts erz\u00e4hlt, solange Unordnung herrscht, r\u00fcckw\u00e4rts gespult, sobald eine Ordnung durchgesetzt wird, die sich als Wiederherstellung ausgibt. Tats\u00e4chlich wird nichts wiederhergestellt. Es wird gegl\u00e4ttet, bis nichts Farbiges mehr \u00fcbrig ist \u2013 eine Wei\u00dfung, die sich als R\u00fcckkehr zur Ruhe tarnt, w\u00e4hrend sie in Wahrheit die L\u00f6schung der urspr\u00fcnglichen Vielfalt ist. Wer die Phase kontrolliert, kontrolliert, ob Zeit vor- oder zur\u00fcckl\u00e4uft, und ob Erinnerung \u00fcberhaupt einen Ort hat, an den sie zur\u00fcckkehren kann.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zwei Systeme, ein gemeinsamer Taktgeber. Das Quadrat kennt zwei Zust\u00e4nde: Chaos, in dem zuf\u00e4llige Bl\u00f6cke ihre Pl\u00e4tze tauschen, und Ordnung \u2013 die hier aber keine R\u00fcckkehr zum Ursprung bedeutet, sondern ein Verblassen ins Wei\u00dfe. Es gibt kein gespeichertes Original, zu dem zur\u00fcckgekehrt werden k\u00f6nnte. Was als Beruhigung erscheint, ist tats\u00e4chlich Ausl\u00f6schung: Die bunte Struktur wird [&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-198","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/198","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=198"}],"version-history":[{"count":9,"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/198\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/b-common.de\/index.php?rest_route=\/wp\/v2\/pages\/198\/revisions\/787"}],"wp:attachment":[{"href":"https:\/\/b-common.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}