Slide 5: das Absperrband knickt an den Enden weg
Es war ein Rechteck mit gleichmaessig durchlaufender Schrift und las sich damit als Aufkleber auf der Flaeche, nicht als Band darueber. Jetzt laufen die Aussenkanten zur Mitte zusammen (10 % der Bandhoehe je Kante), die Knickflaechen sind dunkler (#D6A11E statt #F1B729), an der Knickstelle steht eine Kante, und die dunklen Laengskanten folgen dem Knick mit statt darueber zu schweben. Ein erster Anlauf knickte bei 21 % der Laenge und mit 17 % Verjuengung -- das sah aus wie eine Schleife. Bei 12 % und 10 % bleibt die Mitte flach und nur die Enden fuehren weg. Helm und Schrift stehen einmal, mittig auf der geraden Flaeche. Wiederholt und am linken Rand beginnend passte der Satz zu einem endlosen Band; auf einem, dessen Enden sichtbar wegknicken, gehoert er in die Mitte. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed
1 parent
20d26d3383
commit
1836a90a1a
1 file changed
+56
-16
+56
-16
@@ -3235,7 +3235,12 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
/* Das Absperrband der Website, components/sections/ChatDemoSection.tsx:
|
||||
accent-yellow auf dunklen Kanten. Mehr wird von dort nicht gebraucht --
|
||||
der Chat auf den Ausschnitten kommt aus dem Pitch-Paket. */
|
||||
const WEB = { band: "#F1B729", bandDunkel: "#171106" };
|
||||
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 ──────────────────────────────────
|
||||
Kein Geraet mehr. Vorbild ist die Machart, die Signal und Slack fuer
|
||||
@@ -3314,25 +3319,60 @@ if (location.search.indexOf("nur=anim") >= 0)
|
||||
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.
|
||||
|
||||
Vorher war es ein Rechteck mit gleichmaessig durchlaufender Schrift.
|
||||
Das las sich als Aufkleber und nicht als Band. */
|
||||
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;
|
||||
let band = '<rect x="' + n1(bA) + '" y="' + n1(ty) + '" width="' + n1(bL) +
|
||||
'" height="' + bh + '" fill="' + WEB.band + '"/>' +
|
||||
'<path d="M' + n1(bA) + ',' + n1(ty) + 'h' + n1(bL) + '" stroke="' + WEB.bandDunkel +
|
||||
'" stroke-width="4"/>' +
|
||||
'<path d="M' + n1(bA) + ',' + n1(ty + bh) + 'h' + n1(bL) + '" stroke="' +
|
||||
WEB.bandDunkel + '" stroke-width="4"/>';
|
||||
const bA = (W - bL) / 2, bE = bA + bL;
|
||||
|
||||
// Wo geknickt wird, und wie stark die Enden zusammenlaufen.
|
||||
const kL = bA + bL * 0.12, kR = bE - bL * 0.12;
|
||||
const ein = bh * 0.10; // Verjuengung je Kante am Ende
|
||||
const oT = ty, uT = ty + bh; // Ober- und Unterkante in der Mitte
|
||||
const oA = ty + ein, uA = ty + bh - ein; // dieselben an der Spitze
|
||||
|
||||
const flaeche = (x1, o1, u1, x2, o2, u2, f) =>
|
||||
'<path d="M' + n1(x1) + ',' + n1(o1) + 'L' + n1(x2) + ',' + n1(o2) +
|
||||
'L' + n1(x2) + ',' + n1(u2) + 'L' + n1(x1) + ',' + n1(u1) +
|
||||
'Z" fill="' + f + '"/>';
|
||||
|
||||
let band =
|
||||
flaeche(bA, oA, uA, kL, oT, uT, WEB.bandKnick) +
|
||||
flaeche(kL, oT, uT, kR, oT, uT, WEB.band) +
|
||||
flaeche(kR, oT, uT, bE, oA, uA, WEB.bandKnick);
|
||||
|
||||
/* Die dunklen Laengskanten folgen dem Knick mit, sonst schwebten sie ueber
|
||||
der Form. */
|
||||
const kante = (a1, a2, a3, a4) =>
|
||||
'<path d="M' + n1(bA) + ',' + n1(a1) + 'L' + n1(kL) + ',' + n1(a2) +
|
||||
'H' + n1(kR) + 'L' + n1(bE) + ',' + n1(a4) + '" fill="none" stroke="' +
|
||||
WEB.bandDunkel + '" stroke-width="4" stroke-linejoin="round"/>';
|
||||
band += kante(oA, oT, oT, oA) + kante(uA, uT, uT, uA);
|
||||
|
||||
// Die Knickkanten selbst: eine Spur dunkler als die Flaeche daneben.
|
||||
[kL, kR].forEach(kx => {
|
||||
band += '<path d="M' + n1(kx) + ',' + n1(oT + 2) + 'V' + n1(uT - 2) +
|
||||
'" stroke="' + WEB.bandSpitze + '" stroke-width="1.6" opacity=".7"/>';
|
||||
});
|
||||
|
||||
/* 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. */
|
||||
const wort = "BALD VERFÜGBAR", gr = 34;
|
||||
const wb = messen(wort, gr, 800) + gr * 0.16 * wort.length;
|
||||
let bx = bA + 20;
|
||||
while (bx + wb + 40 < bA + bL) {
|
||||
band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel);
|
||||
band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel,
|
||||
{ sperr: "0.16em" });
|
||||
bx += wb + 96;
|
||||
}
|
||||
const tw = messen(wort, gr, 800) + gr * 0.16 * wort.length;
|
||||
const ganz = 44 + tw;
|
||||
const bx = bA + bL / 2 - ganz / 2;
|
||||
band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel);
|
||||
band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel,
|
||||
{ sperr: "0.16em" });
|
||||
|
||||
/* 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. */
|
||||
|
||||
Reference in new issue
Block a user