toolctrl-labs/posts
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Post 2: Slide 3 wird eine Leserichtung

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-12 12:22:50 +02:00
1 parent 8590fa7e6e
commit 3781cc95d9
2 files changed
+81 -93
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

post2.html
+80 -90
View File
@@ -1146,8 +1146,8 @@
layouts: [{ id: "standard", label: "Standard" }],
eyebrow: "Wechseln",
head: 'Und wechseln?<br><span class="a">Kannst du vergessen.</span>',
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) =>
'<text x="' + (x + 60) + '" y="' + (BY + 96 + i * 66) + '" ' +
'font-family="Manrope, sans-serif" font-size="28" font-weight="600" ' +
'letter-spacing="-0.01em" fill="' + farbe + '">' + z + '</text>').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 += '<text x="' + ZX + '" y="' + (MY - 34 + i * 40) + '" text-anchor="middle" ' +
'font-family="Manrope, sans-serif" font-size="30" font-weight="700" ' +
'letter-spacing="-0.02em" fill="' + TINTE + '">' + t + '</text>';
});
/* 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 '<svg viewBox="0 0 ' + W + ' ' + H + '" width="' + W + '" height="' + H +
'" xmlns="http://www.w3.org/2000/svg">' + raus + '</svg>';
state/post2.json
+1 -3
View File
@@ -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",