GN⁺: 내 필체를 코딩하는 기술

(amygoodchild.com)

블록 스크립트

이 전 기사는 블록 인쇄 버전의 알파벳에 관한 것임.
요약하자면, 다음과 같은 과정을 통해 만들었음:
- 각 글자의 경로의 주요 지점을 정의하는 코드 작성 (~글자당 10개의 지점).
- Chaikin의 곡선 알고리즘을 사용하여 경로를 부드럽게 만듦.
- 경로를 가변 두께의 형태로 변환.
- p5js를 사용하여 형태 경로를 그림.
이렇게 보였음:
이 시스템으로 문장을 생성하는 방법에 대한 기사가 곧 나올 예정임. 뉴스레터에 가입하여 소식을 받아보길 바람.
원래 글자의 경로를 정의하는 것은 코드에 위치를 작성하고 지점을 조정하여 글자가 올바르게 보이도록 하는 매우 수작업이었음.
커서체 코딩을 할 때는 이 과정을 간소화했음.

글자 디자인

p5js 에디터에서 쉽게 접근할 수 있도록 경로의 주요 지점을 정의하고 출력하는 도구를 만들었음.
샘플 글자를 표시하고 새로운 글자를 디자인하는 영역을 제공함.
다음 단계로 진행:
- 경로의 주요 지점을 클릭하여 배치 - 결과 Chaikin 곡선 경로가 표시됨.
- 'p'를 눌러 편집 모드로 전환.
- 지점을 선택하고 위치로 드래그.
- 'enter'를 눌러 경로를 콘솔에 출력.
각 글자에 대해 2-3개의 옵션을 만들었음.

결과 경로는 다음과 같음:

[{x:0.7,y:22.5},{x:8.2,y:18.1},{x:8.9,y:11.2},{x:3.7,y:11.4},{x:1.7,y:18.9},{x:8.4,y:22.4},{x:17.7,y:22.0}]

자신의 필체를 가이드로 사용하고 싶어서 소문자와 대문자의 예시를 작성하고 이미지를 도구에 직접 로드하여 추적했음.
w/a/s/d 키를 사용하여 이미지를 올바른 위치에 배치하고 r/e 키로 이미지를 확대/축소.
숫자는 글자 생성 창에 해당 영역을 배치하기 위한 x y 좌표임.
모든 경로를 만들고 곡선을 그리고 가변 너비의 형태로 변환한 후, 각 글자는 개별적으로 이렇게 보였음.

커서체화

때로는 글자를 연결하는 것이 쉬움. 주요 지점의 경로에서 다음 경로로 바로 이동한 후 Chaikin 곡선을 한 번에 적용.
그러나 일부 글자 쌍은 잘 맞지 않음.
예를 들어, na 쌍에서는 n의 마지막 지점이 낮고 a의 첫 지점이 높아 a를 대각선으로 가로지르는 경로가 생겨 e처럼 보임.
ti 쌍에서는 t가 기준선 위에 끝나고 i가 기준선에서 시작하여 부자연스러운 능선이 생김.
이러한 문제를 해결하기 위해 a의 시작에 추가 지점을 추가하고 t의 마지막 두 지점을 삭제할 수 있음.
그러나 모든 시나리오에서 글자를 이렇게 변경할 수는 없음.
예를 들어, a가 단어의 시작에 있으면 추가 지점이 잘못된 위치에 있고 w와 같은 글자 뒤에 오면 a를 다른 방식으로 가로지르는 선이 생김.
t가 k와 쌍을 이루면 변형됨.
글자 경로의 시작과 끝 지점은 다른 글자와의 위치에 따라 달라져야 함.
처음에는 특정 "문제" 쌍을 호출하고 그에 대한 규칙을 작성하려 했으나, 결국 각 경로의 시작과 끝에 숫자를 추가하여 다음을 나타내도록 했음:
- 다른 글자와 연결되지 않음 (0)
- 기준선 주변에서 다른 글자와 연결됨 (1)
- 기준선 바로 위에서 다른 글자와 연결됨 (2)
- x-높이 주변에서 다른 글자와 연결됨 (3)
예시:

각 글자 경로는 이제 다음과 같이 보임. 시작과 끝의 한 자리 숫자에 주목:

[0,{x:12.2,y:13.2},{x:13.5,y:11.0},{x:6.2,y:8.4},{x:1.1,y:13.0},{x:1.8,y:19.0},{x:7.0,y:23.4},{x:15.2,y:23.6},{x:18.4,y:22.1},1]

모든 글자 쌍을 테스트했음:
여기서 각 글자에 대해 여러 경로 옵션을 가지고 있고, 글자가 인접한 글자에 따라 편집됨으로 인해 생긴 변화를 볼 수 있음.
이상적으로는 각 글자에 대해 최소 5-6개의 경로 옵션을 가지고 싶지만 파일 크기와의 균형을 맞춰야 함.

단어 생성

단어가 생성될 때:
- 각 글자에 대해 2-3개의 다른 옵션 중 기본 경로가 선택됨.
- 경로의 끝에 대한 정보가 인접한 글자에 전달됨 (같은 글자의 다른 경로 옵션은 다른 끝점을 가질 수 있으므로 모든 글자 경로가 먼저 선택되어야 함).
- 기본 경로가 이웃 글자에 반응하여 조정됨. 예를 들어, 이전 글자의 끝 높이가 2이면 이 경로의 시작에서 1점을 제거하거나 다음 글자의 시작 높이가 1이면 특정 위치에 추가 지점을 추가함.

조정 함수는 약간 복잡할 수 있음. 예를 들어, 글자 q에 대한 함수는 다음과 같음:

// ip = 경로
// pc = 이전 글자의 끝 정보
// nc = 다음 글자의 시작 정보
// n = 이 글자에 대해 선택된 경로의 인덱스
adjust: (ip, pc, nc, n) => {
  // 이 글자의 끝에 70% 확률로 중단을 추가
  if (rand() < 0.7 ) ip.splice(-1, 1, 0);
  // 4개의 옵션 중 [2]가 이 경로에 대해 선택된 경우
  if (n < 2) {
    // 이전 글자가 3에서 끝나면 처음 두 지점을 다른 지점으로 교체
    if (pc == 3) ip.splice(1, 2, {x:10,y:12});
    // 그렇지 않으면 0이 아닌 경우 시작에 지점을 추가
    else if (pc > 0) ip.splice(1, 0, {x:10,y:20});
  }
  // 이 글자와 다음 글자 사이에 중단이 없는 경우 (0)
  if (nc > 0 && ip[ip.length-1] != 0){
    // 마지막 두 지점을 다른 지점으로 교체
    ip.splice(-3, 2, {x:16,y:34});
  }
}

그러나 종종 짧음. 예를 들어, 글자 n에 대한 함수는 다음과 같음:

adjust: (ip, pc, nc) => {
  // 다음 글자가 3에서 시작하면 무작위로 중단을 생성하거나 마지막 지점을 이동
  if (nc == 3) rand() < 0.3 ? ip.splice(-1, 1, 0) : ip.splice(-2, 1, {x:17,y:23.8});
}

다음으로 모든 글자의 기본 경로가 함께 연결됨. 이 과정에서 경로의 1, 2, 3을 무시하지만 0이 있을 때마다 새로운 경로를 시작하여 중단을 생성.
그런 다음 경로를 곡선으로 만들고 가변 너비 형태로 변환하고 Perlin 노이즈를 사용하여 약간의 떨림을 추가한 후, 커서체 글씨는 이렇게 보임.
이 문장을 생성하는 방법에 대한 기사가 곧 나올 예정임. 뉴스레터에 가입하여 소식을 받아보길 바람.
재미로, 플로터를 통해 실행된 코딩된 필체와 실제 필체를 나란히 비교한 것임.

무게는 얼마인가?

블록 인쇄용 글자 클래스는 9.7kb였음.
커서체 글자 클래스는 현재 26.1kb임 (압축 후).
이 클래스는 각 글자에 대해 여러 경로와 지점을 조정하는 함수가 포함되어 있어 더 큼. 그러나 몇 가지 다른 절약 방법도 있음.
더 많은 절약이 가능할 것 같음. 나는 코드 골프 마법사는 아니지만 몇 가지 아이디어가 있음.
예를 들어, 현재 글자는 기본 글꼴 크기 20을 기준으로 설계되고 크기가 조정됨. 이는 많은 지점이 x: 14.5와 같이 정의됨을 의미하지만, 기본 크기를 200으로 변경하면 지점을 145로 정의하여 소수점을 제거할 수 있음. 이 변경을 신중하게 해야 하므로 나중에 할 일 목록에 있음.

사용 방법

이 필체의 주요 목적은 내가 작업 중인 다이어그램의 제목, 레이블 및 낙서 노트용임.
그러나 텍스트 자체를 가지고 노는 것도 매우 재미있음.
경로를 인코딩한 덕분에 글꼴을 사용하는 대신 경로를 가지고 놀 수 있음. 글자의 위치를 변경하고 개별 글자의 두께를 변경하는 등.
다음으로 이 필체를 다이어그램에 통합할 예정이지만, 텍스트 자체에 집중한 무언가를 만들 계획도 있음. 매우 아름답고 많은 가능성이 있음.

GN⁺의 의견

이 기사는 JavaScript와 p5.js를 사용하여 필체를 디지털화하는 과정에 대한 흥미로운 예시를 제공함. 이는 소프트웨어 엔지니어에게 창의적인 프로젝트를 통해 코딩 기술을 연습할 수 있는 좋은 기회가 될 수 있음.
Chaikin의 곡선 알고리즘과 같은 수학적 알고리즘을 실제 프로젝트에 적용하는 방법을 배울 수 있음. 이는 그래픽 프로그래밍에 대한 이해를 높이는 데 도움이 됨.
경로 조정 함수와 같은 복잡한 로직을 다루는 방법을 배울 수 있음. 이는 코드의 유연성과 확장성을 높이는 데 중요한 기술임.
이 프로젝트는 파일 크기 최적화와 같은 실용적인 문제를 다루고 있음. 이는 실제 소프트웨어 개발에서 중요한 고려 사항임.
이 기술을 도입할 때는 경로 정의와 조정 함수 작성에 많은 시간이 소요될 수 있음. 그러나 결과물은 매우 개인화되고 독특한 텍스트 표현을 제공함.