# 간단한 수학 규칙으로 만든 16x16 도트 애니메이션

> Clean Markdown view of GeekNews topic #20825. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20825](https://news.hada.io/topic?id=20825)
- GeekNews Markdown: [https://news.hada.io/topic/20825.md](https://news.hada.io/topic/20825.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-05-11T09:42:40+09:00
- Updated: 2025-05-11T09:42:40+09:00
- Original source: [tixy.land](https://tixy.land)
- Points: 9
- Comments: 3

## Summary

16x16 크기의 **도트 배열**에서 각 도트는 **간단한 수학 공식**으로 위치와 색상이 변화합니다. 최소한의 **알고리듬**과 논리만으로도 **독창적 패턴**과 시각적 효과를 구현할 수 있습니다. 복잡한 **외부 라이브러리**나 고급 기법 없이도 프로그램적으로 효율적이고 **직관적인 구현**이 가능합니다. 이 방식은 **비주얼 아트**, **알고리듬적 창작**, **프로그래밍 교육** 등 다양한 분야에 적용할 수 있습니다.

## Topic Body

- **16x16 도트 애니메이션**이 **간단한 수학 규칙**을 통해 만들어짐
- 각 도트의 움직임은 **수학적인 공식과 연산**을 기반으로 함
- 최소한의 알고리듬과 단순한 논리로 **복잡하면서 매력적인 패턴** 생성이 가능함
- **복잡한 렌더링 기술 없이도** 시각적으로 인상적인 결과 연출이 가능함
- 이 방식은 **창의적 시각화**나 **프로그래밍 교육**에 활용될 잠재력이 높음

---

### 개요
- 이 애니메이션은 **16x16 크기의 도트** 배열을 기본으로 하여 제작됨
- 각 도트의 위치와 색상 또는 상태가 **간단한 수학 법칙**에 의해 시시각각 변화함
- 이러한 구현 방식은 **프로그래밍적으로 효율적임**과 동시에 **매우 직관적**임
- 복잡하거나 고급 기술 없이도 **매력적이고 규칙적인 시각적 효과 제공이 가능함**
- **비주얼 아트, 알고리듬적 창작, 초보 개발자 교육 등**에 적용 가능성 높음

### 주요 내용
- 애니메이션은 **16x16의 2차원 격자 형태**로 나타남
- 각 도트의 변화는 **수학식**이나 특정 규칙을 기반으로 함
- 예를 들어, sin, cos, xor 또는 mod 같은 **기본 수학 연산**이 도트 움직임 및 색상 결정에 활용됨
- 정교한 시각적 효과를 만들기 위해 **복잡한 코드나 외부 라이브러리**가 필요하지 않음
- 간단한 수식을 반복해서 적용하는 것만으로도 **독창적 패턴의 생성**이 가능함

### 의의 및 활용 가능성
- 이 방식은 **미니멀한 코드**로도 인상적인 결과를 만들어내는 데 강점이 있음
- **알고리듬적 사고, 수학적 직관, 시각적 창의성**을 연습하는 데 유용함
- 애니메이션 및 시각화가 프로그램적으로 어떻게 작동하는지 **학습할 수 있는 좋은 예시임**
- **교육 목적, 예술적 실험, 혹은 창의적 프로젝트**에 쉽게 도입 가능함
- 모든 연령대의 초보 개발자 및 창작자에게 **접근성과 활용성이 높음**

## Comments



### Comment 38745

- Author: xcutz
- Created: 2025-05-16T14:25:12+09:00
- Points: 1

신기해염

### Comment 38538

- Author: ng0301
- Created: 2025-05-13T06:53:18+09:00
- Points: 1

와우...

### Comment 38449

- Author: neo
- Created: 2025-05-11T09:42:41+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43942881) 
* Tixy가 정말 놀라움, 비슷한 것을 직접 만들어봤음: https://muffinman.io/pulsar/ 이라는 사이트로 LED 매트릭스 화면용 애니메이션을 만들고 싶었음, 그때는 tixy를 찾지 못해서 pulsar를 만들었는데 나중에서야 tixy를 다시 찾음, 비슷한 프로젝트로 HTML 슬라이더를 사용하는 https://sliderland.blinry.org/도 있음, 이런 게 참 재미있음
* 몇 년 전에 tixy를 처음 발견했을 때 너무 좋아서, 원작자의 허락을 얻어 https://www.mathsuniverse.com/tixy 라는 사이트를 만들었음, tixy 그리드에 퍼즐을 추가해서 학생들에게 컴퓨터 과학 수업 때 사용하고 있음, 학생들이 이 퍼즐에 깊이 빠짐
  * 이건 최근에 출시된 3D 퍼즐 게임 Replicube를 떠올리게 만듦, 같은 방식의 원리를 3D로 구현함
  * 이런 방식이 교육에 정말 멋진 방법임, 나도 처음에는 저 작은 함수들에 감탄해서 calculang으로 클론을 만들어 실험함, F9 평가 기능을 넣어서 서브 식을 선택해 결과를 볼 수 있게 했고 이것이 패턴을 이해하는데 큰 도움이 되었음, 영상도 참고할 수 있음: https://www.youtube.com/watch?v=uXUd_-xrycs
  * 휴대폰에서도 잘 작동함, 다만 휴대폰 키보드가 조금 불편하지만 그래도 사용에는 문제 없음, 그건 폰의 한계임
  * 컴퓨터 그래픽스에서 (0,0) 좌표가 아래가 아니라 상단 왼쪽 시작임
* tixy로 다양한 애니메이션을 만들어봄, 여기 너무 재미있음: https://tixy.land/?code=sin%28x%29*cos%28y%29%2Bcos%28x%29*sin%28y%29%2Bsin%28t*2%29 , 또 백혈구가 공격하는 패턴도 구현함: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28y*t%29%2Bt%2F0.7
* 불꽃 이펙트도 만들어봄: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
* tixy는 Shadertoy 같은 사이트의 아주 쉬운 버전임, 쉬운 방식이 내 취향에 딱 맞음
* tixy의 저자는 Martin Kleppe (@aemkei)로, 퀸이나 JS 트릭 등으로 유명한 분임, 다른 멋진 프로젝트들도 참고할 수 있음: https://aem1k.com/world/ , https://aem1k.com/qlock/
* tixy에서 영감을 받아 프로그래머블 브러시를 가진 드로잉 앱을 만들었음: https://fig.sonnet.io 이 앱은 브러시 움직임이 압력이나 각도가 아니라 시간에 따라 변화해서, 리듬에 맞춰 그려야 한다는 점이 재미있음, 작동 원리와 구현 방법은 여기서 볼 수 있음: https://untested.sonnet.io/notes/fig-tree-brushes/
* 특이한 함수 예시도 공유함: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%29
* 오각별 패턴도 만들어봄: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  * 뱀 두 마리 움직임도 구현함: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29*sin%28%28y-7%29%2F2-t%29%09-sin%28%28h%3Dhypot%28x-%3D7%2Cy-%3D7%29-5%29%29*exp%28-h*h%2F9%29*cos%28atan2%28y%2Cx%29%2Bt%29
* 계속 움직이고 점점 커지는 원을 tixy로 만들 수 있음: https://tixy.land/?code=%28x-10*t%2521%29**2%2B%28y-10*t%2521%29**2-t