> 웹 프론트엔드 > JS 튜토리얼 > JavaScript로 Starfield 시각화

JavaScript로 Starfield 시각화

WBOY
풀어 주다: 2024-09-01 21:06:45
원래의
577명이 탐색했습니다.

Starfield visualization in JavaScript

클래식 Windows 95 starfield 화면 보호기를 연상시키는 시각화를 간단하고 간단하게 구현한 것입니다.

또한 대화형입니다. 화면을 터치하거나 가속도계를 사용하여 이동 방향에 영향을 줄 수 있습니다.

작동 방식은 다음과 같습니다.

  • 각각 임의의 위치에 있는 여러 개의 입자(100개)를 만듭니다.
  • 매 프레임마다 각 입자를 중앙*에서 더 멀리 이동합니다. 입자가 중심에서 멀어질수록 눈에 더 잘 띄게 됩니다. 이는 입자가 보는 사람에게 더 가까이 다가가고 있는 것 같은 착각을 불러일으키거나, 보는 사람이 우주 속으로 더 멀리 가고 있는 것 같은 착각을 불러일으킵니다.
  • 중앙은 실제 화면의 중앙은 아니지만 사용자가 커서를 움직이거나 기기를 기울여 영향을 받을 수 있는 가변 지점입니다.
  • 입자가 뷰 밖으로 나갈 때 다시 중앙 근처에 놓으면 시각화가 영구적으로 계속됩니다.

이 블로그 게시물에서는 댓글이 많은 소스 코드를 공유하여 몇 줄의 코드와 기본 수학 지식만으로 시각적으로 매력적인 애니메이션을 만드는 것이 얼마나 간단한지 보여드리고 싶습니다.

시각화 실제 모습을 보려면 여기를 클릭하세요!

코드는 다음 Gist에서 확인할 수 있습니다.

위 내용은 JavaScript로 Starfield 시각화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿