플로우 필드
vanilla
- Canvas
- 제너러티브
- 마우스인터랙션
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>플로우 필드</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="field">노이즈 벡터장 입자 애니메이션</canvas>
11 <script src="./script.js"></script>
12 </body>
13</html>
14아이디어
화면 전체에 보이지 않는 벡터장(flow field)을 깔고, 2,800개의 입자를 그 흐름에 태운다. 입자가 지나간 자리는 천천히 사라지는 빛의 궤적이 되어 강물처럼 흐르는 패턴을 만든다.
핵심 코드
벡터장은 노이즈 라이브러리 없이 사인파 네 겹을 더해 만든다 — 외부 의존성 없는 단일 파일을 유지하면서도 부드럽고 유기적인 흐름이 나온다.
1function fieldAngle(x, y, t) { 2 const a = 3 Math.sin(x * SCALE + t) + 4 Math.cos(y * SCALE * 1.3 - t * 0.8) + 5 Math.sin((x + y) * SCALE * 0.7 + t * 0.6) + 6 Math.cos((x - y) * SCALE * 1.1 - t * 0.4); 7 return a * Math.PI; 8}
매 프레임 배경을 완전히 지우지 않고 살짝 어둡게 덮어(rgba(...,0.075))
궤적이 서서히 녹게 하고, 입자 선은 lighter 합성으로 겹칠수록 빛이 모이게 했다.
인터랙션
커서 주변에는 접선 방향 힘을 더해 소용돌이를 만든다. 마우스를 휘저으면 흐름이 빨려 들어가며 회오리친다.