아스키 애니메이션 작업대

ASCII Animation Workbench

영상·GIF·프레임 편집·움직이는 글자·자동 생성 효과로 문자 격자 애니메이션을 만들고, 텍스트 프레임·ANSI·asciicast v2·움직이는 GIF·단일 파일 HTML 재생기로 내보냅니다.

이것은 변환기가 아니라 작업대입니다. 문서는 프레임마다 간격이 붙은 문자 격자의 나열이고, 채우는 방법이 넷 있습니다. 영상이나 GIF를 넣거나, 앞 프레임을 비쳐 보면서 직접 그리거나, 배너를 움직이거나, 자동 생성 효과를 쓰는 것입니다. 내보내는 방법도 넷인데 진짜 움직이는 GIF와, 네트워크 없이 혼자 재생되는 HTML 파일 하나가 거기 들어갑니다.

🔒 브라우저 안에서만 처리asciiartanimationvideoterminal

프레임을 어디서 가져올지

효과

앤디 슬론의 donut.c(2006). z-버퍼를 둔 원환면을 표면 법선과 고정 광원의 내적으로 음영 처리합니다.

씨앗값

같은 씨앗값이면 언제나 같은 프레임이 나오므로, 결과를 그대로 재현하고 다시 내보낼 수 있습니다.

1개 중 1번째 프레임

이 프레임 간격 (밀리초)크기

프레임 1개, 0.1초, 메모리 약 7.5kB

내보내기

MP4나 WebM으로 만들려면 GIF를 저장한 뒤 GIF → 영상 도구에 넣으십시오. 그쪽이 이미 WebCodecs로 인코딩하고 H.264는 MP4로, VP9는 WebM으로 묶습니다. 여기에 인코더를 하나 더 쓰면 그것의 못한 사본이 될 뿐입니다. APNG 내보내기는 없습니다. PNG 작성기 위에 acTL·fcTL·fdAT 청크가 더 필요하고, 만들지 않았습니다.

프레임은 600개, 전체 격자는 240만 칸으로 제한합니다. 색을 넣으면 약 230MB입니다. 이 크기에서는 600개까지입니다. 넘기면 휴대폰 탭이 아무 메시지 없이 종료되는데, 거절당하는 편이 낫습니다.

asciicast v2는 JSON 줄 형식입니다. 첫 줄은 헤더 객체이고, 그다음부터 프레임마다 [시각, "o", 데이터] 배열이 한 줄씩 옵니다. 시각은 프레임 간격이 아니라 시작부터의 절대 초이고, 프레임마다 커서를 맨 위로 보낸 뒤 아래를 지워서 짧은 프레임이 긴 프레임의 꼬리를 남기지 않게 하며, 줄 끝은 CRLF입니다. 터미널 원시 출력에서 줄바꿈만 쓰면 계단 현상이 납니다. 공개된 명세를 보고 여기서 구현했습니다.

메모리는 전부 프레임 수 × 격자 크기에서 나갑니다. 그래서 둘 다 제한하고 그 값을 화면에 적습니다. 변환은 워커에서 돌고 취소가 실제로 루프에 닿으므로, 300프레임 작업이 탭을 멈추지도, 멈추라고 한 뒤에도 계속 돌지도 않습니다.

사용 방법

파일 크기가 아니라 프레임 여유를 보십시오
여기서 드는 비용은 전부 프레임 수 곱하기 격자 칸 수이고, 지금 고른 폭에서 몇 프레임이 들어가는지 화면에 적혀 있습니다. 출력 폭을 80자에서 160자로 넓히면 담을 수 있는 프레임이 사분의 일로 줍니다. 제한을 두는 이유는, 두지 않으면 휴대폰 탭이 아무 메시지 없이 종료되기 때문입니다.
내보내기 전에 간격을 정하십시오
프레임마다 자기 간격을 들고 있고 모든 내보내기가 그것을 읽습니다. 그래서 미리보기에서 본 속도가 GIF와 asciicast의 속도입니다. 일정한 속도를 원하면 한 프레임을 정하고 "모든 프레임에 적용"을 누르고, 어떤 장면에 머물고 싶으면 그 프레임만 길게 두십시오.
갈 곳에 따라 내보내기를 고르십시오
asciinema에 올리거나 터미널에서 재생할 사람에게는 asciicast v2입니다. 채팅창이나 리드미에는 GIF입니다. 어딘가에 끼워 넣을 것이라면 HTML 재생기인데, 프레임까지 안에 들어 있는 파일 하나이고 CDN을 쓰지 않습니다. 다른 프로그램이 읽을 것이라면 텍스트 프레임입니다.

자주 묻는 질문

asciicast v2가 무엇이고 왜 GIF만으로는 안 되나요?

asciinema가 터미널을 기록하는 형식입니다. JSON 줄 형식이고, 헤더 객체 한 줄 다음에 프레임마다 [시각, "o", 데이터] 배열이 옵니다. 끝까지 텍스트로 남기 때문에 GIF가 몇 메가바이트일 때 몇 킬로바이트이고, 보는 사람이 화면의 글자를 선택해 복사할 수 있습니다. 공개된 명세를 보고 구현했습니다. 터미널 기록을 재생하지 못하는 곳, 그러니까 대부분의 곳에서는 GIF가 맞는 답입니다.

자동 생성 효과는 직접 만든 것인가요?

코드는 직접 썼고 기법은 더 오래된 것이라 페이지에 출처를 적어 두었습니다. 회전하는 도넛은 앤디 슬론의 donut.c 방식입니다. 가까운 면이 이기도록 z-버퍼를 두고, 표면 법선과 고정 광원의 내적으로 밝기 단계를 고릅니다. 불은 파비앵 상글라르가 정리한 데모신 효과입니다. 플라스마와 비, 사인 스크롤러는 특정 저자가 없는 전래의 효과이고 그렇게 적었습니다. 모든 효과는 프레임 번호와 씨앗값만의 순수 함수라 같은 씨앗값이면 언제나 같은 애니메이션이 나옵니다.