jiaosdesign-pixel/popbook

popbook은(는) 무엇을 하나요?

팝업북 한 페이지는 하나의 JSON 파일('moment')이며, 종이 조각 키트로 구성됩니다. scripts/build.mjs는 하나 이상의 모멘트를 하나의 HTML 파일로 변환합니다. 사진은 참조용일 뿐, 책에 포함되지 않습니다.

먼저 읽을 것: references/kit.md (모든 조각, 매개변수, 읽어들이는 팔레트 키, 평평하게 접히는 규칙), 그 다음 사진과 주제가 가장 가까운 examples/의 예제: 해변이나 길 (bay-trail), 정원, 집 또는 축제 장면 (filoli-halloween), 랜드마크 (golden-gate), 상점 또는 카페 (cafe).

입력

• 사진(살펴볼 것), 보낸 사람의 말 한 줄, 또는 둘 다. 보통 둘 다.
• 장소와 날짜. 신뢰도 순서: 보낸 사람의 말, 사진의 EXIF, 파일 이름. scripts/photo.py <photo>는 날짜, GPS, 크기 및 팔레트 추측값을 출력합니다(장면 색상을 사용하고 표지와 줄무늬는 무시하며, 하우스 블록은 그대로 유지). 파일 이름에 장소가 있으면 직접 읽으십시오. EXIF가 없는 파일 날짜는 종종 잘못됩니다(다시 저장된 사진은 저장 날짜를 가짐): 물어보십시오. 장소를 모르면 한 가지 질문을 하고 나머지 작업을 계속 진행하십시오.
• 이미 책(모멘트 파일 폴더)이 있는 경우, 새 페이지가 합류합니다: 모든 파일을 함께 빌드하십시오.

기준

네 가지 예제가 표준입니다. 인계하기 전에 가장 가까운 예제와 비교하여 측정하십시오.

• 4~6개의 이야기 조각이 3개 이상의 레이어(뒤, 중간, 앞)에 있어야 합니다. 엔진은 6개 초과를 거부하며, 4개 미만은 비어 보입니다.
• 하늘 다이얼 외에 가지고 놀 수 있는 두 가지가 있어야 합니다: 하나는 독자가 탭하는 것(종, 갈매기, 문)이고, 다른 하나는 드래그하는 것(당김 탭, 레버, 슬라이더, 회전 그림)입니다. check.mjs는 둘 다 나열하고 하나라도 비어 있으면 실패합니다. kit.md 섹션 1 '독자에게 응답하는 것'은 탭이나 드래그를 받는 모든 조각을 나열합니다. 사진이나 문장에 탭할 수 있는 것이 없으면, 추가하기 전에 한 가지 질문을 하십시오('거기에 새, 깃발, 종, 문 같은 다른 것이 있었나요?'). 대답이 '아니오'이면 기준 미만으로 페이지를 인계하고 그렇게 말하십시오.
• 하나의 살아있는 루프. 장면 속 무언가가 낮 동안 스스로 움직여야 합니다: 교통, 라이더, 보트, 증기, 새, 깃발, 나뭇잎. 사진이나 문장에서 이동하거나 숨쉬는 것을 선택하십시오. 탭, 드래그 및 시작 힌트는 포함되지 않습니다. check.mjs는 alive:를 출력하고 비어 있으면 실패합니다.
• 키트 우선. 기존 조각으로 만들 수 있는 모든 것을 만드십시오: 언덕, 나무 및 산울타리는 레이어 밴드로, 램프, 인물, 라이더, 새. 새 키트 조각은 보낸 사람이 가리킬 한 가지에만 사용하고, 페이지당 최대 하나만 사용하십시오('새 조각' 참조).
• 사진이나 문장에 있는 것만. 장식을 위한 소품은 없습니다. 사진이 단순해서 장면이 얇으면, 지어내지 말고 그렇게 말하십시오.
• 하우스 라이트와 책은 변경하지 않음. new.mjs는 하우스 블록(책 모양, 표지, 페이지 가장자리, 램프, 조명, 카메라)을 작성합니다. 낮은 부드러운 스튜디오 조명, 밤은 램프가 켜진 달빛입니다. 시간과 날씨는 팔레트, 하늘 다이얼 및 램프에 있으며, 조명에는 절대 없습니다.
• 인물은 보낸 사람입니다. 그들이 달리 말하지 않는 한. 사진에서 옷을 입히십시오(palette.figure: 코트, 스카프, 다리, 머리카락, 피부). 문장만 있는 경우, 그들이 무엇을 입었는지 말하지 않으면 예제의 인물 색상을 유지하고, 노트에 추측했다고 말하십시오. 사진에 스카프가 없으면 scarf를 코트 색상으로 설정하십시오. 그들이 언급하지 않은 사람, 애완동물 또는 동반자를 절대 추가하지 마십시오.

과정

1. 사진 읽기. python3 scripts/photo.py <photo> --swatches swatches.png, 그런 다음 직접 살펴보십시오: 뒤, 중간, 앞은 무엇인지; 그들이 가리킬 한 가지; 저절로 움직이는 것과 건드릴 수 있는 것; 시간; 날씨.
2. 장면 브리핑(자체 노트): 제본(side, 거의 모든 것에 대한 V-fold 파노라마); 뒤에서 앞으로의 레이어와 각각의 키트 조각; 탭과 드래그; 살아있는 루프; 밤을 나르는 것(램프, 창문, 다이얼의 달, 전조등); photo.py의 추측에서 가져온 팔레트로, 한 단계 올리고 따뜻하게 함(책은 종이, 인쇄물이 아님), 조각이 읽는 키로 정리됨(kit.md 섹션 3).
3. 페이지 시작. node scripts/new.mjs <id> --place "장소, 도시" --date YYYY-MM-DD --dir <그들의 책 폴더> --like <가장 가까운 예제>. id는 짧고 케밥-케이스입니다(bay-trail, cafe). pieces와 장면 팔레트를 채우십시오. 독자가 탭하거나 드래그할 수 있는 모든 조각에 label(두세 단어, '범선', '카페 문')을 지정하십시오: 키보드 경로와 스크린 리더가 사용합니다.
4. 평평하게 접기. 모든 레이어는 책이 닫힐 때 평평하게 놓여야 합니다. 측면 제본: 주름선 x0에서 각 레이어의 절반은 책등을 따라 접히므로, x0 + height * 0.966 <= 0.75(책 너비 1.5, 힌지 105도)를 만족해야 합니다. 뒤쪽 레이어는 가장 적은 여유 공간을 가집니다: x0 0.46에서 절반은 0.3까지 설 수 있고, x0 0.52에서는 0.24만 가능합니다. 레이어 위의 다이얼, 새 또는 인물도 높이에 포함됩니다. 독자에 가까운 레이어는 독자 쪽 가장자리로도 접히므로, 도달 범위를 짧게 유지하십시오: 대략 x0 - reach * 0.26 >= -0.75. 검증기는 둘 다 확인하고 절반과 도달한 거리를 명명합니다. 아무것도 없는 vfold-wrap 절반도 여전히 묶음 스트립을 가지므로, reach를 최소한 tieReach(0.12) 이상으로 선언하십시오. 하늘 다이얼은 호스트 레이어 뒤에 리벳으로 고정됩니다: 다이얼이 있는 곳에서 레이어를 낮게 유지하십시오(estate 나무 줄은 dip을 사용), 그렇지 않으면 다이얼이 숨겨집니다.
5. 빌드 및 확인. node scripts/build.mjs <dir>/*.json --out <dir>/book.html --title "<그들의 제목>" --author "<그들의 이름, 제공한 경우>", 그런 다음 node scripts/check.mjs <dir>/book.html --page <id> (스크린샷은 <dir>/shots/<id>/에 저장됩니다). 검증기의 오류, 재생 목록 및 alive:를 출력하고, 낮과 밤의 전화 및 데스크톱 스크린샷과 card.png를 저장합니다. 스크린샷을 먼저 밤부터 살펴보십시오: 글로우, 램프 및 창문은 밤에만 실수를 드러냅니다. 전화 낮 스크린샷을 가장 가까운 예제의 스크린샷과 나란히 놓으십시오(build.mjs examples/<그 예제>.json 및 확인): 당신의 것이 더 비어 보이면 완료되지 않은 것입니다. 인계 후가 아니라 여기서 반복하십시오.
   • Playwright가 없습니까? 책은 자체적으로 확인합니다: 브라우저에서 book.html을 여십시오. 오류가 있는 페이지는 건너뛰고 오류가 페이지에 인쇄됩니다.
6. 캡션. 그들의 문장을 두 가지 방식으로 다듬으십시오: 1인칭, 한 문장, 평이한 단어, 약 10단어 이하. 장소 줄은 캡션 바로 아래에 있으므로, 캡션은 장소를 반복하지 않습니다: 무슨 일이 있었는지 또는 어떻게 느꼈는지 말하고, 어디인지는 말하지 마십시오. 두 옵션을 진정으로 다르게 만드십시오(하나는 그들의 말에 더 가깝고, 다른 하나는 더 짧게). 그들이 제공하지 않은 사실, 느낌 또는 사람을 절대 추가하지 마십시오. 옵션 1을 caption에 넣고 옵션 2를 제공하십시오.
7. 인계. book.html(전체 책: 열고, 이메일로 보내거나, 어디든 호스팅 가능), card.png(만든 경우), 그리고 짧은 노트를 보내십시오:

   <장소> · <월 일>
   장면: <한 줄, 뒤에서 앞으로>
   플레이: 탭 <무엇>, 드래그 <무엇>, 태양 다이얼 돌리기
   자동: <저절로 움직이는 것>
   캡션: 1. <옵션 1>  2. <옵션 2>
   

   그들이 알아야 할 사항(추측한 날짜, 얇은 사진, 새 키트 조각)에 대해서만 한 줄을 추가하십시오.

팀

당신의 에이전트가 도우미(하위 에이전트)에게 작업을 넘길 수 있다면, 새 키트 조각이 필요한 페이지는 네 가지로 나누면 더 빠릅니다. 키트 전용 페이지는 혼자 하는 것이 더 빠릅니다: 인계 비용이 절약보다 더 많이 들기 때문입니다. 스카우트와 편집자는 보낸 사람의 말과 사진만 필요하므로 동시에 실행하십시오; 빌더는 스카우트를 기다리고, 리뷰어는 빌더를 기다립니다.

• 스카우트: 단계 1과 2. 사진과 문장을 받습니다. 장면 브리핑, 장면 팔레트(JSON 조각), 그리고 보낸 사람에게 할 질문이 있으면 하나를 반환합니다.
• 빌더: 단계 3~5, 브리핑에 필요하면 새 조각도 추가합니다. 브리핑, 팔레트 및 사진을 받습니다. 빌드 및 확인을 실행하고 보여주는 오류를 수정합니다. 모멘트 파일, check.mjs 출력 및 스크린샷 폴더를 반환합니다.
• 리뷰어: 아무것도 빌드하지 않습니다. 스크린샷, 사진 또는 문장, 그리고 가장 가까운 예제의 스크린샷을 받습니다. 밤부터, 전화부터 살펴봅니다: 기준(탭, 드래그 및 살아있는 루프), 평평하게 접힘, 페이지 가장자리에서 잘리지 않거나 다른 레이어 뒤에 숨겨지지 않음, 그리고 모든 조각이 사진이나 문장에 있음. '준비 완료' 또는 각 조각을 명명한 번호 수정 목록을 반환합니다. 빌더가 수정하고 다시 빌드하면 리뷰어가 다시 봅니다. 세 번의 라운드 후에는 여전히 열려 있는 상태로 인계하십시오.
• 편집자: 단계 6. 문장, 장소 및 날짜를 받고, 스크린샷은 절대 받지 않습니다. 두 캡션 옵션을 반환합니다.

단계 7은 직접 수행하십시오. 노트에 검토 지점을 넣는 것은 열려 있는 경우에만 넣으십시오.

새 조각

사진의 주인공이 키트로 만들 수 없는 것(등대, 회전목마)일 때, book/kit/에 가장 가까운 기존 조각을 따라 하나의 조각을 추가하십시오: book/engine/paper.js의 종이 재료, shop-front(book/kit/cafe.js)와 layer-rider(book/kit/panorama2.js) 방식의 탭과 드래그, tick(t, dt, loops)의 유휴 루프는 loops가 true일 때만 실행됩니다. build, about과 함께 book/kit/index.js에 등록하고, 측면 제본의 경우 panorama: true 및 declare도 추가하십시오. 엔진은 매 프레임마다 각 부분의 행렬을 작성하므로, 배치하거나 애니메이션하는 모든 것은 부분의 루트가 아닌 부분 내부의 그룹에 있어야 합니다. 빛, 어두움, 축소된 동작 및 터치는 엔진에서 제공되므로 특별히 처리하지 마십시오. 한 시간 이상이 예상됩니다; 키트 전용 페이지는 몇 분이면 됩니다.

독자가 받는 것

약 1.8MB의 하나의 HTML 파일: 열린 책, 그 아래의 캡션과 장소, 낮/밤 전환 스위치(책의 다이얼도 전환), 그리고 페이지가 두 개 이상일 때의 화살표와 날짜 탭. WebGL과 최신 브라우저가 필요하며, 네트워크 요청을 하지 않습니다. 드래그, 탭 및 키보드 모두 작동합니다(Tab은 각 재생 가능한 조각에 도달하고, Enter는 탭하고, 화살표 키는 드래그합니다).

굽히지 않는 규칙

• 사진은 책이나 반환하는 폴더에 절대 포함되지 않습니다. 보낸 사람이 문장에 넣지 않은 사람의 이름, 나이 또는 세부 정보가 없습니다.
• 캡션과 장소의 모든 단어는 그들의 것이거나 그들이 확인한 것입니다.
• 확인할 수 없는 것을 말하십시오: 스크립트는 Safari, Firefox, 실제 전화 또는 스크린 리더를 다루지 않습니다.