▲

Boing

 (boing.greg.technology)
4P by GN⁺ 4일전 | ★ favorite | 댓글 1개
  • 웹페이지는 사용자가 마우스로 스프링에 붙은 공을 땡겼다 놓는 동작을 수행할 때마다 ‘boing’ 횟수를 기록하는 간단한 인터랙티브 서비스
  • 공과 스프링은 각도에 맞게 물리적으로 움직임
  • 개인별로 “you've boinged 0 times” 라는 문구를 통해 현재 사용 횟수를 표시
  • 전 세계적으로 누적된 총 boing 횟수도 함께 보여줌
  • 최소한의 인터페이스로 참여형 웹 실험 성격을 띠는 프로젝트
▲
GN⁺ 4일전  [-]
Hacker News 의견

  • 이거 정말 마음에 듦. 살짝 치팅 코드를 써서 자동으로 마우스를 움직이게 했음

    • 누군가 이걸로 Star Wars Imperial March를 재현하는 코드를 쓸 날을 기다리고 있음 (YouTube 링크)
    • boing.playcode.io에서 직접 실행해볼 수 있음
    • 사실 마우스를 움직일 필요는 없고, 공 안쪽에서 살짝 오프센터 클릭만 해도 됨
    • 거의 포기할 뻔했지만, 결국 음계 재생 스크립트를 완성했음. 각 음정에 따라 스프링을 당기고 놓는 방식으로 자동 연주를 구현했음
    • “업보트 가져가라”는 반응이 나올 만큼 웃겼음

  • 재밌는 점은, 이게 완벽한 물리 시뮬레이션이 아니기 때문에 오히려 현실적으로 느껴진다는 것임
    완벽한 Hooke의 법칙으로 구현하면 너무 뻣뻣하고 가짜처럼 보이는데, 약간의 느슨함과 감쇠를 주면 더 자연스러워짐. 일종의 ‘통제된 엉성함’임

    • “완벽한 물리”가 현실을 완벽히 모사한다는 뜻 아닌가? Hooke의 법칙이 비현실적이라는 말인가, 아니면 실제 스프링 시뮬레이터가 비현실적이라는 뜻인가 헷갈림
    • 오래된 게임 Elasto Mania가 이 원리를 극단적으로 활용했음. 오토바이의 과장된 물리 덕분에 기괴하지만 멋진 스턴트를 할 수 있었음 (elastomania.com)
    • Hooke의 법칙은 이상적인 스프링 모델일 뿐, 실제 스프링은 감쇠와 마찰이 존재함. 좀 더 현실적인 모델은 감쇠항을 추가한 질량-스프링-감쇠기 모델임 (Wikipedia 링크)
    • Hooke의 법칙은 스프링이 가하는 힘만 고려하고, 스프링 자체의 질량 분포나 운동량 변화는 무시함. 실제 세계는 훨씬 복잡하므로 Hooke의 법칙은 1차 근사치에 불과함
    • 옛날 플랫폼 게임들도 마찬가지로, 진짜 물리엔진을 쓰면 오히려 조작감이 나빠졌음

  • 예전에 친구가 아기를 낳았을 때, 장난감이 너무 많아서 거실이 장애물 코스 같았음. 그런데 아이는 결국 문 스프링만 가지고 놀았음. 그 단순한 스프링을 만지작거리는 게 묘하게 치유감이 있었음

  • 드디어 나왔다! 이제 이걸로 고전 밈 영상을 재현할 때임 (YouTube Shorts 링크)

  • 이런 걸 보면 예전의 단순한 웹 토이들이 왜 그렇게 만족스러웠는지 떠오름
    로그인도, 온보딩도, “프로로 업그레이드”도 없이, 그냥 하나의 기능만 잘하는 순수한 장난감이었음.
    전 세계 카운터가 붙어 있지만, 과도한 게이미피케이션 없이 깔끔함

  • “이걸 소셜 기능으로 만들어보면 어떨까?”라는 제안이 있었음. 예를 들어, 내가 만든 ‘Boing’을 누나에게 보내서 내 기술을 평가받는 식으로

    • “보낸 마지막 Boing”? “반복 재생되는 Boing”? 그런 식으로 구현할 수도 있겠다는 생각이 듦. 진지하게 고려 중임 :-)

  • 만약 Elon Musk였다면, “이건 세계 시뮬레이터의 초기 알파 버전이며, 1년 안에 날씨와 주식 시장을 완벽히 예측할 것”이라고 말했을 것 같음

  • 비압축 코드를 공개할 생각이 있는지 궁금했음. 코드를 읽어보고 싶었는데, 난독화되어 있어서 아쉬웠음. 얼핏 보니 howler.js를 기반으로 하고, 핵심 로직은 모바일 템플릿 아래쪽에 있음

    • 물론 공개함! GitHub 저장소
    • 온라인 unminifier로 풀어보는 건 어때? (unminify2.com)
    • 구조를 보니 지수 감쇠 기반 스프링 시뮬레이션을 requestAnimationFrame으로 구현한 것 같음. AI가 만든 버전도 있음 (jsfiddle 링크)

  • 이걸 정확하게 시뮬레이션한 버전도 보고 싶음. 예를 들어 engine-sim.parts 같은 스타일로

  • 전 세계 사람들이 만든 Boing 총합 카운터가 있었으면 좋겠음

    • 좋은 아이디어라서 바로 월드 Boing 카운터를 구현했음
    • 여기에 Boing 히트맵도 추가하면 재밌을 듯함
답변달기