Hairline: 피규어 만들기
당신은 Hairline 스타일로 피규어 하나를 만듭니다. 포인터에 반응하는 둥근 입체로 구성된 단일 선화(isometric line drawing)입니다. 설치할 것이 없이 하나의 HTML 파일로 제공됩니다. @lucasmarkes/hairline의 6개 피규어가 기준이며; examples/terrain.js와 examples/riffle.js는 그중 두 가지 예시로, 당신이 작성할 형식과 동일합니다.
당신이 작성할 것은 오직 피규어(figure)뿐입니다. 엔진(kernel.js)과 페이지(bench.html)는 고정되어 있습니다. 절대 수정하지 말고, 변경된 복사본을 붙여넣지 마십시오. 커널이 이미 제공하는 것을 다시 작성하지 마십시오.
아래에 언급된 모든 파일은 이 스킬의 폴더 안에 있습니다. 피규어와 페이지는 사용자의 작업 디렉토리에 작성됩니다. 작업 디렉토리에서 build.mjs, validate.mjs, look.mjs를 이 폴더의 경로를 사용하여 실행하십시오.
0. 소스 (Source)
요청에 .svg 파일이 함께 온 경우에만 해당됩니다. node read.mjs <file.svg>를 실행합니다. 이 명령어는 SVG를 그림과 측정값 카드로 변환하여 작업 디렉토리에 저장합니다. 그런 다음 source.md를 읽고 그 질문에 답하십시오. 객체와 그 부분들은 이제 고정됩니다: 1단계의 모든 개념은 이를 유지합니다.
1. 개념 (Concept)
concepts.md를 읽으십시오. 빈 상태에 대한 섹션과 표시(mark)로부터 그려진 피규어에 대한 섹션이 있습니다. 그런 다음 2~3개의 개념을 제안하십시오. 각 개념은 한 줄로 구성됩니다:
이름. 대상 객체. 포인터가 그것에 하는 행동. 판독값이 말하는 것. 투어가 멈추는 곳.
사용자가 선택할 때까지 기다리십시오. 객체와 동작이 이미 선택된 상태로 온 경우에만 이 단계를 건너뜁니다. 묻는 사람이 없다면, 가장 강력한 휴식 포즈(rest pose)를 가진 개념을 선택하고 선택한 것을 알리십시오.
소스(0단계)가 있는 경우, 모든 개념은 객체와 그 부분들을 유지합니다: 개념들은 동작에서 차이가 있거나, 동작이 요청과 함께 온 경우 형태와 판독값에서 차이가 있습니다.
하나의 피규어, 하나의 아이디어. 이해를 위해 레이블이 필요한 개념은 아직 개념이 아닙니다.
2. 빌드 (Build)
rules.md를 읽으십시오. 열 가지 규칙은 조언이 아닙니다: 하나라도 위반하는 피규어는 완성된 것이 아닙니다.kernel.js상단의 인덱스를 읽으십시오: 해시 라인 아래의 주석부터var HL까지입니다. 호출할 수 있는 모든 것이 나열되어 있습니다. 그 아래의 코드는 읽지 마십시오.- 당신의 개념에 더 가까운 예제를 읽으십시오: 연속적인 필드는
examples/terrain.js, 개별 항목은examples/riffle.js. - 예제의 형식에 따라 사용자의 작업 디렉토리에
<name>.js로 피규어를 작성하십시오:HL에서 필요한 것을 가져오고,mount({ stage, svg, read }, value)를 정의하여{ set, destroy }를 반환하며, 파일 끝에hairline({ name, means, rules, range, tour, mount })를 추가하십시오.name: 소문자, 한 단어 또는 하이픈으로 연결.means: 한 문장, 최대 140자, 피규어가 보여주는 것을 설명. 스테이지 아래에 표시되는 줄입니다.rules: 이 피규어가 가장 의존하는 규칙의 번호.range: 슬라이더가 구동하는 하나의 숫자로, 강도 0, 0.5, 1에서의 값을 나타냅니다. 중간값이 기본값이며, 세 값은 한 방향으로 움직입니다.mount의value, 그리고 슬라이더가 움직일 때set(value)가 받는value는 0에서 1 사이가 아니라range에서 읽은 피규어 고유의 이 숫자입니다.tour: 페이지가 재생될 때 보이지 않는 포인터가 방문하는 3~6개의 viewBox 지점이거나, 그대로 두려면null; 아무도 페이지를 조작하지 않을 때 낯선 사람이 보는 한 바퀴입니다. 리터럴[x, y]숫자이며, 적어도 하나는 지점입니다. 피규어는 스스로 재생되지 않습니다: 페이지의 재생 버튼과 패키지가 담당합니다.
- 조립:
node build.mjs <name>.js는hairline-<name>.html을 작성하며, 3단계의look.mjs실행 시마다 동일하게 작성됩니다. Node가 없으면bench.html을 복사하고kernel.js의 내용을/*KERNEL*/위치에, 피규어를/*FIGURE*/위치에 파일 연산으로 넣고 다른 것은 변경하지 마십시오.
3. 확인 (Check)
node look.mjs <name>.js --answer x,y,z --edge x,y,z를 실행하고, 소스가 있으면--source <file.svg>를 추가하십시오. 점들은look.md에 명시된 대로 피규어의 세계 좌표입니다. 페이지를 빌드하고, 검증하며, 한 장에 8개의 그림을 찍은hairline-<name>-look.png를 생성하고, 프레임, 판독값 및 콘솔을 확인합니다. 실패로 출력된 모든 줄을 수정하고, 종료 코드 0이 나올 때까지 다시 실행하십시오.look.md를 읽고, 그 다음 시트를 읽은 후 질문에 답하십시오. 실패한 부분을 수정한 후 1단계로 돌아가십시오.
look.mjs는 브라우저가 필요하며, 이 폴더 외부에 playwright-core를 한 번 설치합니다. 브라우저가 없으면 빌드할 때마다 node validate.mjs hairline-<name>.html로 확인하고, look.md의 "브라우저 없이" 섹션에 따라 look을 수행하십시오. Node가 없으면 validate.mjs 상단의 검사 목록을 읽고 코드에서 각 항목에 답하십시오.
검증기를 통과하지 못한 페이지는 전달하지 마십시오. 직접 확인하지 않았다면 look이 완료되었다고 말하지 마십시오.
4. 전달 (Hand over)
가능하다면 hairline-<name>.html을 아티팩트로 게시하십시오. 불가능하다면 사용자가 열 수 있는 위치에 파일을 남겨두고 그 위치를 알리십시오. 그런 다음, 각각 한 줄씩 말하십시오:
- 은유: 대상 객체가 무엇인지, 포인터가 그것에 무엇을 하는지;
- 의존하는 규칙들;
- 투어: 멈추는 순서대로;
- 확인할 수 없었던 사항 (Node 미설치, 브라우저 미설치 등)을 솔직하게 말하십시오.
그런 다음 사용자에게 페이지에서 재생 버튼을 누르거나 ?play=1로 열어보라고 요청하고, 한 바퀴(lap)가 피규어의 이야기를 전달하는지 말해달라고 하십시오. 물어볼 사람이 없으면 투어가 평가되지 않았다고 말하십시오.
5. 조정 (Adjust)
사용자가 변경을 요청하면 <name>.js만 편집하고 look.mjs를 다시 실행한 후 새 시트를 읽으십시오. 열 번째 버전도 첫 번째 버전과 동일한 기준으로 평가됩니다. 한 바퀴(lap)의 변경은 오직 tour의 변경입니다.
문제 해결 가이드 (What goes wrong)
| 다음과 같은 상황을 발견하면 | 대신 이렇게 하십시오 |
|---|---|
| 그림에 레이블, 숫자 또는 문자를 추가하려는 경우 | 기하학으로 표현하십시오 (규칙 10); 이름은 read.textContent로 가십시오 |
| 색상, 채우기 또는 광택을 사용하려는 경우 | sil에서 hi로 획 하나를 옮기십시오 (규칙 04) |
타이머, requestAnimationFrame 또는 CSS 애니메이션을 작성하는 경우 | 스프링 또는 트윈과 함께 register(stage, tick)을 사용하십시오 (규칙 07 및 08) |
| 현재 그려진 대로 포인터를 테스트하는 경우 | 휴식 또는 대상 포즈와 비교하여 테스트하십시오 (규칙 01) |
| 12개의 모서리를 가진 상자를 그리는 경우 | 실루엣과 주름선이라는 두 개의 둥근 링으로 prism을 사용하십시오 (규칙 09) |
| 부품을 단순한 둥근 블록으로 그리는 경우 | 개념에서 이름을 붙인 특징을 부여하여 본질을 드러내십시오 (concepts.md) |
| 쉬웠다는 이유로 휴식을 평평하고, 비어있거나 대칭으로 남겨두는 경우 | 휴식을 구성하십시오: 휴식은 썸네일입니다 (규칙 05) |
| 누구의 것인지 표시하기 위해 상자에 마크를 찍는 경우 | 객체 자체로 마크를 만들거나 생략하십시오 (concepts.md, "마크로부터") |
| 작동하게 만들기 위해 커널이나 벤치를 편집하는 경우 | 피규어가 잘못된 것입니다; 피규어를 변경하십시오 |
| 투어가 모든 부품을 차례로 방문하게 하는 경우 | 각각 다른 답변을 보여주는 세 번의 정지와 떠나기: 한 바퀴는 문장이지 목록이 아닙니다 |
| 두 번째 아이디어를 허용하는 경우 | 잘라내십시오: 하나의 피규어, 하나의 아이디어 |
| SVG에서 경로를 추적하거나 좌표를 복사하는 경우 | 카드가 제공하는 비율로 입체로 부품을 만드십시오 (source.md) |
| 장식인 SVG의 일부를 유지하는 경우 | 버리십시오: 2~3개의 부품이 객체를 구성합니다 |