웹 프론트에서 도형, 파티클 등이 움직이는 건 어떻게 구현할까요?

Question

안녕하세요이런 저런 사이트 뒤져보다 아래 같은 부분을 봤는데어떻게 구현했는지 감이 안 잡힙니다.점선 연결된 부분이 계속 왔다리 갔다리 막 움직입니다.단순 일정한 루틴이 아니라 당구 처럼 막 지들끼리 부딫치면 합쳐지고 그럽니다.

KarlStyner · Accepted Answer

웹 디버깅 해보시면 어떤 기술로 구현했는지 보일겁니다. 근본적으로 WebGL / CSS / 동영상 중 하나겠죠.

O-h-y-o · Answer

vue-particles 로 구현한 것 같은데요.직접 구현하려면 canvas를 이용해서 랜덤한 방항과 속도를 가진 각 점들마다 서로의 distance를 계산하고 라인을 그려줄 수 있겠네요.

mirheeoj · Answer

사이트 살펴보니 캔버스에 계속 이미지를 실시간 업데이트하네요.소스 보니 이걸 사용한 것 같습니다. https://particles.js.org/samples/presets/links.html 속성만 좀 변경하면 똑같이 되겠네요. 말씀하신 사이트 캡처: particles.js.org 데모:

웹 프론트에서 도형, 파티클 등이 움직이는 건 어떻게 구현할까요?

3개의 답변

Q&A 목록