From 3781cc95d97feb1cd0e66f09b580a077e5044bc7 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Wed, 12 Aug 2026 12:22:50 +0200 Subject: [PATCH] Post 2: Slide 3 wird eine Leserichtung Wechsel-Symbol, Pfeil, Chaos. Was drinhaengt, steht im Symbol; wohin ein Wechsel fuehrt, steht rechts. Der Fliesstext sagt dasselbe in derselben Reihenfolge. Vier Fassungen liegen dahinter, und sie sind lehrreich, weil sie verschieden falsch waren. Ein verwurzelter Kasten mit gerissener Leine und eine beladene Sackkarre erzaehlten je eine kleine Szene -- zu viel fuer eine Slide, die im Vorbeiscrollen sitzen muss. Eine dritte reihte Block, Pfeile und eine schraffierte Wand nebeneinander; die Wand las niemand als Wand, sondern als ausgemalten Kasten. Die vierte war ein durchgestrichenes Symbol, aber der Strich lief quer durch die Woerter. Was allen vieren fehlte, war eine Richtung. Drei Stationen von links nach rechts liest man in einer Sekunde, drei Teile nebeneinander nicht. Das Chaos ist eine Bahn durch lauter zufaellige Punkte, weich gezogen, die sich dadurch staendig selbst kreuzt. Zwei Durchgaenge fuer die Dichte, dazu lose Enden nach aussen: ein Knaeuel ohne Enden sieht aus wie eine Wolke. Der Zufallskeim liegt fest, das Knaeuel ist bei jedem Export dasselbe. Die Zeichenflaeche folgt hier der Zeichnung statt umgekehrt. Drei Formen nebeneinander duerfen in 896 Breite hoechstens rund 200 Radius haben, eine 730 hohe Box waere damit zu drei Vierteln leer gewesen. Sie ist jetzt 520 hoch und sitzt mittig in der freien Hoehe unter dem Text. "Die Leute, die es kennen" ist raus, aus Bild und Text. Ohne die lange Zeile durfte die Schrift groesser werden. Co-Authored-By: Claude Opus 5 (1M context) --- post2.html | 170 ++++++++++++++++++++++------------------------- state/post2.json | 4 +- 2 files changed, 81 insertions(+), 93 deletions(-) diff --git a/post2.html b/post2.html index 2afc0b2..95e0b95 100644 --- a/post2.html +++ b/post2.html @@ -1146,8 +1146,8 @@ layouts: [{ id: "standard", label: "Standard" }], eyebrow: "Wechseln", head: 'Und wechseln?
Kannst du vergessen.', - body: "Da hängen Jahre an Stammdaten, Aufträgen und Buchhaltung drin. Und die Leute, die es kennen.", - vis: "ersetzen", visW: 896, visLeft: 92, visBottom: 120, + body: "Da hängen Jahre an Stammdaten, Aufträgen und Buchhaltung drin. Ein Wechsel führt ins Chaos.", + vis: "ersetzen", visW: 896, visLeft: 92, visBottom: 190, }, { key: "mehr", type: "feature", @@ -1916,101 +1916,91 @@ } /* ─── Slide 3: wechseln kannst du vergessen ────────────────────────────── - Der Fliesstext hat zwei Haelften, und beide brauchen ein Bild: "Jahre an - Daten und Wissen haengen drin" wird zu Wurzeln im Boden, "am Ende - dasselbe, nur woanders" zu demselben Kasten noch einmal, nur gestrichelt. - Dazwischen eine gerissene Leine. + Eine Leserichtung statt einer Anordnung: Wechsel-Symbol, Pfeil, Chaos. + Was drinhaengt, steht im Symbol; wohin es fuehrt, steht rechts. - Das Kreuz der alten Fassung lag auf dem Pfeil und nicht auf dem Ziel, aus - gutem Grund: nicht das neue System scheitert, sondern der Wechsel. Das - bleibt so. Aus dem Kreuz ist eine gerissene Leine geworden und aus dem - leeren Ziel ein gleiches, denn leer war die falsche Aussage. */ - function wurzeln(x, w, oben, tief) { - let raus = ""; - const n = 8; - for (let i = 0; i < n; i++) { - const t = (i + 0.5) / n; - const sx = x + w * (0.07 + 0.86 * t); - const laenge = tief * (0.5 + rnd() * 0.5); - const drift = (t - 0.5) * 165 + zit(26); - raus += zug(glatt([[sx, oben], - [sx + drift * 0.18 + zit(9), oben + laenge * 0.3], - [sx + drift * 0.62 + zit(11), oben + laenge * 0.66], - [sx + drift, oben + laenge]], false), - { w: 3.1 - Math.abs(t - 0.5) * 1.7 }); - const az = oben + laenge * 0.5, ax = sx + drift * 0.28; - const seite = t < 0.5 ? -1 : 1; - raus += zug(glatt([[ax, az], - [ax + seite * 20 + zit(7), az + laenge * 0.2], - [ax + seite * 33 + zit(9), az + laenge * 0.33]], false), { w: 1.8 }); - } - return raus; - } - - /* Erdreich: ungleich lange Schraegstriche. Die gleichmaessige Schraffur aus - schraff() sah nach technischer Zeichnung aus, nicht nach Boden. */ - function erdreich(x1, x2, y) { - let d = ""; - for (let x = x1; x < x2; x += 13 + rnd() * 6) { - const l = 11 + rnd() * 13; - d += strich(x, y + 2, x - l * 0.55, y + 2 + l, { j: .8, b: .8 }); - } - return d; - } + Vier Fassungen liegen dahinter. Ein verwurzelter Kasten mit gerissener + Leine und eine beladene Sackkarre erzaehlten je eine kleine Szene. Eine + dritte reihte Block, Pfeile und eine schraffierte Wand nebeneinander, und + die Wand las niemand als Wand. Die vierte war ein durchgestrichenes + Symbol, aber der Strich lief quer durch die Woerter. + Was jede von ihnen nicht hatte: eine Richtung. Drei Stationen von links + nach rechts liest man in einer Sekunde, drei Teile nebeneinander nicht. */ function visWechseln() { keim(20260815); - const W = 896, H = 730, GRAU = "#A9AFB7"; - const BY = 100, BH = 360, BW = 320, LX = 30, RX = 555; - const zeilen = ["Stammdaten", "Aufträge", "Buchhaltung", "Wissen im Kopf"]; - const mitte = BY + BH / 2; + /* Die Flaeche ist niedriger als bei den anderen Slides: drei Formen + nebeneinander duerfen in 896 Breite hoechstens rund 200 Radius haben, + und eine 730 hohe Box waere dann zu drei Vierteln leer. Sie sitzt + stattdessen mittig in der freien Hoehe unter dem Text. */ + const W = 896, H = 520, MY = 258; + const ZX = 200, RX = 190, RY = 200; + const zeilen = ["Stammdaten", "Aufträge", "Buchhaltung"]; - const inhalt = (x, farbe) => zeilen.map((z, i) => - '' + z + '').join(""); - const striche = x => zeilen.map((z, i) => - strich(x + 28, BY + 87 + i * 66, x + 48, BY + 87 + i * 66, { j: .8, b: .8 })).join(""); - - let raus = ""; - - // Der Bestand: schwerer Strich, doppelte Unterkante. - raus += zug(rechteck(LX, BY, BW, BH, { ue: 4.5 }), { w: 3.8 }); - raus += zug(strich(LX + 6, BY + BH + 6, LX + BW - 6, BY + BH + 6, { ue: 2 }), { w: 3 }); - raus += zug(striche(LX), { w: 2.6 }); - - /* Die Erdoberflaeche liegt dicht unter dem Kasten, nicht am unteren Rand. - Im ersten Wurf lag sie 120 px tiefer, dadurch endeten die Wurzeln in der - Luft und sahen aus wie Beine. Sie muessen die Linie kreuzen, sonst - stecken sie nicht drin. */ - const boden = BY + BH + 18; - raus += zug(strich(0, boden, 500, boden, { ue: 4 }), { w: 3 }); - raus += zug(erdreich(6, 494, boden), { w: 1.9, op: .45 }); - raus += wurzeln(LX, BW, BY + BH + 6, 142); - - /* Die Leine reisst, und der Akzent sitzt genau dort, wo die Aussage sitzt. - Entscheidend ist, dass beide Enden nach unten haengen und die Fasern in - dieselbe Richtung weiter ausfransen. Im ersten Wurf zeigten sie - aufeinander zu: das ergab zwei Pfeilspitzen, also die gegenteilige - Aussage. Eine gerissene Leine faellt, sie zielt nicht. */ - const endL = [418, mitte + 62], endR = [496, mitte + 48]; - raus += zug(glatt([[LX + BW, mitte - 8], [388, mitte + 2], [412, mitte + 28], - endL], false), { f: GELB, w: 4.4 }); - raus += zug(glatt([[RX, mitte - 8], [528, mitte + 0], [502, mitte + 22], - endR], false), { f: GELB, w: 4.4 }); - let fransen = ""; - [endL, endR].forEach(e => { - [-0.42, -0.05, 0.36].forEach(o => { - fransen += strich(e[0], e[1] - 4, - e[0] + Math.sin(o) * 26, e[1] + Math.cos(o) * 26, { j: .9, b: 1.1 }); + /* Das Wechsel-Symbol: zwei Boegen mit Luecken links und rechts. Ein + geschlossener Ring waere kein Symbol mehr, sondern eine Ellipse. */ + function bogen(a1, a2) { + const n = 18, p = []; + for (let i = 0; i <= n; i++) { + const a = (a1 + (a2 - a1) * i / n) * Math.PI / 180; + p.push([ZX + Math.cos(a) * RX + zit(1.8), MY + Math.sin(a) * RY + zit(1.8)]); + } + return p; + } + function mitSpitze(p, laenge) { + const e = p[p.length - 1], v = p[p.length - 2]; + const w = Math.atan2(e[1] - v[1], e[0] - v[0]); + let d = glatt(p, false); + [-0.44, 0.44].forEach(o => { + d += strich(e[0], e[1], e[0] - Math.cos(w + o) * laenge, + e[1] - Math.sin(w + o) * laenge, { j: .9, b: .9 }); }); - }); - raus += zug(fransen, { f: GELB, w: 2.8 }); + return d; + } - // Dasselbe noch einmal, nur woanders: gleiche Groesse, gleiche Zeilen. - raus += zug(rechteck(RX, BY, BW, BH, { ue: 3 }), { w: 3, op: .6, strichel: "14 13", f: GRAU }); - raus += zug(striche(RX), { w: 2.4, f: GRAU }); - raus += inhalt(LX, TINTE) + inhalt(RX, GRAU); + let raus = zug(mitSpitze(bogen(204, 336), 30) + + mitSpitze(bogen(24, 156), 30), { w: 7 }); + zeilen.forEach((t, i) => { + raus += '' + t + ''; + }); + + /* Der Pfeil dazwischen, gebaut wie die anderen im Beitrag: Umriss + gezeichnet, innen mit Schraegstrichen ausgemalt. */ + const px1 = 420, pkopf = 500, pspitze = 548; + const pHalb = x => x <= pkopf ? 19 : Math.max(2, 36 * (1 - (x - pkopf) / (pspitze - pkopf))); + raus += zug(kritzel(px1 + 4, pspitze - 6, MY, pHalb, 11), { w: 4.2, op: .92 }); + raus += zug(linienzug([[px1, MY - 19], [px1 + 40, MY - 21], [pkopf, MY - 19], + [pkopf, MY - 36], [pspitze, MY], [pkopf, MY + 36], + [pkopf, MY + 19], [px1 + 40, MY + 21], [px1, MY + 19], + [px1, MY - 19]]), { w: 3.4 }); + + /* Das Chaos: eine Bahn durch lauter zufaellige Punkte, weich gezogen. Sie + kreuzt sich dadurch staendig selbst. Zwei Durchgaenge, damit es dicht + wird, dazu ein paar lose Enden nach aussen -- ein Knaeuel ohne Enden + sieht aus wie eine Wolke. */ + function knaeuel(cx, cy, rx, ry, n) { + const p = []; + for (let i = 0; i < n; i++) { + const a = rnd() * 6.283, r = 0.18 + rnd() * 0.82; + p.push([cx + Math.cos(a) * rx * r, cy + Math.sin(a) * ry * r]); + } + return glatt(p, false); + } + const CX = 726, CRX = 162, CRY = 196; + raus += zug(knaeuel(CX, MY, CRX, CRY, 26), { w: 3.4 }); + raus += zug(knaeuel(CX, MY, CRX * 0.78, CRY * 0.78, 20), { w: 2.8, op: .85 }); + let enden = ""; + [[-0.7, 1], [0.4, 1], [2.3, 1], [3.6, 1], [4.9, 1]].forEach(v => { + const a = v[0]; + enden += glatt([[CX + Math.cos(a) * CRX * 0.9, MY + Math.sin(a) * CRY * 0.9], + [CX + Math.cos(a) * CRX * 1.12 + zit(10), + MY + Math.sin(a) * CRY * 1.12 + zit(10)], + [CX + Math.cos(a) * CRX * 1.3 + zit(14), + MY + Math.sin(a) * CRY * 1.3 + zit(14)]], false); + }); + raus += zug(enden, { w: 2.6, op: .8 }); return '' + raus + ''; diff --git a/state/post2.json b/state/post2.json index 70da03e..f4690ab 100644 --- a/state/post2.json +++ b/state/post2.json @@ -39,9 +39,7 @@ }, { "ref": "wechseln", - "werte": { - "body": "Da hängen Jahre an Stammdaten, Aufträgen und Buchhaltung drin und die Leute, die es kennen." - } + "werte": {} }, { "ref": "mehr",