jiaosdesign-pixel/popbook

Was macht popbook?

Eine Seite eines Popup-Buchs ist eine JSON-Datei (ein „Moment“), die aus einem Baukasten von Papierteilen zusammengesetzt wird. scripts/build.mjs verwandelt einen oder mehrere Momente in eine HTML-Datei. Das Foto dient nur als Referenz: Es wird nie in das Buch aufgenommen.

Lies zuerst: references/kit.md (jedes Teil, seine Parameter, die Palettenschlüssel, die es liest, die Flachfaltregeln), dann das Beispiel in examples/, das dem Foto am nächsten kommt: ein Ufer oder eine Fahrt (bay-trail), ein Garten, ein Haus oder eine festliche Szene (filoli-halloween), ein Wahrzeichen (golden-gate), ein Geschäft oder ein Café (cafe).

Eingaben

• Ein Foto (anschauen), eine Zeile in den eigenen Worten des Absenders oder beides. Meistens beides.
• Ort und Datum, in dieser Vertrauensreihenfolge: die Zeile des Absenders, die EXIF-Daten des Fotos, der Dateiname. scripts/photo.py <photo> gibt das Datum, GPS, Größe und einen Palettenschätzwert aus (verwende seine Szenenfarben; ignoriere seine Abdeckung und Streifen, der Hausblock behält diese). Lies den Ort selbst aus dem Dateinamen, falls vorhanden. Ein Dateidatum ohne EXIF ist oft falsch (ein erneut gespeichertes Foto trägt das Speicherdatum): frage nach. Wenn der Ort unbekannt ist, stelle eine Frage und arbeite an allem anderen weiter.
• Wenn sie bereits ein Buch haben (einen Ordner mit Moment-Dateien), wird die neue Seite hinzugefügt: baue alle Dateien zusammen.

Die Messlatte

Die vier Beispiele sind der Standard. Miss dich am nächsten Beispiel, bevor du etwas übergibst.

• 4 bis 6 Erzählstücke in 3 oder mehr Ebenen, hinten, Mitte und vorne. Die Engine lehnt mehr als 6 ab; weniger als 4 wirkt leer.
• Zwei Dinge zum Spielen neben dem Himmelsrad: eines, das der Leser antippt (eine Glocke, eine Möwe, eine Tür), und eines, das er zieht (ein Zuglaschen, ein Hebel, ein Schieber, ein Drehbild). check.mjs listet beide auf und schlägt fehl, wenn eines leer ist. kit.md Abschnitt 1, „Was den Leser beantwortet“, listet jedes Teil auf, das einen Tipp- oder Zieh-Input akzeptiert. Wenn nichts in ihrem Foto oder ihrer Zeile antippbar ist, stelle eine Frage, bevor du etwas hinzufügst („Gab es dort noch etwas anderes, wie einen Vogel, eine Fahne, eine Glocke oder eine Tür?“). Wenn die Antwort nein ist, gib die Seite unter der Messlatte ab und sage es.
• Ein lebendiger Kreislauf. Etwas in der Szene bewegt sich von selbst bei Tag: Verkehr, ein Reiter, ein Boot, Dampf, ein Vogel, eine Fahne, Blätter. Wähle das, was im Foto oder in der Zeile reist oder atmet. Taps, Ziehen und die Öffnungshinweise zählen nicht. check.mjs gibt alive: aus und schlägt fehl, wenn es leer ist.
• Baukasten zuerst. Baue alles, was du kannst, aus vorhandenen Teilen: Hügel, Bäume und Hecken als Ebenenbänder, Lampen, eine Figur, einen Reiter, Vögel. Ein neues Bauteil nur für das eine Ding, auf das der Absender zeigen würde, und höchstens eines pro Seite (siehe „Ein neues Teil“).
• Nur das, was im Foto oder in der Zeile ist. Keine Requisiten zur Dekoration. Wenn die Szene dünn bleibt, weil das Foto einfach ist, sage es, anstatt zu erfinden.
• Das Hauslicht und das Buch, unverändert. new.mjs schreibt den Hausblock (Buchform, Cover, Seitenränder, Lampe, Licht, Kamera). Tag ist ein weiches Studiolicht, Nacht ist Mondlicht mit eingeschalteten Lampen; Tageszeit und Wetter leben in der Palette, dem Himmelsrad und den Lampen, niemals im Licht.
• Die Figur ist der Absender, sofern nicht anders angegeben. Kleide sie nach dem Foto (palette.figure: Mantel, Schal, Beine, Haare, Haut). Bei nur einer Zeile behalte die Beispielsfarben der Figur bei, es sei denn, sie sagen, was sie trugen, und sage in der Notiz, was du geschätzt hast. Kein Schal im Foto: setze scarf auf die Mantelfarbe. Füge niemals eine Person, ein Haustier oder einen Begleiter hinzu, den sie nicht erwähnt haben.

Der Ablauf

1. Lies das Foto. python3 scripts/photo.py <photo> --swatches swatches.png, dann schau es dir selbst an: was ist hinten, mitte, vorne; das eine Ding, auf das sie zeigen würden; was sich von selbst bewegt und was berührt werden könnte; Tageszeit; Wetter.
2. Szenenbeschreibung (deine eigenen Notizen): Bindung (side, die V-Falt-Panorama, für fast alles); Ebenen von hinten nach vorne und das Bauteil für jede; der Tap und der Drag; der lebendige Kreislauf; was die Nacht trägt (Lampen, Fenster, das Mondrad, ein Scheinwerfer); die Palette aus der Schätzung von photo.py, angehoben und um einen Schritt erwärmt (das Buch ist Papier, kein Druck), beschnitten auf die Schlüssel, die die Teile lesen (kit.md Abschnitt 3).
3. Starte die Seite. node scripts/new.mjs <id> --place "Ort, Stadt" --date YYYY-MM-DD --dir <ihr Buchordner> --like <nächstes Beispiel>. Die ID ist kurz und Kebab-Schreibweise (bay-trail, cafe). Fülle pieces und die Szenenpalette. Gib jedem Teil, das der Leser antippen oder ziehen kann, ein label, zwei oder drei einfache Wörter („Segelboot“, „Café-Tür“): Der Tastaturpfad und Screenreader verwenden es.
4. Flachfalten. Jede Ebene muss flach liegen, wenn das Buch geschlossen ist. Seitenbindung: Jede Hälfte einer Ebene bei Falz x0 faltet entlang des Buchrückens, also x0 + höhe * 0.966 <= 0.75 (Buchbreite 1.5, Scharnier 105 Grad). Die hinteren Ebenen haben den geringsten Spielraum: bei x0 0.46 darf eine Hälfte 0.3 stehen, bei x0 0.52 nur 0.24. Ein Rad, ein Vogel oder eine Figur auf einer Ebene zählt zu ihrer Höhe. Eine Ebene nahe dem Leser faltet auch zum Leserrand hin, also halte ihre Reichweite kurz: ungefähr x0 - reach * 0.26 >= -0.75. Der Prüfer überprüft beides und benennt die Hälfte und wie weit sie reichte. Eine vfold-wrap-Hälfte ohne Inhalt erhält trotzdem einen Bindestreifen, also deklariere ihre reach mindestens als tieReach (0.12), nicht weniger. Das Himmelsrad ist hinter seiner Trägerebene vernietet: halte diese Ebene niedrig, wo das Rad sitzt (eine estate-Baumlinie nimmt einen dip), oder das Rad versteckt sich.
5. Baue und prüfe. node scripts/build.mjs <dir>/*.json --out <dir>/book.html --title "<ihr Titel>" --author "<ihr Name, falls angegeben>", dann node scripts/check.mjs <dir>/book.html --page <id> (Aufnahmen landen in <dir>/shots/<id>/). Es gibt die Fehler des Prüfers, die Spiellisten und alive: aus und speichert Telefon- und Desktop-Aufnahmen bei Tag und bei Nacht sowie card.png. Schau dir die Aufnahmen an, zuerst die Nacht: Glühen, Lampen und Fenster zeigen ihre Fehler nur nachts. Lege die Telefon-Tag-Aufnahme neben das nächste Beispiel (build.mjs examples/<das>.json und überprüfe es): wenn deine leerer aussieht, ist sie nicht fertig. Iteriere hier, nicht nach der Übergabe.
   • Kein Playwright? Das Buch prüft sich auch selbst: öffne book.html in einem Browser. Eine Seite mit Fehlern wird übersprungen und die Fehler werden auf der Seite gedruckt.
6. Bildunterschrift. Ihre Zeile, auf zwei Arten poliert: erste Person, ein Satz, einfache Worte, etwa 10 Wörter oder weniger. Die Ortszeile sitzt direkt unter der Bildunterschrift, also wiederholt die Bildunterschrift niemals den Ort: sage, was passiert ist oder wie es sich anfühlte, nicht wo. Mache die beiden Optionen wirklich unterschiedlich (eine näher an ihren Worten, eine kürzer). Füge niemals eine Tatsache, ein Gefühl oder eine Person hinzu, die sie dir nicht gegeben haben. Setze Option 1 in caption und biete Option 2 an.
7. Übergabe. Sende book.html (es ist das ganze Buch: sie können es öffnen, per E-Mail versenden oder überall hosten), card.png falls erstellt, und eine kurze Notiz:

   <Ort> · <Mo D>
   In der Szene: <eine Zeile, hinten nach vorne>
   Spiel: tippe <was>, ziehe <was>, drehe das Sonnenrad
   Von selbst: <was sich von selbst bewegt>
   Bildunterschrift: 1. <Option 1>  2. <Option 2>
   

   Füge nur eine Zeile für etwas hinzu, das sie wissen müssen (ein geschätztes Datum, ein dünnes Foto, ein neues Bauteil).

Das Team

Wenn dein Agent Arbeit an Helfer (Sub-Agenten) abgeben kann, geht eine Seite, die ein neues Bauteil benötigt, schneller, wenn sie vierfach aufgeteilt wird. Eine Nur-Baukasten-Seite ist schneller allein erledigt: die Übergaben kosten mehr als sie einsparen. Der Scout und der Editor brauchen nur die Worte des Absenders und das Foto, also führe sie gleichzeitig aus; der Builder wartet auf den Scout, der Reviewer auf den Builder.

• Scout: Schritte 1 und 2. Erhält das Foto und die Zeile. Gibt die Szenenbeschreibung, die Szenenpalette als JSON-Fragment und die eine Frage an den Absender zurück, falls vorhanden.
• Builder: Schritte 3 bis 5, plus das neue Teil, falls die Beschreibung es erfordert. Erhält die Beschreibung, die Palette und das Foto. Führt Build und Check aus und behebt, was sie anzeigen. Gibt die Moment-Datei, die check.mjs-Ausgabe und den Aufnahmeordner zurück.
• Reviewer: Baut nichts. Erhält die Aufnahmen, das Foto oder die Zeile und die Aufnahmen des nächsten Beispiels. Betrachtet zuerst die Nacht, zuerst das Telefon: die Messlatte (ein Tap, ein Drag und der lebendige Kreislauf), flachfalten, nichts am Seitenrand abgeschnitten oder hinter einer anderen Ebene versteckt, und jedes Teil ist im Foto oder in der Zeile. Gibt „bereit“ oder eine nummerierte Liste von Korrekturen zurück, die jeweils das Teil benennen. Der Builder korrigiert und baut neu, und der Reviewer prüft erneut. Nach drei Runden mit dem abgeben, was noch offen ist.
• Editor: Schritt 6. Erhält die Zeile, den Ort und das Datum, niemals die Aufnahmen. Gibt die beiden Bildunterschriftsoptionen zurück.

Du machst Schritt 7 selbst. Setze einen Überprüfungspunkt in die Notiz nur, wenn er offen geblieben ist.

Ein neues Teil

Wenn der Held des Fotos etwas ist, das der Baukasten nicht machen kann (ein Leuchtturm, ein Karussell), füge ein Teil in book/kit/ hinzu, das dem nächsten vorhandenen folgt: Papiermaterialien aus book/engine/paper.js, Taps und Ziehen so wie shop-front (book/kit/cafe.js) und layer-rider (book/kit/panorama2.js), Leerlauf-Schleifen in tick(t, dt, loops), die nur laufen, während loops true ist. Registriere es in book/kit/index.js mit build, about und für Seitenbindung panorama: true und declare. Die Engine schreibt die Matrix jedes Teils jeden Frame, also sitzt alles, was du platzierst oder animierst, in einer Gruppe innerhalb des Teils, niemals auf dem Root des Teils. Light, Dark, Reduced Motion und Touch kommen von der Engine; behandele sie nicht als Sonderfälle. Erwarte eine Stunde oder mehr; eine Nur-Baukasten-Seite dauert Minuten.

Was der Leser bekommt

Eine HTML-Datei von etwa 1,8 MB: das offene Buch, die Bildunterschrift und der Ort darunter, ein Tag/Nacht-Schalter (das Rad im Buch schaltet es auch um) und Pfeile und Datumsregister, wenn es mehr als eine Seite gibt. Es benötigt WebGL und einen aktuellen Browser; es macht keine Netzwerkanfragen. Ziehen, Tippen und Tastatur funktionieren alle (Tab erreicht jedes spielbare Teil, Enter tippt, Pfeiltasten ziehen).

Regeln, die nicht gebeugt werden

• Das Foto kommt nie in das Buch oder den Ordner, den du zurückgibst. Keine Namen, Alter oder Details von Personen, die der Absender nicht in die Zeile gesetzt hat.
• Jedes Wort in der Bildunterschrift und dem Ort ist von ihnen oder von ihnen bestätigt.
• Sage, was du nicht überprüfen konntest: Die Scripts decken niemals Safari, Firefox, ein echtes Telefon oder einen Screenreader ab.