LoopfieldSTUDIO
YOUR NEXT LOOP
LIVE960 × 540
전체 프레임 · 원본 비율 유지드래그 이동 · 휠 확대
저장 해상도
1920 × 1080
0.00s
0¼½¾8초
8s / 30fps

레이어

1 / 4아래에서 위로 합성
패턴을 겹쳐 더 깊은 장면을 만드세요.
EXPORT A FRAME

PNG 해상도 선택

미리보기 크기와 무관하게 선택한 크기로 다시 렌더링합니다. 아래 설정은 MP4 출력에도 동일하게 반영됩니다.

1920 × 1080

현재 재생 위치의 한 프레임을 저장합니다.
A SMALL GUIDE

처음부터, 어렵지 않게.

01

패턴을 고릅니다.

망델브로, 줄리아, 기하학, 유기적 패턴 중 하나로 시작하세요. 선택한 패턴은 현재 레이어에 적용됩니다.

02

색과 형태를 바꿉니다.

오른쪽 슬라이더와 팔레트를 조정하세요. 레이어를 추가하면 최대 4개까지 겹칠 수 있습니다.

03

MP4로 저장합니다.

캔버스 아래 저장 해상도에서 1080p / 2K / 4K를 선택하고 영상 출력에서 크기, 길이, FPS를 정하고 렌더링하세요. 모든 연산은 내 기기에서 이루어집니다.

코딩은 이 정도면 시작할 수 있습니다.

vec3 pattern(vec2 p) {
  float wave = sin(length(p) * 8.0 - uAngle);
  return palette(length(p) * 0.4)
       * (0.5 + 0.5 * wave);
}

p는 픽셀 위치, uAngle은 한 주기 동안 0에서 2π까지 움직이는 각도입니다. palette()는 오른쪽에서 고른 색을 사용합니다. 숫자 8.0을 바꾸는 것만으로도 형태가 달라집니다.

데스크톱 코드 모드는 왼쪽 캔버스 / 오른쪽 편집기로 나뉩니다. 가운데 구분선을 드래그하거나 포커스 후 방향키로 너비를 조절하세요. 패턴과 스타일은 상단 패턴 / 설정 버튼으로 열 수 있습니다.

숫자를 슬라이더로 만들기

// @slider uDensity 2 20 1 8 | 원의 밀도

순서는 이름, 최솟값, 최댓값, 간격, 기본값입니다. 코드에서 uDensity를 사용하고 적용하면 슬라이더가 만들어집니다. uniform은 자동 선언되므로 다시 쓰지 않습니다.

미리 알아두면 좋은 점

직접 작성한 코드는 uAngle, uCycle처럼 주기적인 값을 사용해야 자연스럽게 이어집니다. uTime을 직접 좌표 이동에 사용하면 루프 끝에서 점프할 수 있습니다. 경계 검사는 4개의 작은 샘플을 비교하는 검사이지 수학적 증명이 아닙니다.

픽셀 셰이더는 GPU에서 실행됩니다. 출처를 모르는 고부하 코드는 브라우저를 멈추게 할 수 있습니다. JavaScript 실행, 외부 텍스처, Shadertoy 다중 버퍼 가져오기는 지원하지 않습니다. 프랙탈은 32비트 부동소수점이므로 무제한 딥 줌이 아닙니다.

재생 Space · 코드 적용 Ctrl / ⌘ + Enter · 프로젝트 저장 Ctrl / ⌘ + S · 편집기의 Tab은 들여쓰기, Esc는 적용 버튼으로 이동합니다.

전체 사용자 가이드 · GLSL API · 내 기기 출력 검사 · GitHub Pages / 도메인 연결
LOOP INSPECTOR

루프 경계 검사

주기의 0%, 100%, 첫 프레임 다음, 마지막 프레임을 작은 해상도로 비교합니다. 100%를 0%로 강제 치환하지 않습니다. 얇은 선·프랙탈 경계에는 부동소수점 오차가 생길 수 있습니다.
MADE IN YOUR BROWSER

루프를 렌더링하고 있습니다.

0%준비 중

기기에서 프레임을 생성합니다. 탭을 닫거나 기기를 절전 모드로 전환하지 마세요.