▲

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

 (tixy.land)
5P by GN⁺ 3일전 | ★ favorite | 댓글 2개
  • 16x16 도트 애니메이션이 간단한 수학 규칙을 통해 만들어짐
  • 각 도트의 움직임은 수학적인 공식과 연산을 기반으로 함
  • 최소한의 알고리듬과 단순한 논리로 복잡하면서 매력적인 패턴 생성이 가능함
  • 복잡한 렌더링 기술 없이도 시각적으로 인상적인 결과 연출이 가능함
  • 이 방식은 창의적 시각화나 프로그래밍 교육에 활용될 잠재력이 높음

개요

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

주요 내용

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

의의 및 활용 가능성

  • 이 방식은 미니멀한 코드로도 인상적인 결과를 만들어내는 데 강점이 있음
  • 알고리듬적 사고, 수학적 직관, 시각적 창의성을 연습하는 데 유용함
  • 애니메이션 및 시각화가 프로그램적으로 어떻게 작동하는지 학습할 수 있는 좋은 예시임
  • 교육 목적, 예술적 실험, 혹은 창의적 프로젝트에 쉽게 도입 가능함
  • 모든 연령대의 초보 개발자 및 창작자에게 접근성과 활용성이 높음
▲
GN⁺ 3일전  [-]
Hacker News 의견
  • 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%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , 또 백혈구가 공격하는 패턴도 구현함: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%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//…
  • 오각별 패턴도 만들어봄: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • 계속 움직이고 점점 커지는 원을 tixy로 만들 수 있음: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t
답변달기