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

Die Zeichen sind jetzt KOERPER, keine Zeichnungen mehr

Browse Source 
"wir kommen nicht voran, ich will das viel realistischer."

Berechtigt: Ich habe viermal dieselbe flache Zeichnung anders
BELEUCHTET -- Verlauf, Fuellung, Glanz, Schlagschatten. Das Verfahren
war das Problem, nicht die Einstellungen. Also gewechselt.

JEDES ZEICHEN HAT JETZT EINE HOEHE. Aufbau von hinten nach vorn:

  tiefe 3/2/1   dieselbe Silhouette, dreimal, je einen halben
                Rasterpunkt nach rechts unten versetzt und heller
                werdend. Das Auge liest die drei versetzten Kanten als
                EINE schraege Seitenwand -- genau so zeichnet man einen
                Quader von Hand. Drei Lagen sind gemessen: bei zwei
                sieht es aus wie ein Druckfehler, ab fuenf wie ein
                Schlagschatten.
  deck          die Oberseite: oben fast weiss, unten im Farbton. Die
                Flaeche, auf die das Licht faellt.
  glanz         die Spiegelung darauf.
  saum + linie  die Details.

Dafuer bekam jedes Zeichen eine SILHOUETTE (KOERPER in bereiche.js) --
den geschlossenen Umriss des Gegenstands, getrennt von den Details.
Die Details bekommen bewusst KEINE Tiefe: Ein aufgedruckter Strich
steht nicht hervor.

DER SAUM ist die Loesung eines Problems, das erst durch die Tiefe
entstand: Dieselbe Linie liegt ueber ZWEI Untergruenden. Der Querstrich
im Kalender liegt auf der hellen Deckflaeche, die Wellen der
LIVE-Analyse frei auf der dunklen Plakette. Eine dunkle Linie
verschwindet dort, eine helle auf dem Deck -- was immer man waehlt, die
Haelfte ist weg. Dunkler Saum plus helle Linie loest beides: auf dem
Deck liest man eine eingravierte Rille, auf der Plakette traegt die
helle Linie. Ein Zeichen, zwei Untergruende, eine Loesung.

GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten), Startansicht
133, Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14. Alle gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-03 02:43:45 +02:00
co-authored by Claude Opus 5
parent 44716fa54b
commit 788a5fbd81
30 changed files with 328 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/bereiche.js
+147 -11
View File
@@ -40,6 +40,88 @@
Eigene Pfade statt einer Fremdbibliothek: siebzehn Zeichen sind
kleiner als jede Schriftart und kosten keine Lieferkette. */
/* ---------- Die Silhouetten -------------------------------------------
Der UMRISS jedes Gegenstands als geschlossene Form. Aus ihm entsteht
die Tiefe: Er wird dreimal übereinander gezeichnet, jedes Mal ein
Stück versetzt und dunkler -- unten die Grundfläche, darüber die
Seitenwand, oben die Deckfläche. Das ist dasselbe Verfahren, mit dem
man einen Körper von Hand zeichnet, und es ist der Grund, warum die
Zeichen jetzt eine Höhe haben statt nur einen Umriss.
Getrennt von den Linien gehalten: Die Linien sind die DETAILS auf der
Oberfläche (Querstriche, Haken, Wellen). Sie bekommen keine Tiefe --
ein aufgedruckter Strich steht nicht hervor. */
const KOERPER = {
dashboard: [
'M4 4.5h6.4v6.4H4z',
'M13.6 4.5h6.4v4.2h-6.4z',
'M13.6 11.6h6.4v7.9h-6.4z',
'M4 13.7h6.4v5.8H4z'
],
aufgaben: [
'M4.5 5h4v14h-4z',
'M10 5h4v9h-4z',
'M15.5 5h4v11.5h-4z'
],
kalender: [
'M3.5 7h17v12.5h-17z'
],
calls: [
'M3.5 7h11v10h-11z',
'M14.5 11l6-3.5v9l-6-3.5z'
],
dateien: [
'M3.5 6.5h5.5l2 2h9.5v11h-17z'
],
steckbrief: [
'M3.5 5.5h17v13h-17z'
],
profil: [
'M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3z'
],
startcheck: [
'M6 4.5h12v15H6z'
],
live: [
'M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'
],
content: [
'M3.5 6h17v13h-17z'
],
technik: [
'M9 5.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
'M15 10.4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z',
'M7.5 14.9a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'
],
community: [
'M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5z'
],
schutz: [
'M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z'
],
reports: [
'M6.6 9.5h1.8v7h-1.8z',
'M11.1 5.5h1.8v11h-1.8z',
'M15.6 11.5h1.8v5h-1.8z'
],
personen: [
'M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'
],
scouting: [
'M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'
],
wissen: [
'M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'
],
automation: [
'M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'
]
};
const ZEICHEN = {
dashboard: {
/* Zwei der vier Felder gefüllt, über Eck -- das gibt dem Zeichen
@@ -381,6 +463,20 @@
defs.append(lg);
};
/* Die Deckfläche: oben fast weiss, unten im Farbton. Das ist die
Seite, auf die das Licht fällt. */
bauen('zeichen-deck', [
['0', '#ffffff', '0.92'],
['0.4', 'currentColor', '0.95'],
['1', 'currentColor', '0.72'],
]);
/* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die
vom Licht abgewandt ist. */
bauen('zeichen-wand', [
['0', 'currentColor', '0.5'],
['1', 'currentColor', '0.28'],
]);
/* Der Körper: oben satt, unten fast durchsichtig. */
bauen('zeichen-flaeche', [
['0', 'currentColor', '0.68'],
@@ -438,20 +534,60 @@
die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge,
die noch ein reines Feld sind) bekommt einfach keine. */
const eintrag = ZEICHEN[name] || {};
/* Drei Lagen, von hinten nach vorn: Körper, Spiegelung auf dem
Körper, dann die Kontur. Die Spiegelung benutzt dieselben Pfade
wie der Körper -- sie liegt also GENAU auf ihm und nicht daneben. */
const teile = Array.isArray(eintrag)
? [['zeichen__linie', eintrag]]
: [['zeichen__fuellung', eintrag.fuellung || []],
['zeichen__eigenschatten', eintrag.fuellung || []],
['zeichen__glanz', eintrag.fuellung || []],
['zeichen__linie', eintrag.linien || []]];
const umriss = KOERPER[name] || eintrag.fuellung || [];
const linien = Array.isArray(eintrag) ? eintrag : (eintrag.linien || []);
for (const [lage, pfade] of teile) {
/* ---- Die Tiefe ----------------------------------------------------
Dieselbe Silhouette, dreimal, jedes Mal um einen halben
Rasterpunkt nach rechts unten versetzt. Von hinten nach vorn wird
sie heller. Das Auge liest die drei versetzten Kanten als EINE
schräge Seitenwand -- genau so, wie man einen Quader zeichnet.
Drei Lagen sind gemessen: bei zwei wirkt es wie ein
Druckfehler, ab fünf wie ein Schlagschatten. */
const tiefen = [
['zeichen__tiefe3', 'translate(1.5 1.5)'],
['zeichen__tiefe2', 'translate(1 1)'],
['zeichen__tiefe1', 'translate(0.5 0.5)'],
];
for (const [klasse, versatz] of tiefen) {
if (!umriss.length) break;
const g = document.createElementNS(NS, 'g');
g.setAttribute('class', klasse);
g.setAttribute('transform', versatz);
for (const d of umriss) {
const pfad = document.createElementNS(NS, 'path');
pfad.setAttribute('d', d);
g.append(pfad);
}
svg.append(g);
}
/* ---- Die Deckfläche und was darauf liegt --------------------------- */
const lagen = [
['zeichen__deck', umriss], // die Oberseite, hell
['zeichen__glanz', umriss], // die Spiegelung darauf
/* Die Details ZWEIMAL: erst ein dunkler Saum, dann die helle
Linie darauf.
Der Grund ist, dass dieselbe Linie über ZWEI Untergründen
liegt. Ein Querstrich im Kalender liegt auf der hellen
Deckfläche, die Wellen der LIVE-Analyse dagegen frei auf der
dunklen Plakette. Eine dunkle Linie verschwindet dort, eine
helle auf dem Deck -- was immer man wählt, die Hälfte ist weg.
Dunkler Saum plus helle Linie löst beides auf einmal: Auf dem
hellen Deck sieht man den Saum und liest eine eingravierte
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__linie', linien],
];
for (const [klasse, pfade] of lagen) {
if (!pfade.length) continue;
const g = document.createElementNS(NS, 'g');
g.setAttribute('class', lage);
g.setAttribute('class', klasse);
for (const d of pfade) {
const pfad = document.createElementNS(NS, 'path');
pfad.setAttribute('d', d);