Buehne aus den echten Marken-Bildern, Kopfleiste und Begruessung neu
Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei in die Ecken geklebte Bilder ergeben noch kein Bild. DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack, sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in der Mitte waeren sie hinter dem Text gelandet. Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 % staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort, wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg ist, klingt verkehrt und ist genau richtig. Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene -- ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. 1,9 MB PNG -> 28 KB WebP. DIE VIER STELLEN aus den Bildschirmfotos: * Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet (Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede Farbe neu bauen. 114 KB -> 3 KB. * "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede Seitendatei setzte diese Zeile bisher selbst zusammen. * Begruessung: leuchtender Strich, groesserer Gruss, auslaufende Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" -- so gehoert sichtbar zusammen, was zusammengehoert. ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben: 1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht. Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus (Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten. 2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche nach der Ursache ging zuerst in die Irre -- der Test nannte das Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument. Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git, danach zeilengenau ersetzt. 118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+129
-55
@@ -1,25 +1,32 @@
|
||||
/* ===================================================================
|
||||
Baut die beiden Hintergrundbilder für den Workspace.
|
||||
Baut den Hintergrund des Workspace aus den Marken-Bildern.
|
||||
|
||||
Filipe: "der hintergrund soll genau so krass und speziell sein,
|
||||
benutz den hasen und husky."
|
||||
ZWEITER ANLAUF (01.09.2026). Der erste war schlecht, und Filipe hatte
|
||||
recht: Ich hatte einen fremden Neon-Husky aus dem alten Bilderordner
|
||||
genommen -- nicht DogFather. Ausserdem klebten zwei Bilder in den
|
||||
Ecken, ohne dass daraus ein Bild geworden waere.
|
||||
|
||||
Warum die Bilder AUFBEREITET werden, statt sie einfach einzubinden:
|
||||
Jetzt richtig, aus den echten Marken-Bildern:
|
||||
|
||||
1. Ein Foto hinter einem Arbeitswerkzeug macht Text unlesbar. Die
|
||||
Bilder werden deshalb stark abgedunkelt und leicht entsättigt --
|
||||
sie sollen eine Stimmung sein, kein Motiv.
|
||||
1. Eine BUEHNE ueber die ganze Flaeche: das Studio, in dem HasiDog
|
||||
und DogFather stehen. Warum genau dieses von den fuenf: Die beiden
|
||||
stehen weit aussen, die MITTE ist dunkel -- und dort steht der
|
||||
Inhalt. Ein Bild mit Figuren in der Mitte waere hinter dem Text
|
||||
gelandet.
|
||||
|
||||
2. Sie bekommen einen weichen Rand. Ein hartes Rechteck sieht nach
|
||||
aufgeklebtem Bild aus; ein auslaufender Rand sieht nach Bühne aus.
|
||||
Der Verlauf wird HIER eingerechnet und nicht im Browser: Eine
|
||||
Maske über ein 900-Pixel-Bild kostet bei jedem Bildaufbau Rechenzeit.
|
||||
2. Die beiden Figuren zusaetzlich freigestellt in den unteren Ecken,
|
||||
aus den Einzelbildern. Sie stehen VOR der Buehne und sind das,
|
||||
was man wiedererkennt.
|
||||
|
||||
3. Aus 290 KB PNG werden rund 40 KB WebP. Die Seite laedt auf jedem
|
||||
Aufruf schneller, und das Bild liegt im Zwischenspeicher.
|
||||
Behandlung in beiden Faellen:
|
||||
* stark abgedunkelt -- eine Buehne, kein Poster
|
||||
* Mitte zusaetzlich verdunkelt (Vignette), dort steht der Text
|
||||
* weiche Raender eingerechnet statt als Maske im Browser: eine
|
||||
Maske ueber ein grosses Bild kostet bei jedem Bildaufbau Zeit
|
||||
* WebP statt PNG -- aus 1,9 MB werden rund 60 KB
|
||||
|
||||
Gerechnet wird mit dem Browser, der ohnehin fuer die Pruefungen da ist
|
||||
-- kein zusaetzliches Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
|
||||
Gerechnet mit dem Browser, der ohnehin fuer die Pruefungen da ist.
|
||||
Kein Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
|
||||
|
||||
Aufrufen mit: node tools/buehne-bauen.mjs
|
||||
=================================================================== */
|
||||
@@ -29,41 +36,79 @@ import { join, dirname } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const WURZEL = join(dirname(fileURLToPath(import.meta.url)), "..");
|
||||
const QUELLE = join(WURZEL, "assets", "img");
|
||||
const QUELLE = join(WURZEL, "assets", "img", "marke");
|
||||
const ZIEL = join(WURZEL, "workspace", "assets", "img");
|
||||
if (!existsSync(ZIEL)) mkdirSync(ZIEL, { recursive: true });
|
||||
|
||||
const AUFTRAEGE = [
|
||||
{
|
||||
/* Casper, der Husky. Neonblau auf Dunkel -- er passt farblich genau
|
||||
zur Oberfläche, anders als die warmen Fotomontagen. Sitzt unten
|
||||
links und schaut nach rechts in die Seite hinein. */
|
||||
quelle: "hero-husky.png",
|
||||
ziel: "buehne-husky.webp",
|
||||
breite: 900, hoehe: 900,
|
||||
/* Die Buehne fuer breite Schirme. Studio, beide Figuren aussen,
|
||||
dunkle Mitte. */
|
||||
quelle: "studio.png",
|
||||
ziel: "buehne-breit.webp",
|
||||
breite: 1800, hoehe: 1013,
|
||||
ausschnitt: [0, 0, 1, 1],
|
||||
spiegeln: false,
|
||||
/* Weich ausblenden nach rechts und nach oben -- dorthin, wo der
|
||||
Inhalt steht. */
|
||||
verlauf: [
|
||||
{ art: "linear", von: [0.55, 0], nach: [1, 0], stopps: [[0, 0], [1, 1]] },
|
||||
{ art: "linear", von: [0, 0], nach: [0, 0.55], stopps: [[0, 1], [1, 0]] },
|
||||
],
|
||||
helligkeit: 0.62, saettigung: 1.0,
|
||||
helligkeit: 0.42, saettigung: 0.95, kontrast: 1.02,
|
||||
/* Die Vignette macht genau den Streifen dunkel, in dem der Inhalt
|
||||
steht -- ohne sie waere Text ueber dem Logo unlesbar. */
|
||||
vignette: { x: 0.5, y: 0.42, rx: 0.46, ry: 0.62, staerke: 0.72 },
|
||||
/* Oben ausblenden: dort sitzt die Kopfleiste. */
|
||||
verlauf: [{ von: [0, 0], nach: [0, 0.14], stopps: [[0, 0.55], [1, 0]] }],
|
||||
guete: 0.72,
|
||||
},
|
||||
{
|
||||
/* HasiDog. Das Ganzkoerperbild wird auf Kopf und Oberkoerper
|
||||
beschnitten -- die Fuesse traegt am unteren Bildrand niemand. */
|
||||
quelle: "char-hasidog.jpg",
|
||||
ziel: "buehne-hasi.webp",
|
||||
breite: 760, hoehe: 900,
|
||||
ausschnitt: [0.02, 0.02, 0.96, 0.78],
|
||||
spiegeln: true,
|
||||
/* Fuer schmale Schirme ein hochkant-Ausschnitt aus derselben Szene --
|
||||
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
|
||||
quelle: "studio.png",
|
||||
ziel: "buehne-schmal.webp",
|
||||
breite: 800, hoehe: 1400,
|
||||
ausschnitt: [0.17, 0, 0.66, 1],
|
||||
helligkeit: 0.34, saettigung: 0.9, kontrast: 1.02,
|
||||
vignette: { x: 0.5, y: 0.45, rx: 0.7, ry: 0.6, staerke: 0.78 },
|
||||
verlauf: [{ von: [0, 0], nach: [0, 0.12], stopps: [[0, 0.55], [1, 0]] }],
|
||||
guete: 0.68,
|
||||
},
|
||||
{
|
||||
/* DogFather selbst -- der RICHTIGE Husky, im blauen Hoodie. Steht
|
||||
unten rechts. */
|
||||
quelle: "dogfather-husky.png",
|
||||
ziel: "figur-dogfather.webp",
|
||||
breite: 620, hoehe: 1120,
|
||||
ausschnitt: [0.04, 0.06, 0.92, 0.92],
|
||||
helligkeit: 0.72, saettigung: 1.0, kontrast: 1.03,
|
||||
/* Nach unten und zur Seite offen lassen, oben und innen ausblenden --
|
||||
so waechst er aus der Ecke heraus, statt als Ausschnitt zu kleben. */
|
||||
verlauf: [
|
||||
{ art: "linear", von: [0.45, 0], nach: [0, 0], stopps: [[0, 0], [1, 1]] },
|
||||
{ art: "linear", von: [0, 0], nach: [0, 0.5], stopps: [[0, 1], [1, 0]] },
|
||||
{ von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] },
|
||||
{ von: [0.55, 0], nach: [0, 0], stopps: [[0, 0], [1, 0.9]] },
|
||||
],
|
||||
helligkeit: 0.5, saettigung: 0.9,
|
||||
guete: 0.78,
|
||||
},
|
||||
{
|
||||
/* HasiDog. Unten links. */
|
||||
quelle: "hasidog-hase.png",
|
||||
ziel: "figur-hasidog.webp",
|
||||
breite: 560, hoehe: 1120,
|
||||
ausschnitt: [0.05, 0.05, 0.9, 0.93],
|
||||
helligkeit: 0.66, saettigung: 0.95, kontrast: 1.03,
|
||||
verlauf: [
|
||||
{ von: [0, 0], nach: [0, 0.3], stopps: [[0, 1], [1, 0]] },
|
||||
{ von: [0.45, 0], nach: [1, 0], stopps: [[0, 0], [1, 0.9]] },
|
||||
],
|
||||
guete: 0.78,
|
||||
},
|
||||
{
|
||||
/* Der Kopf aus dem DogFather-Logo -- als MASKE, nicht als Bild.
|
||||
Die Vorlage liegt schwarz auf weiss; hier wird die Dunkelheit zur
|
||||
Deckkraft. Ergebnis: eine Form, die sich im Stil beliebig
|
||||
einfaerben laesst (mask-image + background). Ein fertig
|
||||
eingefaerbtes Bild muesste man fuer jede Farbe neu bauen. */
|
||||
quelle: "logo.png",
|
||||
ziel: "marke-husky.webp",
|
||||
breite: 96, hoehe: 96,
|
||||
ausschnitt: [0.14, 0.03, 0.72, 0.68],
|
||||
alsMaske: true,
|
||||
guete: 0.9,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -75,8 +120,7 @@ await seite.setContent("<html><body></body></html>");
|
||||
|
||||
for (const a of AUFTRAEGE) {
|
||||
const roh = readFileSync(join(QUELLE, a.quelle));
|
||||
const art = a.quelle.endsWith(".png") ? "image/png" : "image/jpeg";
|
||||
const daten = `data:${art};base64,${roh.toString("base64")}`;
|
||||
const daten = `data:image/png;base64,${roh.toString("base64")}`;
|
||||
|
||||
const webp = await seite.evaluate(async ({ daten, a }) => {
|
||||
const bild = new Image();
|
||||
@@ -88,38 +132,68 @@ for (const a of AUFTRAEGE) {
|
||||
const g = c.getContext("2d");
|
||||
|
||||
const [ax, ay, aw, ah] = a.ausschnitt;
|
||||
g.filter = `brightness(${a.helligkeit}) saturate(${a.saettigung}) contrast(1.04)`;
|
||||
if (a.spiegeln) { g.translate(a.breite, 0); g.scale(-1, 1); }
|
||||
|
||||
/* Als Maske: schwarz auf weiss wird zu Form auf durchsichtig. Fuer
|
||||
jeden Bildpunkt wird die Helligkeit zur Durchsichtigkeit -- weiss
|
||||
verschwindet, schwarz bleibt stehen. */
|
||||
if (a.alsMaske) {
|
||||
g.drawImage(bild,
|
||||
bild.naturalWidth * ax, bild.naturalHeight * ay,
|
||||
bild.naturalWidth * aw, bild.naturalHeight * ah,
|
||||
0, 0, a.breite, a.hoehe);
|
||||
const d2 = g.getImageData(0, 0, a.breite, a.hoehe);
|
||||
for (let i = 0; i < d2.data.length; i += 4) {
|
||||
const hell = (d2.data[i] * 0.299 + d2.data[i + 1] * 0.587 + d2.data[i + 2] * 0.114) / 255;
|
||||
d2.data[i] = d2.data[i + 1] = d2.data[i + 2] = 255;
|
||||
d2.data[i + 3] = Math.round((1 - hell) * 255);
|
||||
}
|
||||
g.putImageData(d2, 0, 0);
|
||||
return c.toDataURL("image/webp", a.guete);
|
||||
}
|
||||
|
||||
g.filter = `brightness(${a.helligkeit}) saturate(${a.saettigung}) contrast(${a.kontrast})`;
|
||||
g.drawImage(bild,
|
||||
bild.naturalWidth * ax, bild.naturalHeight * ay,
|
||||
bild.naturalWidth * aw, bild.naturalHeight * ah,
|
||||
0, 0, a.breite, a.hoehe);
|
||||
g.setTransform(1, 0, 0, 1, 0, 0);
|
||||
g.filter = "none";
|
||||
|
||||
/* Die weichen Raender. destination-out radiert dort, wo der Verlauf
|
||||
deckend ist -- so bleibt das Bild in der Ecke stehen und loest
|
||||
sich zur Seite hin auf. */
|
||||
/* Vignette: dunkler Fleck in der Mitte. Er wird DRAUFGEMALT (nicht
|
||||
ausradiert), damit dort, wo der Text steht, wirklich Ruhe ist. */
|
||||
if (a.vignette) {
|
||||
const v = a.vignette;
|
||||
g.save();
|
||||
g.translate(v.x * a.breite, v.y * a.hoehe);
|
||||
g.scale(v.rx * a.breite, v.ry * a.hoehe);
|
||||
const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
|
||||
gr.addColorStop(0, `rgba(5,7,13,${v.staerke})`);
|
||||
gr.addColorStop(0.62, `rgba(5,7,13,${v.staerke * 0.72})`);
|
||||
gr.addColorStop(1, "rgba(5,7,13,0)");
|
||||
g.fillStyle = gr;
|
||||
g.fillRect(-1.6, -1.6, 3.2, 3.2);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
/* Weiche Raender: destination-out radiert dort, wo der Verlauf
|
||||
deckend ist. */
|
||||
g.globalCompositeOperation = "destination-out";
|
||||
for (const v of a.verlauf) {
|
||||
for (const v of (a.verlauf || [])) {
|
||||
const gr = g.createLinearGradient(
|
||||
v.von[0] * a.breite, v.von[1] * a.hoehe,
|
||||
v.nach[0] * a.breite, v.nach[1] * a.hoehe);
|
||||
for (const [pos, deckung] of v.stopps) {
|
||||
gr.addColorStop(pos, `rgba(0,0,0,${deckung})`);
|
||||
}
|
||||
for (const [pos, deckung] of v.stopps) gr.addColorStop(pos, `rgba(0,0,0,${deckung})`);
|
||||
g.fillStyle = gr;
|
||||
g.fillRect(0, 0, a.breite, a.hoehe);
|
||||
}
|
||||
g.globalCompositeOperation = "source-over";
|
||||
|
||||
return c.toDataURL("image/webp", 0.74);
|
||||
return c.toDataURL("image/webp", a.guete);
|
||||
}, { daten, a });
|
||||
|
||||
const puffer = Buffer.from(webp.split(",")[1], "base64");
|
||||
writeFileSync(join(ZIEL, a.ziel), puffer);
|
||||
console.log(`${a.ziel.padEnd(20)} ${String(Math.round(roh.length / 1024)).padStart(4)} KB`
|
||||
+ ` -> ${String(Math.round(puffer.length / 1024)).padStart(3)} KB`);
|
||||
console.log(`${a.ziel.padEnd(24)} ${String(Math.round(roh.length / 1024)).padStart(5)} KB`
|
||||
+ ` -> ${String(Math.round(puffer.length / 1024)).padStart(4)} KB`);
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
|
||||
Reference in New Issue
Block a user