jiaosdesign-pixel/popbook

O que popbook faz?

Uma página de um livro pop-up é um arquivo JSON (um "momento") construído a partir de um kit de peças de papel. O script scripts/build.mjs transforma um ou mais momentos em um único arquivo HTML. A foto é apenas referência: ela nunca entra no livro.

Leia primeiro: references/kit.md (cada peça, seus parâmetros, as chaves de paleta que ela lê, as regras de dobra plana), depois o exemplo em examples/ mais próximo da foto: uma costa ou um passeio (bay-trail), um jardim, uma casa ou uma cena festiva (filoli-halloween), um ponto turístico (golden-gate), uma loja ou um café (cafe).

Entradas

• Uma foto (olhe para ela), uma linha nas próprias palavras do remetente, ou ambos. Geralmente ambos.
• Local e data, nesta ordem de confiança: a linha deles, o EXIF da foto, o nome do arquivo. scripts/photo.py <foto> imprime a data, GPS, tamanho e um palpite de paleta (use suas cores de cena; ignore sua capa e listras, o bloco da casa mantém essas). Leia o local do nome do arquivo você mesmo se ele tiver um. Uma data de arquivo sem EXIF geralmente está errada (uma foto salva novamente carrega a data de salvamento): pergunte. Se o local for desconhecido, faça uma pergunta e continue trabalhando em todo o resto.
• Se eles já tiverem um livro (uma pasta de arquivos de momento), a nova página se junta a ele: construa todos os arquivos juntos.

O padrão

Os quatro exemplos são o padrão. Compare com o mais próximo antes de entregar qualquer coisa.

• 4 a 6 peças de história em 3 ou mais camadas, fundo, meio e frente. O motor rejeita mais de 6; menos de 4 parece vazio.
• Duas coisas para brincar além do dial do céu: uma que o leitor toca (um sino, uma gaivota, uma porta) e uma que ele arrasta (uma aba, uma alavanca, um controle deslizante, uma imagem giratória). check.mjs lista ambas e falha se alguma estiver vazia. A seção 1 do kit.md, "O que responde ao leitor", lista cada peça que aceita um toque ou um arrasto. Se nada na foto ou linha deles puder ser tocado, faça uma pergunta antes de adicionar algo ("Havia mais alguma coisa lá, como um pássaro, uma bandeira, um sino ou uma porta?"). Se a resposta for não, entregue a página abaixo do padrão e diga isso.
• Um loop vivo. Algo na cena se move sozinho durante o dia: trânsito, um ciclista, um barco, vapor, um pássaro, uma bandeira, folhas. Escolha o que viaja ou respira na foto ou na linha. Toques, arrastos e dicas de abertura não contam. check.mjs imprime alive: e falha quando está vazio.
• Kit primeiro. Construa tudo que puder com peças existentes: colinas, árvores e sebes como faixas de camada, lâmpadas, uma figura, um ciclista, pássaros. Uma nova peça de kit apenas para a única coisa que o remetente apontaria, e no máximo uma por página (veja "Uma nova peça").
• Apenas o que está na foto ou na linha. Sem adereços para decoração. Se a cena permanecer simples porque a foto é simples, diga isso em vez de inventar.
• A luz da casa e o livro, inalterados. new.mjs escreve o bloco da casa (forma do livro, capa, bordas da página, lâmpada, luz, câmera). O dia é uma luz suave de estúdio, a noite é luar com as lâmpadas acesas; hora do dia e clima vivem na paleta, no dial do céu e nas lâmpadas, nunca na luz.
• A figura é o remetente a menos que digam o contrário. Vista-os com base na foto (palette.figure: casaco, cachecol, pernas, cabelo, pele). Com apenas uma linha, mantenha as cores da figura do exemplo a menos que digam o que usaram, e diga na nota o que você assumiu. Sem cachecol na foto: defina scarf como a cor do casaco. Nunca adicione uma pessoa, um animal de estimação ou um companheiro que eles não mencionaram.

O ciclo

1. Leia a foto. python3 scripts/photo.py <foto> --swatches swatches.png, depois olhe você mesmo: o que está no fundo, meio, frente; a única coisa que eles apontariam; o que se move sozinho e o que poderia ser tocado; hora do dia; clima.
2. Breve cena (suas próprias anotações): encadernação (side, o panorama em V, para quase tudo); camadas do fundo para a frente e a peça do kit para cada uma; o toque e o arrasto; o loop vivo; o que carrega a noite (lâmpadas, janelas, a lua do dial, um farol); a paleta a partir do palpite de photo.py, elevada e aquecida um passo (o livro é papel, não uma impressão), podada para as chaves que as peças leem (seção 3 do kit.md).
3. Inicie a página. node scripts/new.mjs <id> --place "Local, Cidade" --date YYYY-MM-DD --dir <pasta do livro deles> --like <exemplo mais próximo>. O id é curto e em kebab-case (bay-trail, cafe). Preencha pieces e a paleta da cena. Dê a cada peça que o leitor pode tocar ou arrastar um label, duas ou três palavras simples ("Veleiro", "Porta do café"): o caminho do teclado e os leitores de tela o usam.
4. Dobra plana. Cada camada precisa ficar plana quando o livro fecha. Encadernação lateral: cada metade de uma camada no vinco x0 dobra ao longo da lombada, então x0 + height * 0.966 <= 0.75 (largura do livro 1.5, dobradiça 105 graus). As camadas no fundo têm menos espaço livre: em x0 0.46 uma metade pode ter 0.3 de altura, em x0 0.52 apenas 0.24. Um dial, um pássaro ou uma figura em uma camada conta em sua altura. Uma camada perto do leitor também dobra em direção à borda do leitor, então mantenha seu alcance curto: aproximadamente x0 - reach * 0.26 >= -0.75. O validador verifica ambos e nomeia a metade e até onde alcançou. Uma metade vfold-wrap sem nada ainda recebe uma tira de amarração, então declare seu reach pelo menos tieReach (0.12), não menos. O dial do céu é rebitado atrás de sua camada hospedeira: mantenha essa camada baixa onde o dial se senta (uma linha de árvores estate leva um dip), ou o dial se esconde.
5. Construa e verifique. node scripts/build.mjs <dir>/*.json --out <dir>/book.html --title "<título deles>" --author "<nome deles, se fornecido>", depois node scripts/check.mjs <dir>/book.html --page <id> (as capturas vão para <dir>/shots/<id>/). Ele imprime os erros do validador, as listas de interação e alive:, e salva capturas de telefone e desktop de dia e de noite mais card.png. Olhe as capturas, noite primeiro: brilho, lâmpadas e janelas só mostram seus erros à noite. Coloque a captura de dia do telefone ao lado do exemplo mais próximo (build.mjs examples/<aquele>.json e verifique): se a sua parecer mais vazia, não está pronto. Itere aqui, não depois de entregar.
   • Sem Playwright? O livro também se verifica: abra book.html em um navegador. Uma página com erros é pulada e os erros são impressos na página.
6. Legenda. A linha deles, polida de duas maneiras: primeira pessoa, uma frase, palavras simples, cerca de 10 palavras ou menos. A linha do local fica logo abaixo da legenda, então a legenda nunca repete o local: diga o que aconteceu ou como se sentiu, não onde. Torne as duas opções genuinamente diferentes (uma mais próxima das palavras deles, uma mais curta). Nunca adicione um fato, um sentimento ou uma pessoa que eles não lhe deram. Coloque a opção 1 em caption e ofereça a opção 2.
7. Entregue. Envie book.html (é o livro inteiro: eles podem abri-lo, enviá-lo por email ou hospedá-lo em qualquer lugar), card.png se você fez um, e uma nota curta:

   <Local> · <Mês D>
   Na cena: <uma linha, do fundo para a frente>
   Interaja: toque <o quê>, arraste <o quê>, gire o dial do sol
   Por conta própria: <o que se move sozinho>
   Legenda: 1. <opção 1>  2. <opção 2>
   

   Adicione uma linha apenas para algo que eles precisam saber (uma data estimada, uma foto simples, uma nova peça do kit).

A equipe

Se seu agente puder delegar trabalho a ajudantes (subagentes), uma página que precisa de uma nova peça do kit fica mais rápida dividida em quatro partes. Uma página apenas com kit é mais rápida sozinha: as trocas custam mais do que economizam. O Escoteiro e o Editor precisam apenas das palavras e da foto do remetente, então execute-os ao mesmo tempo; o Construtor espera pelo Escoteiro, o Revisor espera pelo Construtor.

• Escoteiro: etapas 1 e 2. Recebe a foto e a linha. Devolve o breve da cena, a paleta da cena como um fragmento JSON e a única pergunta para o remetente, se houver.
• Construtor: etapas 3 a 5, mais a nova peça se o breve precisar. Recebe o breve, a paleta e a foto. Executa a construção e a verificação e corrige o que elas mostram. Devolve o arquivo de momento, a saída de check.mjs e a pasta de capturas.
• Revisor: não constrói nada. Recebe as capturas, a foto ou a linha, e as capturas do exemplo mais próximo. Olha a noite primeiro, o telefone primeiro: o padrão (um toque, um arrasto e o loop vivo), dobra plana, nada cortado na borda da página ou escondido atrás de outra camada, e cada peça está na foto ou na linha. Devolve "pronto" ou uma lista numerada de correções, cada uma nomeando a peça. O Construtor corrige e reconstrói, e o Revisor olha novamente. Após três rodadas, entregue com o que ainda estiver aberto.
• Editor: etapa 6. Recebe a linha, o local e a data, nunca as capturas. Devolve as duas opções de legenda.

Você faz a etapa 7 sozinho. Coloque um ponto de revisão na nota apenas se ele permanecer aberto.

Uma nova peça

Quando o herói da foto é algo que o kit não pode fazer (um farol, um carrossel), adicione uma peça em book/kit/ seguindo a mais próxima existente: materiais de papel de book/engine/paper.js, toques e arrastos como shop-front (book/kit/cafe.js) e layer-rider (book/kit/panorama2.js) fazem, loops ociosos em tick(t, dt, loops) que rodam apenas enquanto loops for verdadeiro. Registre-a em book/kit/index.js com build, about e, para encadernação lateral, panorama: true e declare. O motor escreve a matriz de cada parte a cada quadro, então qualquer coisa que você colocar ou animar fica em um grupo dentro da parte, nunca na raiz da parte. Luz, escuro, movimento reduzido e toque vêm do motor; não os trate como casos especiais. Espere uma hora ou mais; uma página apenas com kit leva minutos.

O que o leitor recebe

Um único arquivo HTML de cerca de 1.8 MB: o livro aberto, a legenda e o local abaixo dela, um interruptor Dia/Noite (o dial no livro também o gira), e setas e abas de data quando há mais de uma página. Precisa de WebGL e um navegador recente; não faz requisições de rede. Arrasto, toque e teclado funcionam (Tab alcança cada peça interativa, Enter toca, setas arrastam).

Regras que não se dobram

• A foto nunca entra no livro ou na pasta que você devolve. Sem nomes, idades ou detalhes de alguém que o remetente não colocou na linha.
• Cada palavra na legenda e no local é deles ou confirmada por eles.
• Diga o que você não pôde verificar: os scripts nunca cobrem Safari, Firefox, um telefone real ou um leitor de tela.