Slide 5: das Band legt sich um den Stapel, statt darauf zu liegen

Der Knick sass 70 Einheiten vor der Plattenkante und lag damit mitten
auf dem Bildschirm -- das sah aus wie ein Spruchband, das jemand
daraufgeklebt und in der Mitte geknickt hat. Ein Band knickt nicht um
nichts: der Knick gehoert an die Kante, weil dort etwas ist, worum es
sich legen kann.

Jetzt knickt es genau dort um, wo die Platte aufhoert, laeuft dahinter
weiter und kommt an ihrer Kante wieder hervor: tiefer, weil es
umgeschlagen ist, niedriger, weil es wegfuehrt, flacher getont, weil man
von dort seine Unterseite sieht.

Die Stelle wird nicht gerechnet. Beide Stuecke reichen absichtlich weit
in die Platte hinein, und zwei Masken schneiden sie an deren Kante ab --
bandSilhouette die vordere Flaeche innen, bandAussen die Stuecke
draussen. Der Knick sitzt damit immer auf der Kante, auch wenn sich die
Platten einmal verschieben.

Zwei Fehler steckten in der Naht dazwischen, beide erst im erzeugten
SVG und beim Auszaehlen der Pixel sichtbar:

  Beide Masken kamen aus derselben Kontur, aber die innere trug einen
  schwarzen Strich darauf und war damit um eine halbe Haarlinie kleiner
  als die aeussere gross war. In der Luecke war das Band von beiden
  Seiten halb durchsichtig -- ein blasser Streifen genau im Falz. Die
  Falzkante kommt jetzt als eigener Strich darueber.

  Die Abdunklung lag auf einem Rechteck 0 0 W H. Die Stuecke stehen
  ausserhalb von 0..W und wurden nie getroffen, waren also heller als
  das Band daneben -- verkehrt herum fuer etwas, das weiter hinten
  liegt. Nachgemessen quer ueber die Naht: Stueck 125, Band 132.

Der Lichtabfall ist auf die Haelfte zurueckgenommen (0,80 -> 0,42):
zusammen mit dem dunkleren Stueck wurde daraus sonst ein brauner
Schatten statt eines Bandes.

Ohne die zwei Festlichkeiten des klassischen Spruchbands: keine Zacken,
kein Bogen. Ein gewoelbtes Band ueber einer flachen Oberflaeche sieht
nach Urkunde aus.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv

post6.html

@@ -3237,6 +3237,9 @@ if (location.search.indexOf("nur=anim") >= 0)
      der Chat auf den Ausschnitten kommt aus dem Pitch-Paket. */
   const WEB = {
     band: "#F1B729", bandDunkel: "#171106",
+    /* Das Band knickt an der Plattenkante um und kommt dahinter wieder
+       hervor. Der Ton dafuer: die Unterseite, die weniger Licht faengt. */
+    bandWeg: "#DFA81E",
   };
 
   /* ─── Slide 5 · Der Chat für unterwegs ──────────────────────────────────
@@ -3316,7 +3319,11 @@ if (location.search.indexOf("nur=anim") >= 0)
        Schutzhelm und "BALD VERFUEGBAR". Es liegt ueber beiden Platten und
        laeuft an beiden Enden hinter sie -- es sperrt die ganze Sache ab,
        nicht eine Flaeche darin. Wie das gemacht ist, steht weiter unten bei
-       der Maske; die Form selbst bleibt das Rechteck der Website.
+       der Maske.
+
+       Die Form ist nicht mehr das Rechteck der Website, sondern ein
+       Spruchband mit Falz an beiden Enden. Das ist eine Abweichung und steht
+       als solche in POST-6.md 5a.
 
        UEBER ist der Rand des Kastens und zugleich der Ueberstand des Bandes
        darin. Beides an einer Zahl, weil die Bandlaenge genau so gerechnet
@@ -3334,16 +3341,56 @@ if (location.search.indexOf("nur=anim") >= 0)
 
     /* Die Woelbung quer ueber die Hoehe: ein Verlauf von hell nach dunkel,
        wie auf einem Band, das leicht gewoelbt ueber der Flaeche liegt. Sie
-       ist alles, was die Form selbst an Tiefe traegt -- zwei Anlaeufe haben
-       stattdessen die Geometrie verbogen, erst die Enden zur Spitze
-       verjuengt, dann um die Knickstelle gekippt, und beides sah nach
-       Schleife oder Welle aus. Ein Absperrband ist flach und straff.
+       liegt auf der vorderen Flaeche und traegt deren Rundung.
 
        Das Abdunkeln an den Enden stand vorher hier, in den Koordinaten des
        Bandes. Es steht jetzt weiter unten in denen der Zeichnung: es gehoert
        an die Stelle, wo das Band hinter eine Platte laeuft, und die liegt
-       nicht am Bandende. */
+       nicht am Bandende. Seit der Falz die Tiefe traegt, ist es nur noch
+       halb so kraeftig -- zusammen mit dem ohnehin dunkleren weglaufenden
+       Stueck wurde daraus sonst ein brauner Schatten statt eines Bandes. */
+    /* ── Der Umschlag an der Plattenkante ────────────────────────────────
+       Das Band liegt flach ueber dem Stapel und knickt genau dort um, wo die
+       Platte aufhoert -- nicht davor. Hinter ihr laeuft es weiter und kommt
+       an ihrer Kante wieder hervor: tiefer, weil es dabei umgeschlagen ist,
+       niedriger, weil es vom Betrachter wegfuehrt, und flacher getont, weil
+       man von dort seine Unterseite sieht.
+
+       Ein Zwischenstand setzte den Knick 70 Einheiten *vor* die Kante. Damit
+       lag er mitten auf dem Bildschirm, und das Ganze sah aus wie ein
+       Spruchband, das jemand daraufgeklebt und in der Mitte geknickt hat.
+       Ein Band knickt nicht um nichts: der Knick gehoert an die Kante.
+
+       Gerechnet wird die Stelle nicht. Die beiden Stuecke reichen absichtlich
+       weit in die Platte hinein, und zwei Masken schneiden sie exakt an deren
+       Kante ab -- die vordere Flaeche innerhalb der Silhouette, die Stuecke
+       ausserhalb. Der Knick sitzt damit immer auf der Kante, auch wenn sich
+       die Platten einmal verschieben, und zwischen beiden bleibt die
+       Haarlinie der Platte stehen: sie ist die Falzkante.
+
+       Vorbild ist das klassische Spruchband, aber ohne dessen zwei
+       Festlichkeiten: keine Zacken an den Enden und kein Bogen ueber die
+       Laenge. Ein gewoelbtes Band ueber einer flachen Oberflaeche sieht nach
+       Urkunde aus, und darum geht es nicht. */
     const oT = ty, uT = ty + bh;
+    const uVon = W / 2 - (W / 2) / Math.cos(bogen);
+    const uBis = W / 2 + (W / 2) / Math.cos(bogen);
+    const HERVOR = 78;          // wie weit das Stueck hinter der Platte hervorsteht
+    const VERSATZ = 40;         // wie tief es dabei haengt
+    const SCHMAL = .72;         // seine Hoehe: verkuerzt, weil es wegfuehrt
+    const NEIG = 10;            // zusaetzlicher Fall nach aussen
+    const hT = bh * SCHMAL;
+    const zO = oT + VERSATZ, zU = zO + hT;
+
+    /* Ein umgeschlagenes Stueck. uI liegt in der Platte und wird von der
+       Maske weggenommen, uA steht draussen. */
+    const zipfel = (uI, uA) =>
+      "M" + n1(uI) + "," + n1(zO) + "L" + n1(uA) + "," + n1(zO + NEIG) +
+      "L" + n1(uA) + "," + n1(zU + NEIG) + "L" + n1(uI) + "," + n1(zU) + "Z";
+
+    const bandForm = "M" + n1(bA) + "," + n1(oT) + "H" + n1(bE) +
+      "V" + n1(uT) + "H" + n1(bA) + "Z";
+
     const gid = "bandLicht";
     let band =
       '<defs>' +
@@ -3366,6 +3413,21 @@ if (location.search.indexOf("nur=anim") >= 0)
     band += '<path d="M' + n1(bA) + ',' + n1(oT + 9) + 'H' + n1(bE) +
       '" stroke="#FFFFFF" stroke-width="2.4" opacity=".28"/>';
 
+    /* Die beiden umgeschlagenen Stuecke. Sie stehen getrennt, weil sie eine
+       andere Maske tragen als die vordere Flaeche. Die Aussenkante quer
+       darueber schliesst sie ab -- ohne sie endet das Stueck offen. */
+    let zipfelHtml = "", zipfelForm = "";
+    for (const [uI, uA] of [[uVon + 70, uVon - HERVOR], [uBis - 70, uBis + HERVOR]]) {
+      zipfelForm += zipfel(uI, uA);
+      zipfelHtml += '<path d="' + zipfel(uI, uA) + '" fill="' + WEB.bandWeg + '"/>';
+      zipfelHtml += '<path d="M' + n1(uI) + ',' + n1(zO) + 'L' + n1(uA) + ',' +
+        n1(zO + NEIG) + '" stroke="' + WEB.bandDunkel + '" stroke-width="4" fill="none"/>';
+      zipfelHtml += '<path d="M' + n1(uI) + ',' + n1(zU) + 'L' + n1(uA) + ',' +
+        n1(zU + NEIG) + '" stroke="' + WEB.bandDunkel + '" stroke-width="4" fill="none"/>';
+      zipfelHtml += '<path d="M' + n1(uA) + ',' + n1(zO + NEIG) + 'V' + n1(zU + NEIG) +
+        '" stroke="' + WEB.bandDunkel + '" stroke-width="4" fill="none"/>';
+    }
+
     /* Schrift und Helm einmal, mittig auf der geraden Flaeche. Vorher lief
        der Satz wiederholt ueber das ganze Band und begann links am Rand --
        auf einem Band, dessen Enden wegknicken, gehoert er in die Mitte. */
@@ -3419,7 +3481,7 @@ if (location.search.indexOf("nur=anim") >= 0)
        wieder verloren -- dort blendet die Maske das Band schon aus, das
        Dunkelste lag also im Durchsichtigen. Der Hoehepunkt gehoert ein
        Stueck davor, wo das Band noch voll deckt. */
-    const UMSCHLAG = [[0, .80], [5, .70], [13, .44], [28, .20], [56, 0]];
+    const UMSCHLAG = [[0, .42], [6, .30], [16, .14], [38, 0]];
     const halt = (d, o) => '<stop offset="' + (d / W).toFixed(4) +
       '" stop-color="#5A4108" stop-opacity="' + o + '"/>';
 
@@ -3436,12 +3498,46 @@ if (location.search.indexOf("nur=anim") >= 0)
     g += '<defs>' +
       '<filter id="bandKante" x="-20%" y="-20%" width="140%" height="140%">' +
         '<feGaussianBlur stdDeviation="1.1"/></filter>' +
+      /* Beide Masken kommen aus derselben Kontur, ohne Strich darauf: so
+         ergaenzen sich ihre Deckungen an jeder Stelle zu genau eins. Ein
+         schwarzer Strich stand hier einmal, um die Haarlinie der Platte
+         freizuhalten -- er machte die innere Maske um eine halbe Linie
+         kleiner als die aeussere gross war, und in der Luecke dazwischen war
+         das Band an beiden Seiten halb durchsichtig. Am gerenderten Blatt
+         war das ein blasser Streifen genau im Falz. Die Falzkante kommt
+         jetzt als eigener Strich darueber, siehe unten. */
       '<mask id="bandSilhouette" maskUnits="userSpaceOnUse" x="-120" y="-120" ' +
         'width="' + (W + 240) + '" height="' + (H + 240) + '">' +
-        '<g filter="url(#bandKante)"><path d="' + SILH + '" fill="#FFFFFF" ' +
-        'stroke="#000000" stroke-width="1.3"/></g></mask>' +
-      '<clipPath id="bandFlaeche"><rect x="' + n1(bA) + '" y="' + n1(oT) +
-        '" width="' + n1(bL) + '" height="' + bh + '" transform="' + dreh + '"/></clipPath>' +
+        '<g filter="url(#bandKante)"><path d="' + SILH + '" fill="#FFFFFF"/></g></mask>' +
+      /* Die Gegenmaske fuer die umgeschlagenen Stuecke: alles ausserhalb der
+         Silhouette, aus derselben Kontur und mit derselben Weichzeichnung. */
+      '<mask id="bandAussen" maskUnits="userSpaceOnUse" x="-120" y="-120" ' +
+        'width="' + (W + 240) + '" height="' + (H + 240) + '">' +
+        '<rect x="-120" y="-120" width="' + (W + 240) + '" height="' + (H + 240) +
+        '" fill="#FFFFFF"/>' +
+        '<g filter="url(#bandKante)"><path d="' + SILH + '" fill="#000000"/></g>' +
+        '</mask>' +
+      /* Der Lichtabfall gilt nur der vorderen Flaeche; die umgeschlagenen
+         Stuecke sind ohnehin flach getont. */
+      '<clipPath id="bandFlaeche"><path d="' + bandForm +
+        '" transform="' + dreh + '"/></clipPath>' +
+      /* Band und Stuecke zusammen -- daran wird die Falzkante beschnitten,
+         damit sie ueber beide laeuft und an ihrem Rand aufhoert.
+
+         Zwei getrennte Pfade und nicht einer: als ein Pfad mit mehreren
+         Teilstuecken laufen Bandrechteck und Stueck gegenlaeufig, und die
+         Fuellregel nonzero loescht ihren Ueberlapp weg. Genau dort, wo die
+         Falzkante hin soll, war dadurch ein Loch und die Kante fehlte. Die
+         Kinder einer clipPath werden dagegen vereinigt. */
+      '<clipPath id="bandGesamt"><path d="' + bandForm + '" transform="' + dreh +
+        '"/><path d="' + zipfelForm + '" transform="' + dreh + '"/></clipPath>' +
+      /* Und die Stuecke allein: der Lichtabfall gilt auch fuer sie. Er lag
+         zuerst nur auf der vorderen Flaeche, und damit war das Stueck an der
+         Naht heller als das Band daneben -- verkehrt herum, denn es liegt
+         weiter hinten. Da es ganz ausserhalb von 0..W steht, greift der
+         Verlauf dort mit seinem vollen Wert. */
+      '<clipPath id="bandZipfel"><path d="' + zipfelForm +
+        '" transform="' + dreh + '"/></clipPath>' +
       /* Waagerecht in den Koordinaten der Zeichnung, nicht in denen des
          Bandes: der Abfall soll parallel zur senkrechten Plattenkante
          stehen, an der er endet, und nicht schraeg dazu. Der Ton ist ein
@@ -3463,11 +3559,32 @@ if (location.search.indexOf("nur=anim") >= 0)
        Drehung an derselben Stelle wuerde sie mitdrehen. Ihr Schatten faellt
        damit ebenfalls nur auf die Platten -- neben ihnen ist keine Flaeche,
        die einen aufnehmen koennte. */
+    /* Zuerst die umgeschlagenen Stuecke: sie kommen hinter der Platte hervor
+       und liegen damit hinter allem. Ihr Schatten faellt auf den Grund neben
+       der Platte, nicht auf sie -- dort sind sie ja dahinter. */
+    g += '<g mask="url(#bandAussen)">' +
+      '<g transform="' + dreh + '" filter="url(#hgtief)">' + zipfelHtml + '</g>' +
+      /* Ueber die Zeichnung hinaus: die Stuecke stehen ausserhalb von 0..W,
+         ein Rechteck dieser Breite traf sie nie. Der Verlauf haelt draussen
+         seinen Randwert, sie bekommen also die volle Abdunklung. */
+      '<g clip-path="url(#bandZipfel)"><rect x="-240" y="-240" width="' + (W + 480) +
+        '" height="' + (H + 480) + '" fill="url(#bandUmschlag)"/></g>' +
+      '</g>';
     g += '<g mask="url(#bandSilhouette)">' +
       '<g transform="' + dreh + '" filter="url(#hgtief)">' + band + '</g>' +
       '<g clip-path="url(#bandFlaeche)"><rect x="0" y="0" width="' + W +
         '" height="' + H + '" fill="url(#bandUmschlag)"/></g>' +
       '</g>';
+    /* Die Falzkante. Sie steht senkrecht auf der Plattenkante, waehrend das
+       Band mit 13 Grad ankommt -- und sie laeuft ueber die vordere Flaeche
+       und das umgeschlagene Stueck hinweg, weil beide an derselben Kante
+       zusammenstossen. Ohne sie brechen die dunklen Laengskanten an der Naht
+       einfach ab und der Falz sieht zerschnitten aus statt geknickt.
+
+       Gezeichnet in den Koordinaten der Zeichnung, nicht des Bandes: sie
+       gehoert der Platte, nicht dem Band. */
+    g += '<g clip-path="url(#bandGesamt)"><path d="M0,0V' + H + 'M' + W + ',0V' + H +
+      '" stroke="' + WEB.bandDunkel + '" stroke-width="4.5" fill="none"/></g>';
     return wfSvg(W + 2 * UEBER, H, '<g transform="translate(' + UEBER + ',0)">' + g + '</g>');
   }