DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drei Lichter statt einem: die Symbole bekommen Koerper

Browse Source 
Filipe: "die symbole und der text dadrin sollen groesser und noch
spezieller sein, und die symbole sollen auch 2-3 farben haben ... sollen
mehr leben haben, auch viel realistischere effekte."

NICHT DREI AUSGEDACHTE FARBEN, SONDERN DIE DREI EINES ECHTEN AUFBAUS

So wird jedes Produktfoto ausgeleuchtet, und aus demselben Grund sieht
es plastisch aus:

  1  FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
     reinweiss -- es traegt die Farbe der Lampe, und die ist kuehl.
  2  EIGENFARBE des Gegenstands: der Ton seiner Kachel.
  3  STREULICHT, warm, von unten. Licht, das vom Untergrund
     zurueckkommt, ist waermer als das Hauptlicht. Genau dieser warme
     Saum ist der Grund, warum ein Gegenstand im Bild STEHT statt zu
     schweben.

Dazu die aelteste Regel der Malerei: warmes Licht, KUEHLE Schatten. Die
Seitenwaende der Zeichen kippen jetzt ins Blaue statt nur dunkler zu
werden. Und ein RANDLICHT auf der Lichtseite -- der schmale Streifen,
in dem das Fuehrungslicht die Kante streift. Ein Gegenstand ohne diese
Kante sieht immer ein wenig flach aus, und man kann meist nicht sagen,
warum.

ZWEI FEHLER DABEI, BEIDE ERST BEI FUENFFACHER VERGROESSERUNG SICHTBAR

  * DAS WARME LICHT LAG UNTER DER FORM. Die Verlaeufe spannten ueber das
    ganze 24er-Raster (y 2 bis 22); die Sprechblase des Chats reicht
    aber nur von 5,5 bis 20,5. Der warme Stopp bei y 22 war damit
    ausserhalb -- von den drei Lichtern kam genau eines an.
    `objectBoundingBox` spannt den Verlauf jetzt ueber JEDES Teil
    einzeln: Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
    ebenfalls. So verhaelt sich ein echter Aufbau -- jedes Teil liegt im
    selben Licht, nicht im selben Ausschnitt.
  * DAS RANDLICHT WAR SCHMALER ALS DIE KONTUR DARUEBER und lag deshalb
    vollstaendig darunter: gebaut, gezeichnet, unsichtbar. Jetzt 2,7
    gegen 1,9 -- so schaut es oben links hervor.

GROESSER, WIE GEWUENSCHT

Plakette 58 -> 64 px (grosse Kachel 62 -> 70), Zeichen 29 -> 35 px
(gross 32 -> 39), Wasserzeichen 132 -> 156 px (gross 168 -> 196),
Name 1,06 -> 1,15 rem (gross 1,24 -> 1,38), Unterzeile 0,78 -> 0,845.
Auf dem Dashboard entsprechend.

UND DAS SCHILD WIRFT LICHT AUF SEINE KACHEL

Ein beleuchteter Gegenstand faerbt seine Umgebung. Ohne diesen Abfall
sieht selbst ein gut gebautes Schild aufgeklebt aus. Weit gestreut und
weit unter der Blendschwelle: Man soll ihn nicht sehen, man soll ihn
vermissen, wenn er fehlt.

Zehn Pruefungen gelaufen, alle gruen -- darunter Handy und Breiten,
weil groesserer Text der schnellste Weg zu einem Ueberlauf ist.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-07 16:01:27 +02:00
co-authored by Claude Opus 5
parent 5b6f9cef98
commit 9c7952b5a3
22 changed files with 297 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/bereiche.js
+69 -13
View File
@@ -575,10 +575,23 @@
function verlaufSicherstellen(ziel, endung) {
const defs = document.createElementNS(NS, 'defs');
const bauen = (id, stops, x2 = '0', y1 = '2', y2 = '22') => {
/* AN DER FORM AUSGERICHTET, NICHT AM RASTER (07.09.2026).
Die Verlaeufe spannten ueber das ganze 24er-Raster (y von 2 bis
22). Ein Zeichen fuellt das aber nie aus: Die Sprechblase des
Chats reicht von y 5,5 bis 20,5. Das warme Streulicht sass bei
y 22 -- also UNTER der Form, und war nie zu sehen. Bei hoher
Vergroesserung nachgemessen; von den drei Lichtern kam nur eines
an.
`objectBoundingBox` spannt den Verlauf ueber JEDES Teil einzeln:
Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
ebenfalls. Genau so verhaelt sich ein echter Aufbau -- jedes Teil
liegt im selben Licht, nicht im selben Ausschnitt. */
const bauen = (id, stops, x2 = '0', y1 = '0', y2 = '1', raum = 'objectBoundingBox') => {
const lg = document.createElementNS(NS, 'linearGradient');
lg.setAttribute('id', id + endung);
lg.setAttribute('gradientUnits', 'userSpaceOnUse');
lg.setAttribute('gradientUnits', raum);
lg.setAttribute('x1', '0'); lg.setAttribute('y1', y1);
lg.setAttribute('x2', x2); lg.setAttribute('y2', y2);
for (const [pos, farbe, deck] of stops) {
@@ -610,17 +623,45 @@
traegt die Eigenfarbe, unten kommt Streulicht in einer HELLEREN
Tonung statt in Weiss -- Licht, das vom Untergrund zurueckkommt,
nimmt die Farbe des Gegenstands mit, es bleicht ihn nicht aus. */
/* =====================================================================
DREI LICHTER, DREI FARBEN (07.09.2026)
Filipe: "die symbole sollen auch 2-3 farben haben ... sollen mehr
leben haben, auch viel realistischere effekte."
Nicht drei ausgedachte Farben, sondern die drei, die ein
Gegenstand in einem echten Aufbau bekommt -- so wird jedes
Produktfoto ausgeleuchtet, und aus demselben Grund sieht es
plastisch aus:
1 FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
reinweiss; es traegt die Farbe der Lampe, und die ist kuehl.
Hier ein Hauch Babyblau darin.
2 EIGENFARBE des Gegenstands -- der Ton seiner Kachel.
3 STREULICHT, warm, von unten. Licht, das vom Untergrund
zurueckkommt, ist waermer als das Hauptlicht. Genau dieser
warme Saum unten ist der Grund, warum ein Gegenstand im Bild
"steht" statt zu schweben.
Und die Schatten sind KUEHL: Warmes Licht, kuehle Schatten -- das
ist die aelteste Regel der Malerei und der schnellste Weg von
"Farbflaeche" zu "Koerper". Sie steckt unten in `zeichen-wand`. */
bauen('zeichen-deck', [
['0', '#ffffff', '0.88'],
['0.14', 'currentColor', '1'],
['0.62', 'currentColor', '0.96'],
['1', 'currentColor', '0.78'],
['0', '#eaf4ff', '0.95'],
['0.12', 'currentColor', '1'],
['0.55', 'currentColor', '0.97'],
['0.82', '#ff9c5a', '0.42'],
['1', '#ffb46a', '0.66'],
]);
/* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die
vom Licht abgewandt ist. */
/* Die Seitenwand -- kuehl und dunkel. Ein Schatten ist nicht
"dieselbe Farbe, nur dunkler": Ihm fehlt das warme Hauptlicht,
also kippt er ins Blaue. */
bauen('zeichen-wand', [
['0', 'currentColor', '0.5'],
['1', 'currentColor', '0.28'],
['0', 'currentColor', '0.52'],
['0.6', '#1b2b45', '0.62'],
['1', '#0d1626', '0.72'],
]);
/* Der Körper: oben satt, unten fast durchsichtig. */
@@ -652,11 +693,23 @@
sieht aus wie gemalt; mit ihm bekommt sie unten eine Kante, und
das Auge liest sie als Koerper im Raum. */
bauen('zeichen-linie', [
['0', '#ffffff', '0.98'],
['0.11', '#ffffff', '0.62'],
['0', '#f2f9ff', '0.99'],
['0.1', '#bfe0ff', '0.78'],
['0.3', 'currentColor', '1'],
['0.82', 'currentColor', '1'],
['1', 'currentColor', '0.62'],
['0.74', 'currentColor', '1'],
['1', '#ffc389', '0.85'],
]);
/* DAS RANDLICHT. Eine kuehle Kante auf der Lichtseite -- der
schmale Streifen, in dem das Fuehrungslicht die Kante des
Gegenstands streift. Er wird als zweite Lage der Kontur
gezeichnet, ein Drittel Rasterpunkt nach oben links versetzt.
Ein Gegenstand ohne diese Kante sieht immer ein wenig flach aus,
und man kann meist nicht sagen, warum. */
bauen('zeichen-rand', [
['0', '#dff0ff', '0.85'],
['0.5', '#9fd4ff', '0.45'],
['1', '#9fd4ff', '0'],
]);
/* Die Spiegelung, diagonal von links oben nach rechts unten. */
@@ -670,7 +723,7 @@
['0', '#ffffff', '0.72'],
['0.16', '#ffffff', '0.3'],
['0.3', '#ffffff', '0'],
], '18', '0', '20');
], '18', '0', '20', 'userSpaceOnUse');
ziel.append(defs);
}
@@ -751,17 +804,20 @@
Rille, auf der dunklen Plakette verschwindet er und die helle
Linie trägt. Ein Zeichen, zwei Untergründe, eine Lösung. */
['zeichen__saum', linien],
['zeichen__rand', linien], // die kuehle Lichtkante darunter
['zeichen__linie', linien],
];
const verlaufZu = {
zeichen__deck: ['fill', 'zeichen-deck'],
zeichen__glanz: ['fill', 'zeichen-glanz'],
zeichen__rand: ['stroke', 'zeichen-rand'],
zeichen__linie: ['stroke', 'zeichen-linie'],
};
for (const [klasse, pfade] of lagen) {
if (!pfade.length) continue;
const g = document.createElementNS(NS, 'g');
g.setAttribute('class', klasse);
if (klasse === 'zeichen__rand') g.setAttribute('transform', 'translate(-0.34 -0.34)');
if (verlaufZu[klasse]) verweis(g, verlaufZu[klasse][0], verlaufZu[klasse][1]);
for (const d of pfade) {
const pfad = document.createElementNS(NS, 'path');