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

POST-6.md

@@ -290,17 +290,62 @@ einer unscharfen Platte. `1.1` liegt dazwischen.
 vor der Kante. Der Ton ist ein warmes Dunkelbraun und kein Schwarz — ein Band,
 das sich wegdreht, wird nicht farblos.
 
-**Die Wölbung bleibt, die Form bleibt.** Quer über die Höhe liegt ein Verlauf
-von `#F8C64A` über `#F1B729` nach `#D89F1B`, knapp unter der Oberkante ein
+**Die Wölbung.** Quer über die Höhe der vorderen Fläche liegt ein Verlauf von
+`#F8C64A` über `#F1B729` nach `#D89F1B`, knapp unter der Oberkante ein
 Glanzlicht. Die untere Längskante ist einen Pixel dicker als die obere, weil
-sie im Schatten der Wölbung liegt. Die Form ist und bleibt das Rechteck, das
-sie auf der Website ist.
+sie im Schatten der Wölbung liegt.
 
-Zwei Anläufe davor haben stattdessen die Form verbogen: erst die Enden zur
-Spitze verjüngt, dann um eine Knickstelle gekippt. Das erste sah aus wie eine
-Schleife, das zweite wie eine Welle. Ein Absperrband ist flach und straff —
-was ihm gefehlt hat, war nicht ein Knick, sondern eine Kante, hinter die es
-läuft.
+**Und es ist kein Rechteck mehr, sondern ein Spruchband, das sich um den
+Stapel legt.** Das ist die größte Abweichung von der Website in diesem
+Beitrag. Dort ist die Form ein durchgehendes Rechteck; hier knickt sie
+**genau an der Plattenkante** um, läuft dahinter weiter und kommt an der
+Kante wieder hervor — tiefer, weil sie dabei umgeschlagen ist, niedriger,
+weil sie vom Betrachter wegführt, und flacher getönt, weil man von dort ihre
+Unterseite sieht.
+
+| | |
+|---|---|
+| `HERVOR` 78 | wie weit das Stück hinter der Platte hervorsteht |
+| `VERSATZ` 40 | wie tief es dabei hängt |
+| `SCHMAL` 0,72 | seine Höhe: verkürzt, weil es wegführt |
+| `NEIG` 10 | zusätzlicher Fall nach außen |
+| `#DFA81E` | sein Ton — eine Fläche, die wegführt, fängt weniger Licht |
+
+**Die Stelle des Knicks wird nicht gerechnet.** Beide Stücke reichen
+absichtlich weit in die Platte hinein, und **zwei Masken** schneiden sie
+exakt an deren Kante ab: `bandSilhouette` lässt die vordere Fläche innerhalb
+der Silhouette stehen, `bandAussen` die Stücke außerhalb. Der Knick sitzt
+damit immer auf der Kante, auch wenn sich die Platten einmal verschieben.
+
+Beide kommen aus **derselben Kontur, ohne Strich darauf** — so ergänzen sich
+ihre Deckungen an jeder Stelle zu genau eins. Darüber liegt die **Falzkante**
+als eigener Strich (`bandGesamt`, 4,5 breit, `#171106`): senkrecht auf der
+Plattenkante, während das Band mit 13° ankommt, und über Fläche *und* Stück
+hinweg, weil beide dort zusammenstoßen. Ohne sie brechen die dunklen
+Längskanten an der Naht einfach ab, und der Falz sieht zerschnitten aus statt
+geknickt.
+
+Weggelassen sind die zwei Festlichkeiten des klassischen Spruchbands: **keine
+Zacken** an den Enden und **kein Bogen** über die Länge. Ein gewölbtes Band
+über einer flachen Oberfläche sieht nach Urkunde aus.
+
+> **Drei Anläufe, und woran die ersten beiden lagen.** Erst waren die Enden
+> zur Spitze verjüngt, dann war das Band um eine Knickstelle gekippt — das
+> eine sah aus wie eine Schleife, das andere wie eine Welle. Beide verbogen
+> das Band **als Ganzes** und ließen es nirgendwo hin.
+>
+> Der dritte Anlauf hatte den Knick schon richtig, saß aber **70 Einheiten
+> vor** der 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 gehört an die Kante, weil
+> dort etwas ist, worum es sich legen kann.
+
+Der Lichtabfall vor der Kante ist dabei auf die Hälfte zurückgenommen worden
+(`0,80` → `0,42` an der Kante). Zusammen mit dem ohnehin dunkleren
+umgeschlagenen Stück wurde daraus sonst ein brauner Schatten statt eines
+Bandes. Er gilt **beiden**: nachgemessen liegt das Stück an der Naht bei
+Helligkeit 125, das Band daneben bei 132 — das Stück ist also eine Spur
+dunkler, und das ist die richtige Richtung, denn es liegt weiter hinten.
 
 *Helm und Schrift stehen einmal, mittig auf der geraden Fläche.* Wiederholt und
 am linken Rand beginnend passte der Satz zu einem endlosen Band. Er sitzt in

README.md

@@ -266,11 +266,22 @@ kommt aus dem Pitch-Paket wie auf allen anderen Slides.
 beschnitten — so hält es die Website auch, dort am Rand des Telefons. Es endet
 damit nicht mehr quer zur eigenen Laufrichtung an der Bildkante, wie ein
 Aufkleber, sondern an einer senkrechten Plattenkante, hinter der es
-verschwindet. Was den Umschlag trägt, ist Verdeckung und Licht, nicht Form:
-eine Schnittkante, die schräg zum Band steht, weicher als eine gezogene Linie
-und härter als die unscharfen Platten, und ein Lichtabfall über die letzten 56
-Einheiten davor. Zwei frühere Anläufe haben stattdessen die Form verbogen und
-sahen nach Schleife und nach Welle aus; das steht in
+verschwindet. Die Schnittkante ist weicher als eine gezogene Linie und härter
+als die unscharfen Platten.
+
+**Und es legt sich um den Stapel, statt darauf zu liegen** — die größte
+Abweichung von der Website in diesem Beitrag. Genau an der Plattenkante knickt
+es um, läuft dahinter weiter und kommt an der Kante wieder hervor: tiefer,
+weil es umgeschlagen ist, niedriger, weil es wegführt, flacher getönt, weil
+man von dort seine Unterseite sieht. Ohne die zwei Festlichkeiten des
+klassischen Spruchbands: keine Zacken, kein Bogen.
+
+Die Stelle des Knicks wird dabei nicht gerechnet. Beide Stücke reichen weit in
+die Platte hinein, und zwei Masken aus derselben Kontur schneiden sie an deren
+Kante ab — die eine lässt die Fläche innen stehen, die andere die Stücke
+außen, und ihre Deckungen ergänzen sich zu eins. Darüber liegt die Falzkante
+als eigener Strich, senkrecht auf der Plattenkante und über beide hinweg. Drei
+Anläufe hat es bis dahin gebraucht; woran die ersten beiden lagen, steht in
 [`POST-6.md`](./POST-6.md) §5a.
 
 **Die Tiefe kommt aus dem Stapel und gestaffelten Schatten, nicht aus

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>');
   }