diff --git a/POST-6.md b/POST-6.md index 57e62b9..d39a64d 100644 --- a/POST-6.md +++ b/POST-6.md @@ -253,31 +253,59 @@ soll es auch sein. `components/sections/ChatDemoSection.tsx` steht unter der Fahne `comingSoon` genau dieses Element: ein **Absperrband** aus dem Bau, gedreht um **-13°**, in `--accent-yellow` `#F1B729` mit Kanten in `#171106`, darauf immer wieder -Schutzhelm und **BALD VERFÜGBAR**. Es liegt über beiden Ausschnitten und ragt -beidseitig hinaus: es sperrt die ganze Sache ab, nicht eine Fläche darin. +Schutzhelm und **BALD VERFÜGBAR**. Auf der Website ist es an den Rand des +Telefons beschnitten — „*clipped to the phone's rounded bounds so the ends cut +off like real tape*" steht als Kommentar daneben. Ein Zwischenstand hatte hier einen selbst erfundenen gelben Aufkleber „In Arbeit". Das war eine eigene Bildsprache neben einer vorhandenen. Übernommen ist jetzt die der Website, samt Winkel, Farben und Wortlaut. -**Zwei Abweichungen davon, beide der Tiefe wegen.** Auf der Website ist das -Band ein flaches Rechteck mit durchlaufender Schrift; hier lag es damit als -Aufkleber auf der Fläche statt als Band darüber. +**Das Band läuft hinter die Ausschnitte.** Es liegt über beiden und +verschwindet an beiden Enden hinter ihnen: links hinter der linken Kante der +hinteren Platte, rechts hinter der rechten der vorderen. Beschnitten wird also +an der Silhouette **beider** Ausschnitte, und die ist die ganze Sache — der +Gegensatz „absperren oder beschneiden", den ein früherer Stand hier +behauptete, gibt es nicht. -*Die Tiefe kommt aus Licht, nicht aus Geometrie.* Quer über die Höhe liegt ein -Verlauf von `#F8C64A` über `#F1B729` nach `#D89F1B`, knapp unter der Oberkante -ein Glanzlicht, und zu beiden Enden hin dunkelt es um 20 % ab. Die untere -Längskante ist einen Pixel dicker als die obere, weil sie im Schatten der -Wölbung liegt. Die Form bleibt das Rechteck, das sie auf der Website ist. +Vorher lief das Band über die ganze Zeichnung hinaus und endete an der +Bildkante, quer zur eigenen Laufrichtung abgeschnitten. Genau das ist das +Zeichen für *ein Ende*: so liest sich ein Aufkleber, der zufällig dort aufhört, +wo das Bild aufhört. Ein Ende, das an einer **senkrechten Plattenkante** +abbricht, während das Band mit 13° ankommt, ist keines. + +**Drei Dinge tragen das, und keines verbiegt die Form.** + +*Die Schnittkante ist die Plattenkante.* Getroffen wird die Silhouette an genau +zwei Stellen, beide dort gerade — die Rundungen liegen weit weg — und beide +senkrecht. + +*Sie ist weicher als eine gezogene Linie und härter als die Platten.* Mit deren +`stdDeviation 2.2` lief das Band über vier Einheiten ins Weiße aus und sah nach +Ausblenden aus statt nach Verdecken; ganz scharf stand eine gestochene Kante an +einer unscharfen Platte. `1.1` liegt dazwischen. + +*Die letzten Einheiten verlieren Licht,* weil die Fläche sich wegdreht: von +`#F1B82A` auf `#815F11` über 56 Einheiten, mit dem Höhepunkt als Plateau dicht +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 +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. 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 Wölbung, nicht ein Knick. +was ihm gefehlt hat, war nicht ein Knick, sondern eine Kante, hinter die es +läuft. *Helm und Schrift stehen einmal, mittig auf der geraden Fläche.* Wiederholt und -am linken Rand beginnend passte der Satz zu einem endlosen Band; auf einem, -dessen Enden sichtbar wegknicken, gehört er in die Mitte. +am linken Rand beginnend passte der Satz zu einem endlosen Band. Er sitzt in +der Mitte des sichtbaren Laufs, weil dessen Mitte und die Drehmitte des Bandes +dieselbe Stelle sind: beide Kanten liegen gleich weit von ihr weg. **Vom Absperrband abgesehen kommt der Schirm aus dem Pitch-Paket.** Eine Zwischenfassung zeigte dort den Chat der Website (Heizungsprojekt Schulz, @@ -422,7 +450,7 @@ violett.** Im Original steht dort `bg-surface-neutral-primary` mit Rand und --- -## 6. Achtzehn Fallen aus diesem Bau +## 6. Einundzwanzig Fallen aus diesem Bau **Die Listenzeile hat drei Zeilen, nicht zwei.** Der erste Anlauf setzte Titel und Vorschau untereinander und schob Nadel und Ungelesen-Punkt rechts neben @@ -573,6 +601,27 @@ Anfangszustand anfasst, prüft ihn nicht mehr.** `animSetzen` weist NaN jetzt zusätzlich mit `Number.isFinite` ab, damit ein solcher Wert gar nicht erst in den Stand kommt. +**Ein weicher Schnitt und ein Schatten an derselben Stelle heben sich auf.** +Die Falte des Absperrbands hatte ihren dunkelsten Punkt genau auf der +Plattenkante. Dort blendet die Maske das Band aber schon aus — das Dunkelste +lag also im Durchsichtigen und mischte sich mit dem Weiß der Platte zu einem +blassen Streifen, der die Falte gerade wieder aufhob. Der Höhepunkt sitzt jetzt +als Plateau ein Stück davor, wo das Band noch voll deckt. + +**Ein Verlauf gehört in die Koordinaten dessen, woran er endet.** Das Abdunkeln +der Bandenden stand zuerst im gedrehten Bandkasten und lief damit 13° schräg +zur senkrechten Plattenkante, an der es aufhören soll. Über die Bandhöhe +verschob sich der Höhepunkt dadurch um 21 Einheiten. Es steht jetzt in den +Koordinaten der Zeichnung, waagerecht, parallel zur Kante. + +**Ein Kommentar, der einen zurückgenommenen Stand beschreibt, ist schlimmer als +keiner.** Über dem Band standen zwei Kommentarblöcke übereinander: der eine +sagte, es rage beidseitig hinaus, der andere, es knicke an den Enden weg. Das +erste stimmte noch, das zweite war einen Commit vorher zurückgenommen worden. +Wer danach etwas ändert, glaubt dem Kommentar. Mit ihnen weg sind auch +`WEB.bandKnick` und `WEB.bandSpitze`, die Farben des Knicks, die niemand mehr +las. + --- ## 7. Das Bewegtbild diff --git a/README.md b/README.md index ca379e9..fbd1471 100644 --- a/README.md +++ b/README.md @@ -251,10 +251,10 @@ hier aber gewollt. `pruef.mjs` liest einen negativen `--vis-left` als Ansage und meldet ihn nicht mehr als Fehler. Beide Ausschnitte auf Slide 5 sind leicht verwischt: erkennbar, aber nicht zu lesen. -Scharf bleibt allein das Band. Von Slack kommt ein zweites Mittel, das auf -Slide 3 sitzt: **ein dicker gelber Rahmen, der seitlich aus der Blase -ausbricht** und auf die Anhangkarte der Aufgabe zeigt, weil die den Satz der -Slide trägt. +Scharf bleibt allein das Band. Ein zweites Mittel von Slack, ein dicker gelber +Rahmen um die Anhangkarte auf Slide 3, ist wieder weg: die Karte trägt als +einzige eine gelbe Marke, der Blick geht ohnehin dorthin, und ein Rahmen sagt +nochmal, was die Anordnung schon sagt — [`POST-6.md`](./POST-6.md) §5c. Dass die App noch nicht da ist, sagt das **Absperrband** von der Website: `ChatDemoSection.tsx` hat es unter der Fahne `comingSoon`, -13° gedreht, in @@ -262,6 +262,17 @@ Dass die App noch nicht da ist, sagt das **Absperrband** von der Website: Überschrift und Fließtext sind die der Website; der Inhalt der Ausschnitte kommt aus dem Pitch-Paket wie auf allen anderen Slides. +**Das Band läuft hinter die Ausschnitte** und ist an ihrer Silhouette +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 +[`POST-6.md`](./POST-6.md) §5a. + **Die Tiefe kommt aus dem Stapel und gestaffelten Schatten, nicht aus Flächen.** Ein Zwischenstand legte graue Flächen hinter die Elemente; das nimmt den Zeichnungen ihre Durchsichtigkeit und setzt einen Kasten auf den diff --git a/post6.html b/post6.html index d7b3cc8..6e338df 100644 --- a/post6.html +++ b/post6.html @@ -3237,9 +3237,6 @@ if (location.search.indexOf("nur=anim") >= 0) der Chat auf den Ausschnitten kommt aus dem Pitch-Paket. */ const WEB = { band: "#F1B729", bandDunkel: "#171106", - /* Die Enden knicken nach hinten weg und liegen damit im Schatten. Zwei - Stufen, nicht eine: die Knickflaeche und dahinter die Spitze. */ - bandKnick: "#D6A11E", bandSpitze: "#B98914", }; /* ─── Slide 5 · Der Chat für unterwegs ────────────────────────────────── @@ -3316,32 +3313,38 @@ if (location.search.indexOf("nur=anim") >= 0) platte(VX, VY, vorn) + ''; /* Das Absperrband der Website: -13°, accent-yellow auf dunklen Kanten, - Schutzhelm und "BALD VERFUEGBAR" im Wechsel. Es liegt ueber beiden - Platten und ragt beidseitig hinaus -- es sperrt die ganze Sache ab, - nicht eine Flaeche darin. */ - /* Das Absperrband. Es liegt nicht flach auf der Flaeche, sondern knickt - an beiden Enden nach hinten weg: die Aussenkanten laufen zur Mitte - zusammen, die Knickflaechen sind dunkler, und an der Knickstelle steht - eine Kante. Das ist der ganze Trick -- ein Band, das perspektivisch - wegfuehrt, hat schmalere Enden und weniger Licht darauf. + 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. - Vorher war es ein Rechteck mit gleichmaessig durchlaufender Schrift. - Das las sich als Aufkleber und nicht als Band. */ + UEBER ist der Rand des Kastens und zugleich der Ueberstand des Bandes + darin. Beides an einer Zahl, weil die Bandlaenge genau so gerechnet + ist, dass der gedrehte Kasten des Bandes exakt die Kastenbreite misst: + bL*cos + bh*sin = W + 2*UEBER. Damit steht nie Geometrie ueber den + viewBox hinaus, auch wenn ein Teil davon verdeckt ist -- und die + Randmessung sieht dasselbe wie das Auge. Genau daran hat es schon + einmal gehakt: getBBox() kennt keine Beschneidung und meldete beim + ersten, am Geraet abgeschnittenen Band 146 px Ueberstand, den es nicht + gab (POST-6.md 6). Wer UEBER anfasst, muss beides mitdenken. */ const UEBER = 84, bh = 92, ty = H / 2 - bh / 2 + 24; const bogen = 13 * Math.PI / 180; const bL = (W + 2 * UEBER - bh * Math.sin(bogen)) / Math.cos(bogen); const bA = (W - bL) / 2, bE = bA + bL; - /* Die Tiefe kommt aus Licht und nicht aus Geometrie. Zwei Anlaeufe - haben die Form verbogen -- erst die Enden zur Spitze verjuengt, dann um - die Knickstelle gekippt. Beides sah nach Schleife oder Welle aus, weil - ein Absperrband nun einmal flach und straff ist. Was ihm gefehlt hat, - war Rundung: quer ueber die Hoehe ein Verlauf von hell nach dunkel, wie - auf einem Band, das leicht gewoelbt ueber der Flaeche liegt, und zu den - Enden hin ein Abdunkeln, weil sie weiter weg sind. Die Form bleibt das - Rechteck, das sie auf der Website ist. */ + /* 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. + + 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. */ const oT = ty, uT = ty + bh; - const gid = "bandLicht", eid = "bandEnden"; + const gid = "bandLicht"; let band = '' + '' + @@ -3349,17 +3352,9 @@ if (location.search.indexOf("nur=anim") >= 0) '' + '' + '' + - '' + - '' + - '' + - '' + - '' + - '' + '' + '' + - ''; + '" height="' + bh + '" fill="url(#' + gid + ')"/>'; /* Die dunklen Laengskanten. Die untere sitzt eine Spur dicker: dort liegt die Kante im Schatten der Woelbung. */ @@ -3382,11 +3377,97 @@ if (location.search.indexOf("nur=anim") >= 0) band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel, { sperr: "0.16em" }); + /* ── Das Band laeuft um den Stapel herum ────────────────────────────── + Auf der Website ist es am Rand des Telefons beschnitten: "Clipped to + the phone's rounded bounds so the ends cut off like real tape" + (ChatDemoSection.tsx). Hier lief es bisher darueber hinaus, damit es + die ganze Sache absperrt und nicht eine Flaeche darin. Das war ein + Gegensatz, den es nicht gibt: beschnitten wird an der Silhouette + *beider* Ausschnitte, und die ist die ganze Sache. + + Damit kommt die Tiefe aus dem staerksten Mittel, das es dafuer gibt -- + aus der Verdeckung. Ein Ende, das quer zur Laufrichtung abgeschnitten + ist, ist das Ende des Bandes; so sah es vorher aus, wie ein Aufkleber, + der an der Bildkante aufhoert. Ein Ende, das an einer senkrechten + Plattenkante abbricht, ist keines: dort laeuft das Band hinter die + Platte, um den Stapel herum, und kommt hinten nicht mehr zum Vorschein. + + Drei Dinge tragen das, und keines davon verbiegt die Form: + + die Schnittkante ist die Plattenkante und steht schraeg zum Band + sie ist genauso weich wie die Platten -- eine unscharfe Kante kann + nichts scharf verdecken, und die Platten sind unscharf + die letzten Einheiten davor verlieren Licht, weil die Flaeche sich + wegdreht + + Getroffen wird die Silhouette an genau zwei Stellen: links die linke + Kante der hinteren Platte bei x 0, rechts die rechte der vorderen bei + x W. Beide sind dort gerade -- die Rundungen liegen weit weg -- und + beide stehen senkrecht, waehrend das Band mit 13 Grad ankommt. Genau + diese Schraege ist das Zeichen. */ + const SILH = rundRechteck(0, 0, PB, PH, RAD) + rundRechteck(VX, VY, PB, PH, RAD); + const dreh = 'rotate(-13,' + n1(W / 2) + ',' + n1(ty + bh / 2) + ')'; + + /* Der Lichtabfall vor der Kante, als Abstand zur Kante und Deckung. + Nicht linear: eine Falte ist keine Rampe. Die vollen Einheiten stehen + als Plateau dicht an der Kante, danach laeuft es schnell aus -- so + liest sich das letzte Stueck als Kante, um die sich das Band legt, und + nicht als Schatten, der darauf faellt. + + Zwei Anlaeufe davor: ein linearer Abfall ueber 44 Einheiten sah nach + Nebel aus, und ein Abfall mit dem Hoehepunkt genau auf der Kante ging + 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 halt = (d, o) => ''; + + /* Die Schnittkante ist weicher als eine gezogene Linie und haerter als + die Platten. Mit deren 2,2 lief das Band ueber vier Einheiten ins + Weisse aus und sah nach Ausblenden aus statt nach Verdecken; ganz + scharf wiederum stand eine gestochene Kante an einer unscharfen + Platte. 1,1 liegt dazwischen: die Kante traegt, ohne zu schneiden. + + Der schwarze Strich auf derselben Kontur nimmt die halbe Haarlinie der + Platte zurueck. Ohne ihn endet das Band mitten in der Kante und laesst + nur deren aeussere Haelfte stehen; die Kante wird dann duenner, genau + da, wo sie am meisten zu tragen hat. */ + g += '' + + '' + + '' + + '' + + '' + + '' + + /* 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 + warmes Dunkelbraun und kein Schwarz -- Schwarz macht aus dem Gelb + ein Grau, und ein Band, das sich wegdreht, wird nicht farblos. */ + '' + + UMSCHLAG.map(([d, o]) => halt(d, o)).join("") + + UMSCHLAG.slice().reverse().map(([d, o]) => halt(W - d, o)).join("") + + '' + + ''; + /* Um die eigene Mitte drehen, nicht um die der Zeichnung: das Band liegt 24 Einheiten tiefer, und beim Drehen um einen anderen Punkt wandert - sein Kasten seitlich aus -- fuenf Einheiten ueber den Rand. */ - g += '' + band + ''; + sein Kasten seitlich aus -- fuenf Einheiten ueber den Rand. + + Die Maske sitzt auf einer Gruppe darueber und nicht auf dieser hier: + eine Verdeckung wird in den Koordinaten der Platten gerechnet, und die + 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. */ + g += '' + + '' + band + '' + + '' + + ''; return wfSvg(W + 2 * UEBER, H, '' + g + ''); } @@ -3416,11 +3497,11 @@ if (location.search.indexOf("nur=anim") >= 0) Der Ablauf, in Anteilen der Laufzeit (6 s): - 0,00 - 0,10 ruhig, der Verlauf steht - 0,10 - 0,22 der Zeiger faehrt auf die Nachricht, der Pfeil erscheint - 0,22 - 0,27 Klick - 0,26 - 0,40 das Menue klappt auf, die Zeilen gestaffelt - 0,40 - 0,56 der Zeiger geht auf "Aufgabe erstellen", die Zeile hebt sich + 0,00 - 0,03 ruhig, der Verlauf steht + 0,03 - 0,19 der Zeiger faehrt auf die Nachricht, der Pfeil erscheint + 0,21 - 0,26 Klick + 0,25 - 0,33 das Menue klappt auf, die Zeilen gestaffelt + 0,40 - 0,54 der Zeiger geht auf "Aufgabe erstellen", die Zeile hebt sich 0,56 - 0,61 Klick 0,60 - 0,66 das Menue schliesst, der Zeiger geht 0,62 - 0,80 die Aufgabenkarte klappt in der Nachricht auf