효과Effects / 질감·스타일Texture & Style / Nº 455

입자 비디오 모자이크Particle Video Mosaic

Particle Video Mosaic

입자 비디오 모자이크

다른 이름Also known as · 2D 비디오 점

455

렌더 추가 예정CLIP COMING입자 비디오 모자이크Particle Video Mosaic정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 455. 입자 비디오 모자이크 · Particle Video Mosaic · none

점 격자의 위치는 유지한 채 각 점의 색이 영상 프레임을 따라 바뀌어 움직이는 장면을 점으로 재현한다A fixed grid of dots takes its colors from the video frame by frame, redrawing the moving scene as points.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

영상이 작은 정보 단위의 집합이라는 것을 보여 준다. 디지털 화면의 해상도와 입자성을 연출로 드러낸다Shows that video is a collection of tiny units of information. It exposes the resolution and graininess of a digital screen as a stylistic choice.

언제 쓰나Use whenUSE WHEN

실제 영상이 점 단위 데이터로 구성됐다는 것을 시각적으로 설명할 때
영상 전환 사이에 점 격자 질감으로 디지털 세계관을 만들 때

Explain visually that video is built from point-sized data.
Give a transition a dot grid texture that sets a digital tone.

과용 주의AvoidAVOID

점 간격 8px 초과 금지(영상 형태가 읽히지 않음)
원본 영상의 사용 권리를 미리 확인한다

분류TagsTAGS

질감·스타일Texture & Style 분위기Mood 설명Explain 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

5px 간격 격자의 2px 점들이 33.33ms마다 영상 프레임 색을 받아 4초 동안 인물의 움직임을 점으로 그려 낸다

과용 · 나쁜 사례OVERUSE

점 간격을 20px 이상으로 벌려 영상 내용이 읽히지 않거나, 점 위치가 프레임마다 흔들려 노이즈처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
샘플 간격	5px	4~8px	1920 기준 384x216 점
점 크기	2px	1.5~3px	간격의 40% 안팎
프레임 갱신	33.33ms	30fps 고정	원본 프레임과 동기
길이	4s	3~6s	영상 길이에 맞춤

GSAP

const v = document.querySelector('video'); // paused, currentTime을 타임라인이 지정
tl.to({}, { duration: 4, ease: 'none', onUpdate() { v.currentTime = this.progress() * 4; drawDots(v, 5, 2); } }, 0);
// drawDots: 5px 격자마다 색을 샘플링해 2px 원을 그림

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 영상을 5px 간격 점 격자로 다시 그려줘. 각 점은 2px 원이고 색은 원본 프레임에서 샘플링하며 4초 동안 재생해. video는 paused로 두고 타임라인 progress로 currentTime을 지정해서 seek해도 같은 프레임이 나오게 해줘.

Redraw the video in <target> as a dot grid with 5px pitch. Each dot is a 2px circle whose color is sampled from the source frame, over 4 seconds. Keep the video paused and set currentTime from timeline progress so seeking gives identical frames.

Codex

<파일>에 particle video mosaic를 WebGL로 구현해. 샘플 간격 5px, 점 2px, 4초, 영상 텍스처 UV 샘플링. currentTime은 timeline progress로만 갱신한다. 0초, 2초, 4초를 캡처해 점 위치가 프레임 간 고정인지, 색만 영상 내용을 따라가는지 확인해.

Implement a particle video mosaic in WebGL in <file>: 5px sample pitch, 2px dots, 4 seconds, sampling the video texture by UV. Update currentTime from timeline progress only. Capture at 0s, 2s and 4s and verify dot positions are fixed across frames while only colors follow the video content.