강의소개 페이지에 있는 우주 인터렉티브 웹을 만들고싶은데

아, 우주 화면은 예전의 제 웹사이트를 캡쳐한 모습인데요,
인터랙티브 웹의 예시로 인프런에서 소개 페이지에 올려주신 것 같습니다^^;
우주의 구현은 HTML5 캔버스로 한 것인데, 이 강의는 인터랙티브 웹 기본기를 익히는 데에 중점을 둔 과정이라
캔버스 개발은 포함되어 있지 않습니다.

그래서 별들의 움직임에 관련된 부분만 샘플을 만들어 보았는데요~
아래 주소에 업로드 해놓았습니다.

https://codepen.io/1mincoding/pen/VwYRMrW
https://studiomeal.com/data/code/sample/canvas-universe.html

코드에서

dot.z -= 4;

이 부분의 숫자가 바로 Z축의 이동을 담당하는데, 숫자가 클 수록 속도가 빨라집니다.
각 점들(dot)의 z 좌표를 조사해서, 일정 위치를 벗어나면 다시 안쪽에서부터 출발하도록 아래처럼 컨트롤 하고요.

if (dot.z < -fov) {
 dot.z += (innerWidth+innerHeight)/2;
}

이 소스코드를 이해하기 위해서는 캔버스에 대한 이해가 선행이 되어야 하는데
만약 캔버스에 익숙하지 않으시다면 캔버스 자체를 먼저 공부하시는 편이 좋습니다.
혹시 공부하실 자료를 찾기 어려우시다면, 제 유튜브 채널에서 진행한 캔버스 기초강좌를 보시는 것도 좋을 것 같아요.
https://www.youtube.com/watch?v=JFQOgt5DMBY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc

인프런 커뮤니티 질문&답변