▲

Moss — 모든 브러시가 작은 프로그램인 픽셀 캔버스

 (moss.town)
1P by GN⁺ 5시간전 | ★ favorite | 댓글 1개
  • 128×128 픽셀 캔버스에서 각 브러시가 독립적인 프로그램처럼 작동해 색상과 패턴을 생성하는 도구
  • 브러시는 혼합, 확산, 흘림, 성장, 글리치 등 다양한 동작을 수행하며, 모두 사용자가 직접 수정 가능
  • 캔버스의 각 셀은 데이터 단위로 구성되어, 색이 누적되고 예기치 않은 패턴이 형성되는 구조
  • 50개 이상의 기본 브러시가 제공되며, 코드를 수정해 확산 방식이나 색 반응을 변경할 수 있음
  • 완성된 이미지는 저장 후 공유 가능하며, 다른 사용자가 동일한 브러시와 팔레트로 재작업 가능

MOSS 개요

  • MOSS는 픽셀 기반 페인팅 도구로, 각 브러시가 작은 프로그램처럼 동작함
    • 사용자는 브러시를 통해 색을 칠하는 대신, 코드로 브러시의 행동을 정의할 수 있음
    • 브러시가 캔버스의 데이터를 조작하며, 결과적으로 예측 불가능한 시각적 패턴이 생성됨

브러시의 특성과 동작

  • 브러시는 혼합(blend), 확산(spread), 흘림(drip), 성장(grow), 글리치(glitch) 등 다양한 방식으로 작동
    • 각 브러시는 고유한 동작 방식을 가지며, 사용자가 직접 코드를 수정해 동작을 변경할 수 있음
    • 예를 들어, 브러시가 색을 퍼뜨리는 방식이나 색상 반응을 조정 가능

캔버스 구조와 표현

  • MOSS의 캔버스는 128×128 픽셀로 구성되며, 각 픽셀은 데이터 셀로 취급됨
    • 브러시가 셀의 데이터를 조작하면서 색이 누적되고, 자연스러운 패턴과 우연한 효과가 발생
    • 이러한 과정에서 예기치 않은 시각적 결과물이 만들어짐

기본 제공 브러시와 사용자 수정

  • MOSS는 50개 이상의 기본 브러시를 제공
    • 단순한 페인트나 잉크 효과부터 덩굴 성장(vine growth), 물방울(wet drips), 생성적 체크무늬(generative plaid) 등 다양한 형태 포함
    • 사용자는 브러시의 확산 방식, 잔여 색상, 색 반응 등을 자유롭게 수정 가능

저장 및 공유 기능

  • 완성된 이미지는 저장 후 다른 사용자와 공유 가능
    • 공유받은 사용자는 동일한 브러시와 팔레트를 이용해 같은 환경에서 재작업 가능
    • 사이트에는 사용자가 만든 다양한 예시 작품이 소개됨
▲
GN⁺ 5시간전  [-]
Hacker News 의견들

  • 공유해줘서 고마움. 나는 Aseprite, Procreate, Pico8을 좋아하고, 예전부터 프로그래머블 브러시 아이디어를 머릿속에 품고 있었음
    최근 프로젝트 사이에 시간을 내서 직접 만들어본 것이 MOSS라는 드로잉 토이임. 각 브러시는 캔버스의 모든 픽셀을 인식하는 작은 스크립트로, 노이즈·패턴·압력·속도 등으로 그리는 방식을 정의함
    예를 들어, 실제 스프레이처럼 픽셀을 흩뿌리거나, 드래그할 때마다 형태가 변하는 도장형 브러시, 원근선이 실제로 수렴하는 브러시, 혹은 지능형 채우기 도구(“Fill of my Dreams”) 같은 것도 가능함
    댓글로 브러시 코드를 공유하거나 아이디어를 함께 탐구하고 싶음. 오른쪽 하단의 (?) 버튼에 API 문서가 있고, 하단에는 에이전트를 통해 API를 다룰 수 있는 프롬프트 복사 기능이 있음

    • 약 10년 전 나도 프로그래머블 브러시 프로그램을 만든 적이 있음. MOSS와는 달리 셰이더 대신 물리 시뮬레이션 기반이었지만, 이런 접근 방식에는 큰 잠재력이 있다고 생각함
      한 번의 스트로크로 새를 그릴 때의 느낌이 정말 놀라움
      혹시 영감을 줄 수 있을까 해서 내 프로젝트 링크를 공유함 — Wind by Laura
    • 정말 재미있고 개성이 넘침. Pico8과 Aseprite의 영감을 확실히 느낄 수 있음
      절차적 생성 브러시도 흥미로울 것 같음 — 예를 들어, 그리면서 랜덤 도시 풍경을 만들어내는 브러시 같은 것
      이런 아이디어에는 Wave Function Collapse 기법을 활용할 수도 있을 듯함
    • 픽셀화된 느낌이 너무 마음에 듦. 실시간으로 동작하는 런타임 프로그래머블 브러시는 처음 봄
      앱에 없는 흥미로운 브러시 코드를 몇 가지 공유해줄 수 있는지 궁금함
    • 정말 멋짐. 내 Wacom 태블릿 압력 감도를 인식해서 반응하는 점이 인상적임. 웹 기반 도구 중에서는 단연 돋보임
    • 혹시 오픈소스인지, GitHub 저장소가 있는지 궁금함

  • 정말 멋진 프로젝트임. 나보다 더 창의적인 사람이 이걸 완전히 다른 용도로 쓸 수도 있을 것 같음
    예전에 어떤 사람이 YouTube 자막 포맷을 이용해 간단한 드로잉 앱을 만든 영상을 본 적이 있음
    MOSS의 브러시 코드가 캔버스 상태를 읽고 그릴 수 있다면, 반대로 마우스를 누르고 있는 동안 간단한 비디오나 게임(예: Tic-Tac-Toe)을 렌더링하는 브러시도 가능하지 않을까 생각함
    물론 본래 목적은 아니지만, 재미있는 도전이 될 것 같음

    • 혹시 그 유튜브 채널 링크를 알 수 있을까? “SWEet”으로는 검색이 잘 안 됨

  • 정말 놀라움. Shift 키를 눌러 직선 그리기 기능을 추가할 수 있을까? MSPaint처럼 말임

    • 좋은 아이디어라 바로 추가했음. 선을 그리기 전이나 그리는 중에 Shift를 누르면 미리보기 선이 표시되고, 마우스를 놓을 때 적용됨

  • 이 프로젝트를 보니 예전에 내가 만들던 초소형 이미지 파일 포맷 실험이 떠오름
    관련 글을 Medium에서 정리해둠

  • 너무 마음에 듦. 특히 이런 기능들이 있으면 좋겠음

    • 그려지는 과정을 타임랩스로 기록
    • 그림에 사용된 브러시 목록 표시
      더 나아가, 브러시 스트로크를 기록해두고 나중에 브러시 코드를 수정한 뒤 재생할 수 있다면 정말 흥미로울 것 같음

  • 방금 시도해봤는데 아무것도 그려지지 않음. 브러시와 색상은 선택되지만 캔버스에는 아무 반응이 없음
    MacOS의 Chrome에서 테스트함

  • 정말 훌륭함. 내 Surface Pro 스타일러스가 압력 데이터까지 인식하면서 잘 작동함. 그것도 브라우저 안에서!

  • 정말 멋진 아이디어임. 마치 Shadertoy의 페인팅 버전 같음 — Shadertoy 링크
    앱 안에서 브러시를 공유하거나 브러시 갤러리 같은 기능이 있는지 궁금함
    홈페이지의 “weekly” 섹션처럼 주제별로 작품을 공유하는 건 재미있지만, 그림 실력이 부족한 사람은 브러시만 공유하고 싶을 수도 있을 듯함

    • 점차 공유 기능을 확장 중임. 브러시 아티스트와 픽셀 아티스트가 협업하거나 장난감을 공유하는 커뮤니티를 만들고 싶음
      현재는 내 브러시를 작은 .txt 파일로 저장하고 있음
      참고로, MOSS에서 저장한 png 파일에는 브러시 데이터가 함께 인코딩되어 있어서, 그 파일을 공유하면 동일한 브러시와 팔레트를 불러올 수 있음
      이 아이디어는 PICO8의 게임 데이터 인코딩 방식에서 영감을 얻었음

  • 멋진 개념임. iOS에서 Aquarelle 브러시를 빠르게 스와이프하면 터치 이벤트의 폴링 속도가 눈에 띄게 보임
    선은 부드럽지만, 브러시가 머무는 시간이 길수록 색이 짙어지는 특성 때문에 약간 밴딩 현상이 생김

    • 그 부분을 수정함. 터치 처리 엔진을 일부 업데이트해서 조금 더 나아졌음. 완벽하진 않지만 균형점을 찾았음. 피드백 고마움

  • 사용법을 잘 모르겠음. 튜토리얼이 있으면 좋겠음

답변달기