입자 힘장Particle Force Field
입자들이 끌림, 밀림, 회전의 힘을 받아 중심 주위로 휘며 흔적을 남기는 효과Particles feel attraction, repulsion, and rotation forces, curving around a center and leaving trails.
무엇을 전하나What it tells
- 중력, 자기력, 인력과 척력 개념을 설명할 때
- 힘의 중심이 있는 인트로 배경을 만들 때
- To explain gravity, magnetism, attraction, and repulsion
- For intro backgrounds with a force center
- 감쇠 0.96~0.995 범위 밖 금지
- 적분은 고정 dt로 사전 계산하고 저장한다
좋은 예와 나쁜 예Good and bad use
입자 300개가 힘점 3개(끌림 2, 밀림 1) 주위로 6초 동안 감쇠 0.98로 휘며 궤적 자국이 남는다
감쇠 없이 속도가 누적되어 입자가 화면 밖으로 튀어나가거나, 실시간 적분이라 seek 결과가 다르다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 총 지속 | 6000ms | 4000~9000ms | 궤적 재생 |
| 입자 수 | 300개 | 150~600개 | 시드 고정 |
| 힘점 | 3개 | 1~4개 | 끌림/밀림/회전 |
| 감쇠 | 0.98 | 0.96~0.995 | 프레임당 속도 곱 |
| dt | 1/60 | 고정 | 사전 계산 |
const traj=P.map(()=>[]);
for(let s=0;s<360;s++)P.forEach((p,i)=>{let ax=0,ay=0;F.forEach(f=>{const dx=f.x-p.x,dy=f.y-p.y,d=Math.hypot(dx,dy)+30;const k=f.k/(d*d);ax+=dx*k+f.spin*-dy*k;ay+=dy*k+f.spin*dx*k;});
p.vx=(p.vx+ax/60)*.98;p.vy=(p.vy+ay/60)*.98;p.x+=p.vx/60;p.y+=p.vy/60;traj[i].push([p.x,p.y]);});
// draw(k): traj[i].slice(0,k) 선으로에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<배경>에 입자 힘장을 만들어줘. 입자 300개(시드 고정)를 힘점 3개(끌림 2, 밀림 1, 하나는 회전 성분 포함)의 영향으로 고정 dt 1/60, 감쇠 0.98로 360스텝 사전 계산해 궤적을 저장하고, 6초 동안 linear로 재생하며 궤적 자국을 alpha 0.3으로 그려. progress 순수 함수로 seek 가능하게 해.
Build a particle force field for <target>. Precompute 360 steps at fixed dt 1/60 and damping 0.98 for 300 seeded particles under 3 force points (two attractors, one repeller, one with a rotation component), store the trajectories, and play them over 6s linear with trails at alpha 0.3. Draw as a pure function of progress so it is seekable.
<파일>에 particle-force-field를 구현해. 입자 300개, 힘점 3개, 감쇠 0.98, 6000ms linear, 360스텝 사전 계산, seed 고정. 0초, 3초, 6초를 캡처해 입자가 힘점 주위로 휘는지, 화면 밖으로 튀지 않는지, 같은 시점 재렌더가 동일한지 확인해.
Implement particle-force-field in <file>: 300 particles, 3 force points, damping 0.98, 6000ms linear, 360 precomputed steps, fixed seed. Capture at 0s, 3s, and 6s to verify particles curve around force points, none fly off-screen, and re-rendering the same time is identical.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- local/claude-synced-skills (
claude-skill:synced/39cd27d1-5d54-43b6-b557-65596e75bccb_30aab8dd-6815-4962-a41b-a684567e027b/algorithmic-art/SKILL.md)Apache-2.0 - iart-ai/webgl-animation-skillsMIT
- nature-of-code/noc-book-2unknown
- naughtyduk/particlesGLcustom personal-noncommercial/commercial-paid