점 재배치Dot Regroup

Dot Regroup

점 재배치

다른 이름Also known as · 점 군집화 · Dot clustering · Particle text assembly · 입자 글자 조립 · Particle Text Assembly · Scatter Regroup · 산점 재배열 · Scatter regroup and re-encoding

243

도판Fig. 243. 점 재배치 · Dot Regroup · power2.inOut

재생 속도Speed

흩어진 점이 분류별 규칙적인 무리로 이동하는 표현An animation that moves scattered dots into orderly groups by category.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

개별 표본의 소속과 집단별 규모Shows which group each sample belongs to and the size of each group.

언제 쓰나Use whenUSE WHEN

개별 표본의 소속과 집단별 규모를 보여줄 때
30개 표본을 18개와 12개로 나누어 개수 차이를 보여준다와 같은 장면을 만들 때

When showing sample membership and group sizes
When splitting 30 samples into groups of 18 and 12 to show the difference in count

과용 주의AvoidAVOID

최종 상태를 0.5초 이상 유지한다
동일 화면에서 불필요한 주홍 강조를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

30개 표본을 18개와 12개로 나누어 개수 차이를 보여준다

과용 · 나쁜 사례OVERUSE

점들이 겹친 채 도착해 각 집단의 개수를 셀 수 없다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
총 점 수	30	10~60	하나의 점은 하나의 표본
집단 크기	18 / 12	합계 30	주홍 집단 18개
지속	1.35s	1.0~1.7s	이동 경로를 읽는 시간
시드	808	1~9999	초기 위치를 재현

GSAP

const rand=Motion.rand(808),dots=document.querySelector('#dots');
for(let i=0;i<30;i++){const d=document.createElement('div');d.className='particle'+(i<18?' selected':'');dots.appendChild(d);const col=i<18?i%6:(i-18)%4,row=i<18?Math.floor(i/6):Math.floor((i-18)/4);gsap.set(d,{x:90+rand()*955,y:105+rand()*275});tl.to(d,{x:(i<18?138:764)+col*61,y:180+row*67,duration:1.35,ease:'power2.inOut'},.3+i*.014);}
tl.to('.label',{opacity:1,duration:.3},2.12);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 점 재배치 효과를 적용해. 30개 표본을 18개와 12개로 나누어 개수 차이를 보여준다. 총 점 수 30; 집단 크기 18 / 12; 지속 1.35s; 시드 808로 만들고 이징은 power2.inOut를 써. GSAP 타임라인 하나로 제어하고 2.5초부터 3초까지 완성 상태를 유지해.

Apply Dot Regroup to <target>. Split 30 samples into groups of 18 and 12 to show the difference in count. Use these settings: total dots 30; group sizes 18 / 12; duration 1.35s; seed 808; ease power2.inOut. Control everything with a single GSAP timeline and hold the completed state from 2.5 to 3 seconds.

Codex

<파일>의 데이터 장면에 점 재배치 효과를 구현해. 총 점 수 30; 집단 크기 18 / 12; 지속 1.35s; 시드 808를 적용하고 이징은 power2.inOut로 지정해. 0초, 0.75초, 1.75초, 2.9초를 캡처해서 시작 상태와 진행 변화, 최종 상태의 잘림과 겹침을 확인해. Math.random과 타이머 없이 타임라인으로 재생하고 마지막 0.5초 이상 정지해.

Implement Dot Regroup in the data scene in <file>. Use these settings: total dots 30; group sizes 18 / 12; duration 1.35s; seed 808; ease power2.inOut. Capture at 0, 0.75, 1.75, and 2.9 seconds to check the initial state, progression, and any clipping or overlap in the final state. Play using a timeline without Math.random or timers, and hold still for at least the final 0.5 seconds.