jiaosdesign-pixel/popbook

Que fait popbook ?

Une page d'un livre pop-up est un fichier JSON (un « moment ») construit à partir d'un kit de pièces en papier. scripts/build.mjs transforme un ou plusieurs moments en un seul fichier HTML. La photo n'est qu'une référence : elle n'est jamais intégrée dans le livre.

Lisez d'abord : references/kit.md (chaque pièce, ses paramètres, les clés de palette qu'elle lit, les règles de pliage à plat), puis l'exemple dans examples/ le plus proche du sujet de la photo : un rivage ou une promenade (bay-trail), un jardin, une maison ou une scène festive (filoli-halloween), un monument (golden-gate), un magasin ou un café (cafe).

Entrées

• Une photo (regardez-la), une phrase dans les mots de l'expéditeur, ou les deux. Généralement les deux.
• Lieu et date, dans cet ordre de confiance : leur phrase, l'EXIF de la photo, le nom du fichier. scripts/photo.py <photo> affiche la date, le GPS, la taille et une estimation de la palette (utilisez ses couleurs de scène ; ignorez sa couverture et ses rayures, le bloc maison garde celles-ci). Lisez vous-même le lieu dans le nom du fichier s'il en a un. Une date de fichier sans EXIF est souvent erronée (une photo réenregistrée porte la date d'enregistrement) : demandez. Si le lieu est inconnu, posez une question et continuez à travailler sur tout le reste.
• S'ils ont déjà un livre (un dossier de fichiers moment), la nouvelle page le rejoint : construisez tous les fichiers ensemble.

La barre

Les quatre exemples sont la référence. Mesurez-vous au plus proche avant de remettre quoi que ce soit.

• 4 à 6 pièces d'histoire dans 3 couches ou plus, arrière, milieu et avant. Le moteur en refuse plus de 6 ; moins de 4 donne l'impression de vide.
• Deux choses avec lesquelles jouer en plus du cadran du ciel : une que le lecteur tape (une cloche, une mouette, une porte) et une qu'il fait glisser (une tirette, un levier, un curseur, une image tournante). check.mjs liste les deux et échoue si l'un est vide. kit.md section 1, « Ce qui répond au lecteur », liste chaque pièce qui accepte un tapotement ou un glissement. Si rien dans leur photo ou leur phrase ne peut être tapoté, posez une question avant d'ajouter quoi que ce soit (« Y avait-il autre chose, comme un oiseau, un drapeau, une cloche ou une porte ? »). Si la réponse est non, remettez la page en dessous de la barre et dites-le.
• Une boucle vivante. Quelque chose dans la scène bouge tout seul de jour : circulation, cavalier, bateau, vapeur, oiseau, drapeau, feuilles. Choisissez ce qui se déplace ou respire dans la photo ou la phrase. Les tapotements, glissements et les indices d'ouverture ne comptent pas. check.mjs affiche alive: et échoue quand c'est vide.
• Le kit d'abord. Construisez tout ce que vous pouvez avec les pièces existantes : collines, arbres et haies comme bandes de couches, lampes, une figure, un cavalier, des oiseaux. Une nouvelle pièce de kit uniquement pour la seule chose que l'expéditeur montrerait du doigt, et au plus une par page (voir « Une nouvelle pièce »).
• Seulement ce qui est dans la photo ou la phrase. Pas d'accessoires pour la décoration. Si la scène reste pauvre parce que la photo est simple, dites-le plutôt que d'inventer.
• La lumière et le livre de la maison, inchangés. new.mjs écrit le bloc maison (forme du livre, couverture, bords de page, lampe, lumière, caméra). Le jour est une lumière douce de studio, la nuit est un clair de lune avec les lampes allumées ; l'heure de la journée et la météo vivent dans la palette, le cadran du ciel et les lampes, jamais dans la lumière.
• La figure est l'expéditeur sauf s'il dit le contraire. Habillez-le d'après la photo (palette.figure : manteau, écharpe, jambes, cheveux, peau). Avec seulement une phrase, gardez les couleurs de la figure de l'exemple sauf s'il dit ce qu'il portait, et dites dans la note ce que vous avez supposé. Pas d'écharpe dans la photo : mettez scarf à la couleur du manteau. N'ajoutez jamais une personne, un animal ou un compagnon qu'il n'a pas mentionné.

La boucle

1. Lisez la photo. python3 scripts/photo.py <photo> --swatches swatches.png, puis regardez-la vous-même : qu'est-ce qui est à l'arrière, au milieu, à l'avant ; la seule chose qu'ils montreraient du doigt ; ce qui bouge tout seul et ce qui pourrait être touché ; heure de la journée ; météo.
2. Brief de scène (vos propres notes) : reliure (side, le panorama en V, pour presque tout) ; couches de l'arrière à l'avant et la pièce de kit pour chacune ; le tapotement et le glissement ; la boucle vivante ; ce qui porte la nuit (lampes, fenêtres, la lune du cadran, un phare) ; la palette d'après l'estimation de photo.py, rehaussée et réchauffée d'un cran (le livre est en papier, pas une impression), réduite aux clés que les pièces lisent (kit.md section 3).
3. Démarrez la page. node scripts/new.mjs <id> --place "Lieu, Ville" --date AAAA-MM-JJ --dir <dossier de leur livre> --like <exemple le plus proche>. L'id est court et en kebab-case (bay-trail, cafe). Remplissez pieces et la palette de la scène. Donnez à chaque pièce que le lecteur peut taper ou faire glisser un label, deux ou trois mots simples (« Voilier », « Porte du café ») : le chemin clavier et les lecteurs d'écran l'utilisent.
4. Pliage à plat. Chaque couche doit pouvoir s'aplatir quand le livre se ferme. Reliure latérale : chaque moitié d'une couche au pli x0 se plie le long de la gouttière, donc x0 + hauteur * 0.966 <= 0.75 (largeur du livre 1.5, charnière 105 degrés). Les couches à l'arrière ont le moins d'espace : à x0 0.46 une moitié peut faire 0.3 de haut, à x0 0.52 seulement 0.24. Un cadran, un oiseau ou une figure sur une couche compte dans sa hauteur. Une couche près du lecteur se plie aussi vers le bord du lecteur, donc gardez sa portée courte : environ x0 - portée * 0.26 >= -0.75. Le validateur vérifie les deux et nomme la moitié et jusqu'où elle a atteint. Une moitié vfold-wrap sans rien dessus a quand même une bande d'attache, donc déclarez sa portée au moins tieReach (0.12), pas moins. Le cadran du ciel est riveté derrière sa couche hôte : gardez cette couche basse là où le cadran se trouve (une ligne d'arbres estate prend une dip), sinon le cadran se cache.
5. Construisez et vérifiez. node scripts/build.mjs <dir>/*.json --out <dir>/book.html --title "<leur titre>" --author "<leur nom, s'ils en ont donné un>", puis node scripts/check.mjs <dir>/book.html --page <id> (les captures atterrissent dans <dir>/shots/<id>/). Cela imprime les erreurs du validateur, les listes de jeu et alive:, et sauvegarde des captures téléphone et bureau de jour et de nuit plus card.png. Regardez les captures, la nuit d'abord : la lueur, les lampes et les fenêtres ne montrent leurs défauts que la nuit. Mettez la capture téléphone de jour à côté de celle de l'exemple le plus proche (build.mjs examples/<that>.json et vérifiez-le) : si la vôtre a l'air plus vide, elle n'est pas terminée. Itérez ici, pas après l'avoir remise.
   • Pas de Playwright ? Le livre se vérifie aussi tout seul : ouvrez book.html dans un navigateur. Une page avec des erreurs est ignorée et les erreurs sont imprimées sur la page.
6. Légende. Leur phrase, polie de deux façons : première personne, une phrase, mots simples, environ 10 mots ou moins. La ligne de lieu se trouve juste sous la légende, donc la légende ne répète jamais le lieu : dites ce qui s'est passé ou comment cela s'est ressenti, pas où. Rendez les deux options vraiment différentes (l'une plus proche de leurs mots, l'autre plus courte). N'ajoutez jamais un fait, un sentiment ou une personne qu'ils ne vous ont pas donnés. Mettez l'option 1 dans caption et proposez l'option 2.
7. Remettez-le. Envoyez book.html (c'est le livre entier : ils peuvent l'ouvrir, l'envoyer par email, ou l'héberger n'importe où), card.png si vous en avez fait une, et une courte note :

   <Lieu> · <Lun D>
   Dans la scène : <une ligne, de l'arrière à l'avant>
   Jouer : tapez <quoi>, faites glisser <quoi>, tournez le cadran solaire
   Tout seul : <ce qui bouge tout seul>
   Légende : 1. <option 1>  2. <option 2>
   

   Ajoutez une seule ligne pour quelque chose qu'ils doivent savoir (une date estimée, une photo pauvre, une nouvelle pièce de kit).

L'équipe

Si votre agent peut confier du travail à des assistants (sous-agents), une page qui nécessite une nouvelle pièce de kit va plus vite divisée en quatre. Une page sans nouvelle pièce de kit est plus rapide faite seule : les transferts coûtent plus qu'ils ne rapportent. L'Éclaireur et l'Éditeur n'ont besoin que des mots et de la photo de l'expéditeur, donc lancez-les en même temps ; le Constructeur attend l'Éclaireur, le Relecteur attend le Constructeur.

• Éclaireur : étapes 1 et 2. Obtient la photo et la phrase. Rend le brief de scène, la palette de scène sous forme de fragment JSON, et la question pour l'expéditeur s'il y en a une.
• Constructeur : étapes 3 à 5, plus la nouvelle pièce si le brief en nécessite une. Obtient le brief, la palette et la photo. Exécute la construction et la vérification et corrige ce qu'elles montrent. Rend le fichier moment, la sortie de check.mjs et le dossier de captures.
• Relecteur : ne construit rien. Obtient les captures, la photo ou la phrase, et les captures de l'exemple le plus proche. Regarde la nuit d'abord, le téléphone d'abord : la barre (un tapotement, un glissement et la boucle vivante), le pliage à plat, rien de coupé au bord de la page ou caché derrière une autre couche, et chaque pièce est dans la photo ou la phrase. Rend « prêt » ou une liste numérotée de corrections, chacune nommant la pièce. Le Constructeur corrige et reconstruit, et le Relecteur regarde à nouveau. Après trois tours, remettez avec ce qui reste ouvert.
• Éditeur : étape 6. Obtient la phrase, le lieu et la date, jamais les captures. Rend les deux options de légende.

Vous faites l'étape 7 vous-même. Mettez un point de revue dans la note seulement si elle est restée ouverte.

Une nouvelle pièce

Quand le héros de la photo est quelque chose que le kit ne peut pas faire (un phare, un manège), ajoutez une pièce dans book/kit/ en suivant la plus proche existante : matériaux papier depuis book/engine/paper.js, tapotements et glissements comme shop-front (book/kit/cafe.js) et layer-rider (book/kit/panorama2.js) le font, boucles inactives dans tick(t, dt, loops) qui ne s'exécutent que quand loops est vrai. Enregistrez-la dans book/kit/index.js avec build, about et, pour la reliure latérale, panorama: true et declare. Le moteur écrit la matrice de chaque partie à chaque image, donc tout ce que vous placez ou animez se trouve dans un groupe à l'intérieur de la partie, jamais sur la racine de la partie. La lumière, l'obscurité, le mouvement réduit et le tactile viennent du moteur ; ne les traitez pas spécialement. Attendez-vous à une heure ou plus ; une page sans nouvelle pièce de kit prend des minutes.

Ce que le lecteur obtient

Un seul fichier HTML d'environ 1,8 Mo : le livre ouvert, la légende et le lieu en dessous, un commutateur Jour / Nuit (le cadran dans le livre le tourne aussi), et des flèches et des onglets de date quand il y a plus d'une page. Il nécessite WebGL et un navigateur récent ; il ne fait aucune requête réseau. Le glissement, le tapotement et le clavier fonctionnent tous (Tab atteint chaque pièce jouable, Entrée tape, les touches fléchées font glisser).

Règles qui ne plient pas

• La photo n'entre jamais dans le livre ou le dossier que vous remettez. Pas de noms, âges ou détails de quiconque que l'expéditeur n'a pas mis dans la phrase.
• Chaque mot de la légende et du lieu est le leur ou confirmé par eux.
• Dites ce que vous n'avez pas pu vérifier : les scripts ne couvrent jamais Safari, Firefox, un vrai téléphone ou un lecteur d'écran.