손그림 잉크 스케치

손그림 잉크 스케치은(는) 무엇을 하나요?

하나의 그림을 자체 완결형 애니메이션 SVG로 그립니다: 크림색 종이 위에 선에서 살짝 벗어난 마커 워시와 함께 다양한 너비의 흔들리는 잉크 선. 평면 2D, 정면 또는 측면도. 선이 "끓습니다"(흔들림이 2프레임마다 다시 그려짐). 따라서 정적인 피사체도 살아있는 것처럼 보이며, t를 사용하여 장면에 작은 움직임을 추가할 수 있습니다. 3D 아이소메트릭 버전은 handdrawn-3d 기술을 대신 사용하세요. 레이블 및 제목은 라틴 문자와 베트남어를 포함한 내장 손글씨 스트로크 폰트를 사용합니다.

키트: assets/kit.js · 렌더러: assets/render.mjs · 모든 함수: references/kit.md (장면을 작성하기 전에 읽으세요) · 작업 예제: examples/ (컵, 사과, 고양이, 식물, 집, 식사)

설정 (한 번)

PNG/GIF 내보내기에는 @resvg/resvg-js가 필요합니다. render.mjs에서 누락되었다고 표시되면 이 기술 폴더에서 npm install을 실행하세요. SVG 출력에는 아무것도 필요하지 않습니다.

그리기 전에

• 그릴 수 있습니까? 주제가 추상적("희망", "생산성", "경제")인 경우 모호한 것을 그리지 마세요. 그렇다고 말하고 이를 보여주는 구체적인 장면 하나 또는 두 개를 제안한 후("보도 균열 사이를 뚫고 나오는 묘목") 사용자가 선택한 장면을 그리세요.
• 다이어그램, 차트, UI, 버튼, 대화형: 이 기술에 해당하지 않습니다.
• 애니메이션: SVG는 항상 반복됩니다(선 끓음). 적합하거나 사용자가 요청할 때 주제에 속하는 하나의 작은 움직임(증기, 꼬리 흔들기, 깜박임, 흔들리는 나뭇잎)을 추가하고, 그렇지 않으면 끓음만으로 충분합니다. 사용자가 정적 이미지(--still)를 요청한 경우에만 단일 프레임 SVG.

워크플로우

1. 부품 및 뷰. 주제의 실제 부품을 나열하고 뷰(정면 또는 측면)를 선택하세요. 찻주전자: 몸통, 뚜껑, 손잡이, 주둥이, 손잡이, 받침; 측면도. 제네릭 블롭(blob)이 아닌 실제 부품(테두리, 손잡이, 뚜껑, 줄기, 판, 타일)에서 그리세요.
2. 블록 잡기. 장면 상단의 주석에 작은 테이블을 작성하세요: 부품, 도형 호출, 상자(x, y, w, h), 색상. 주제는 시트의 ~65–80%를 채우고 중앙에 위치하며 여유 공간을 둡니다. 바닥/테이블 선은 약 80–88% 아래에 위치합니다.
3. 뒤에서 앞으로 그리기 scene.js에서 키트를 사용하여: 그림자 → 뒤에 있는 것들 → 주요 몸체 → 위의 세부 사항 → 레이블. 직접 다시 그리는 것보다 기성품(k.cat, k.person, k.tree, k.house, k.window, k.leaf…)을 선호하고 해당 옵션을 변경하세요. 선반에서 돌릴 수 있는 둥근 것(컵, 냄비, 꽃병, 병, 그릇, 램프)에는 k.turned를 사용하세요. 손잡이, 줄기, 꼬리, 팔 및 가지에는 k.tube를 사용하세요.
4. 렌더링 및 확인:

   node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png --thumb --grid
   

   out/scene.png를 Read 도구로 열고 확인하세요. --grid 오버레이는 좌표를 인쇄하여 실제로 있는 위치를 읽을 수 있습니다. 또한 out/scene-128.png를 확인하세요: 128px에서 여전히 주제로 읽혀야 합니다.
5. 수정 및 재렌더링 확인:
   • 한눈에, 그리고 128px에서 주제로 읽히나요? 먼저 실루엣: 윤곽선이 "찻주전자"를 말해주지 않으면 어떤 세부 사항도 살리지 못합니다.
   • 비율 및 겹침: 손잡이는 몸통에 연결되고, 사물은 바닥에 놓이며, 아무것도 떠 있거나 잘리지 않습니다.
   • 조명은 모든 곳에서 왼쪽 위에서 옵니다(오른쪽 아래에 음영/해칭).
   • 레이블은 그림 위에 놓이거나 다른 선과 교차하지 않습니다. 올바를 때까지 4-5단계를 반복합니다(보통 2-4회). 그런 다음 --grid 없이 최종 렌더링합니다.

PNG를 확인하지 않고 전달하지 마십시오. SVG(애니메이션 그림) 및 PNG 경로를 전달하고 PNG를 보여주세요. 장면이 움직이는 경우 몇 프레임도 확인하세요(애니메이션 참조).

스타일 규칙

• 하나의 모양: 잉크 + 평면 마커 워시. 질감이나 알갱이 없음. 그라데이션, 광택, 드롭 섀도우, 블러, 불투명도 트릭 또는 SVG <text> 없음(k.text / k.label / k.title 사용). 원시 SVG를 추가하지 마세요.
• 색상: 팔레트 이름(red, coral, orange, ochre, yellow, sage, green, leaf, teal, sky, blue, navy, lilac, plum, pink, wood, brown, chocolate, grey, stone, charcoal, white, cream, sand, skin, tan). 그림당 3-5색 및 잉크. 모든 16진수는 자동으로 부드러워지지만 팔레트 이름이 가장 좋아 보입니다.
• 음영: 주요 볼륨에 shade: true(또는 0.15–0.35), 최대 한두 개의 큰 물체에 hatch: true. 빛은 항상 왼쪽 위에서 옵니다.
• 선 두께: 윤곽선 'outline'(기본값), 내부 세부 사항 'detail', 작은 표시 및 안내선 'fine'.
• 귀엽고 둥글게: 동물과 식물은 부드럽고 둥글며, 큰 머리, 점 눈 및 작은 블러시 타원. 날카롭고 사실적인 해부학 없음.
• 구성: 하나의 명확한 주제, 중앙에, 시트의 대부분을 채움. 무언가 위에 서 있는 모든 것 아래에 바닥 그림자(k.shadow).
• 텍스트: 선택적 k.title(...) 왼쪽 위, 더불어 여백 공간에 배치된 짧은 소문자 여백 레이블(k.label) 및 안내선. 그림 위에 떠 있는 상자나 말풍선 절대 안 됨. 사용자 언어로 레이블을 작성하세요. 베트남어는 완전히 지원됩니다.
• 시트: 기본값 1000×1000. 넓은 장면의 경우 export const sheet = { width: 1200, height: 900 }을 사용하세요. --transparent는 종이를 제거합니다.

장면 템플릿

// 찻주전자, 측면도. 부품: 몸통(turned), 뚜껑, 손잡이, 주둥이(tube), 손잡이(tube), 그림자
export const sheet = { seed: 1 };
export function draw(k, t = 0) {
  k.shadow(500, 820, 300, 34);
  k.tube([[690, 540], [810, 520], [810, 650], [700, 710]], 34, { fill: 'teal' });           // 손잡이 (끝은 몸통에 가려짐)
  k.tube([[330, 640], [250, 560], [200, 470]], [60, 26], { fill: 'teal', shade: 0.3 });    // 주둥이
  const pot = k.turned([[150, 0], [230, 70], [250, 180], [210, 300], [170, 330]],
                       { cx: 500, y: 480, fill: 'teal', hatch: true });                    // 몸통
  k.ellipse(500, 480, 150, 22, { fill: 'teal', weight: 'detail' });                        // 뚜껑
  k.blob(500, 445, 30, { squash: 0.8, fill: 'ochre' });                                   // 손잡이
  k.label('the good teapot', { x: 640, y: 300, to: [560, 440] });
}

애니메이션 (항상 켜짐)

out.svg는 기본적으로 반복 애니메이션 SVG입니다: CSS로 전환되는 프레임, 스크립트 없음, 브라우저 및 <img> 태그에서 재생됨(CSS 애니메이션이 없는 렌더러는 프레임 0을 표시함). 장면은 t ∈ [0, 1), 한 번의 루프를 얻습니다. 간단하게 유지하세요: 자동 선 끓음(흔들림은 2프레임마다 다시 그려지므로 정적인 주제도 살아있는 것처럼 보임) 위에 최대 하나 또는 두 개의 움직이는 것(증기, 꼬리 흔들기, 깜박임, 흔들리는 나뭇잎, 연기). Math.sin(2 * Math.PI * t)로 움직임이 매끄럽게 반복되도록 만드세요. 기성품은 t를 사용합니다: k.steam(x, y, { t }), k.cat(..., { animate: true, t }), k.person(..., { wave: true, t }).

node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png          # 애니메이션 SVG + PNG 정지 이미지
node <skill>/assets/render.mjs scene.js -o out/scene.svg --gif out/scene.gif          # + GIF, 모든 곳에서 재생
node <skill>/assets/render.mjs scene.js -o out/scene.svg --still                      # 단일 프레임 SVG
     --frames 8 --fps 10 --boil 2 --gif-size 560

몇 프레임을 확인하여 GIF를 확인하세요: ffmpeg -i out/scene.gif -vf "select='not(mod(n\,3))',scale=300:-1,tile=4x1" -frames:v 1 out/frames.png (또는 PNG 정지 이미지(프레임 0)를 확인하세요). GIF는 256색입니다: 너비를 600px 이하로 유지하세요.