Create "The Watermelon Test": a single-file interactive 3D toy in HTML. A striped watermelon sits on a warm beige floor; each tap wraps another rubber band around it, the fruit squeezes into an hourglass, and at some point it bursts. Deliver the full working HTML, not a mockup or code fragment. STAGE AND LOOK - WebGL via Three.js (bundled inline or pinned from a CDN). No image or audio files. Google Fonts are the only external resource. - Warm studio look: page background is a soft radial gradient from #f4f0e8 (centre) to #e6dfd3 (edges). Transparent canvas over it. Floor is a shadow-catcher only, plus a soft contact-shadow blob under the fruit. One key light from above-right with soft PCF shadows, a warm fill light, a hemisphere light, and a subtle room environment for reflections. Neutral tone mapping so the greens stay clean. - Camera pitched about 23 degrees down, 28 degree FOV. Size the scene so the fruit is about 55% of the width on a portrait phone and about 40% of the height on desktop. TYPOGRAPHY - Title "THE WATERMELON TEST" in an extra-wide bold grotesque, all caps, tracked (Archivo at 125% width). Subtitle "How much pressure can it take?" in a light italic serif (Newsreader). Small mono labels (JetBrains Mono, wide letter-spacing). Big italic display serif for the end screen (Instrument Serif). Ink #1d1a16, accent red #d2404c. Top-left title, top-right RESET and SOUND buttons with small line icons, bottom-centre HUD. THE WATERMELON - Egg-shaped surface of revolution about 2 units long, max radius 0.74, right end slightly narrower. Rebuild its vertices and normals on the CPU every frame from a radius profile, so it can pinch. - Procedural rind shader driven by each vertex's rest position, so stripes stay glued to the fruit while it deforms: about 15 wavy dark-green stripes (#265c33 range) on pale, slightly mottled green (#aed087 range), soft stripe edges, fine grain as a bump, stripes converging into a dark pole at each end, waxy clearcoat. - On load it drops from above with a bounce and a squash, then rests. Dragging rotates it freely with inertia (trackball style). Mouse and touch. RUBBER BANDS - Tap on the fruit adds one band at the tapped position along its long axis; taps elsewhere do nothing. Ignore taps that were drags. Also Space or Enter adds a band. Hover cursor changes over the fruit. Each tap shows a short expanding ring at the pointer (tan outline). - Bands are thin flat ribbons (width about 0.04 to 0.056) that hug the deformed surface, each tilted 1.5 to 12 degrees in a random direction so they cross. A new band starts about 1.5x too large and snaps onto the fruit with a spring overshoot. - Bands slide along the surface and stack into a bundle around their centroid. Bundle width about (0.22 + 0.0058 x N) in rest units. Each band sits at a slightly different radial layer. - Colour goes from tan (#d9a66a) toward cream (#f6e9cc) as pressure rises, strongest in the middle of the bundle, with random variation so you see both. - Squeeze depth D = 0.60 x (N/65)^1.15 pinches the fruit around the bundle (waist about half the end diameter near 53 bands), with the ends bulging slightly. Every tap adds a small spring kick. Above about 40 bands add a faint tremble. HUD - "BANDS:" with the count (red once above 0), a caption that changes with a quick fade, and a thin progress line that fills N/65 and turns red at 40 or more. - Captions: 0 "Tap the watermelon to add pressure", 1+ "Everything seems fine.", 13+ "Probably still fine.", 28+ "Bro is under pressure.", 40+ "This feels irresponsible.", 49+ "Maybe stop." BURST - Each round picks a random burst count between 50 and 62. On the last band: 0.34 s of violent tension (shake, bands whiten), then it bursts. Hide the fruit, shake the camera, and spawn rigid-body debris: - 7 jagged curved rind shells (striped green outside, pale green-to-white edge, flesh inside fading from white at the rim to coral pink), - 15 faceted low-poly red flesh chunks of varied size, flat shaded, - about 26 flat glossy black seeds, - the rubber bands as curly strands and loose loops, - about 130 small pink droplets that turn into flat translucent pink splat decals on the floor when they land. - Debris physics: gravity, contact points against the floor with impulse and friction, restitution, damping, sleeping when still. Keep pieces inside the visible floor area, with some cropped at the screen edges. - After about 1.9 s fade in a centred overlay: huge italic "Well…", a small mono line "53 BANDS." with the number in red, and a black "DO IT AGAIN" button. Hide the HUD. RESET and DO IT AGAIN start a new round with a new random threshold. SOUND (procedural Web Audio, no files) - Create the audio context only after the first user gesture. SOUND button toggles it (on by default), icon shows muted state. - Band snap: a short filtered noise click, a triangle "twang" dropping in pitch (pitch rises with pressure), and a dull low thump; small random variation each time. - A slow, quiet creak now and then once past about 30 bands. - Burst: sub thump, noise crack, wet splats, and a flurry of band snaps. Soft thuds when debris lands, rate limited. - Limit simultaneous voices and disconnect every node when it ends. QUALITY - Works on desktop and phone (portrait and landscape), pixel ratio capped at 2, no horizontal scroll, side gutters at least 16px. Skip geometry rebuilds when nothing is moving. Fallback message if WebGL is unavailable. Visible focus states and aria labels on the buttons and canvas. Real content only, no placeholders.
한국어 번역
"The Watermelon Test"를 만들어 줘: HTML로 된 단일 파일 인터랙티브 3D 토이. 줄무늬 수박이 따뜻한 베이지색 바닥에 놓여 있고, 탭할 때마다 고무줄이 하나 더 감기고, 과일은 모래시계 모양으로 조여들며, 어느 시점에 터져. 목업이나 코드 조각이 아닌 완전히 작동하는 HTML을 전달해. 무대와 룩 - Three.js를 통한 WebGL(인라인으로 번들하거나 CDN에서 고정). 이미지나 오디오 파일은 없어. Google Fonts만 유일한 외부 리소스야. - 따뜻한 스튜디오 룩: 페이지 배경은 #f4f0e8(중앙)에서 #e6dfd3(가장자리)으로 가는 부드러운 방사형 그라디언트. 그 위에 투명 캔버스. 바닥은 그림자만 받는 역할이며, 과일 아래에 부드러운 접촉 그림자 덩어리를 더해. 오른쪽 위에서 오는 키 라이트 하나에 부드러운 PCF 그림자, 따뜻한 필 라이트, 반구광, 반사를 위한 은은한 방 환경. 녹색이 깨끗하게 유지되도록 중립 톤 매핑. - 카메라는 아래로 약 23도 기울이고, 화각은 28도. 세로형 휴대폰에서는 과일이 너비의 약 55%, 데스크톱에서는 높이의 약 40%가 되도록 장면 크기를 맞춰. 타이포그래피 - 제목 "THE WATERMELON TEST"는 아주 넓은 볼드 그로테스크, 모두 대문자, 자간 적용(Archivo, 너비 125%). 부제 "How much pressure can it take?"는 라이트 이탤릭 세리프(Newsreader). 작은 모노 라벨(JetBrains Mono, 넓은 자간). 엔드 화면에는 큰 이탤릭 디스플레이 세리프(Instrument Serif). 잉크 #1d1a16, 액센트 레드 #d2404c. 왼쪽 상단에는 제목, 오른쪽 상단에는 작은 라인 아이콘이 있는 RESET 및 SOUND 버튼, 하단 중앙에는 HUD. 수박 - 약 2유닛 길이의 달걀 모양 회전면, 최대 반경 0.74, 오른쪽 끝은 약간 더 좁게. 반경 프로파일로부터 매 프레임 CPU에서 정점과 노멀을 다시 구축해 조여들 수 있게 해. - 각 정점의 휴지 위치로 구동되는 절차적 껍질 셰이더로, 변형 중에도 줄무늬가 과일에 붙어 있게 해: 옅고 약간 얼룩진 녹색(#aed087 계열) 위에 약 15개의 물결치는 진녹색 줄무늬(#265c33 계열), 부드러운 줄무늬 경계, 범프로 표현한 미세 결, 양 끝에서 어두운 극점으로 수렴하는 줄무늬, 왁시 클리어코트. - 로드되면 위에서 떨어져 튕기고 눌렸다가 자리를 잡아. 드래그하면 관성과 함께 자유롭게 회전해(트랙볼 방식). 마우스와 터치. 고무줄 - 과일을 탭하면 긴 축을 따라 탭한 위치에 고무줄 하나가 추가되고, 다른 곳을 탭하면 아무 일도 일어나지 않아. 드래그였던 탭은 무시해. Space 또는 Enter로도 고무줄이 추가돼. 과일 위에서 호버 커서가 바뀌어. 각 탭은 포인터 위치에 짧게 확장되는 링(탠색 윤곽)을 표시해. - 고무줄은 변형된 표면에 밀착하는 얇은 평면 리본(너비 약 0.04~0.056)이며, 각각 무작위 방향으로 1.5~12도 기울어져 서로 교차해. 새 고무줄은 약 1.5배 큰 상태에서 시작해 스프링 오버슈트와 함께 과일에 달라붙어. - 고무줄은 표면을 따라 미끄러지며 중심점 주위로 뭉치로 쌓여. 뭉치 너비는 휴지 단위로 약 (0.22 + 0.0058 x N). 각 고무줄은 조금씩 다른 반경 방향 레이어에 놓여. - 압력이 올라갈수록 색이 탠(#d9a66a)에서 크림(#f6e9cc)으로 가며, 뭉치 중앙에서 가장 강하고, 무작위 변화를 주어 둘 다 보이게 해. - 조임 깊이 D = 0.60 x (N/65)^1.15가 뭉치 주위에서 과일을 조여들게 하고(고무줄 약 53개에서 허리 지름이 끝 지름의 약 절반), 끝부분은 약간 부풀어. 탭할 때마다 작은 스프링 킥이 더해져. 고무줄이 약 40개를 넘으면 은은한 떨림을 더해. HUD - 개수가 표시되는 "BANDS:"(0을 넘으면 빨간색), 빠른 페이드로 바뀌는 캡션, N/65만큼 채워지고 40 이상에서 빨간색이 되는 얇은 진행선. - 캡션: 0 "Tap the watermelon to add pressure", 1+ "Everything seems fine.", 13+ "Probably still fine.", 28+ "Bro is under pressure.", 40+ "This feels irresponsible.", 49+ "Maybe stop." 터짐 - 각 라운드는 50에서 62 사이의 무작위 터짐 개수를 골라. 마지막 고무줄에서는 0.34초간 격렬한 긴장(흔들림, 고무줄이 하얗게 변함) 후 터져. 과일을 숨기고, 카메라를 흔들고, 강체 파편을 생성해: - 톱니처럼 갈라진 곡선 껍질 조각 7개(바깥은 줄무늬 녹색, 가장자리는 옅은 녹색에서 흰색, 안쪽 과육은 테두리의 흰색에서 코럴 핑크로 사라짐), - 다양한 크기의 면이 진 로우폴리 빨간 과육 덩어리 15개, 플랫 셰이딩, - 약 26개의 평면 광택 검은 씨앗, - 고무줄은 말린 가닥과 느슨한 고리 형태로, - 약 130개의 작은 핑크 물방울이 바닥에 떨어지면 평면 반투명 핑크 스플랫 데칼로 변함. - 파편 물리: 중력, 바닥과의 접촉점에 임펄스와 마찰, 반발, 감쇠, 정지 시 슬리핑. 조각들은 보이는 바닥 영역 안에 유지하고, 일부는 화면 가장자리에서 잘리게 해. - 약 1.9초 후 중앙 오버레이가 페이드 인: 거대한 이탤릭 "Well…", 숫자가 빨간색인 작은 모노 줄 "53 BANDS.", 검은색 "DO IT AGAIN" 버튼. HUD는 숨겨. RESET과 DO IT AGAIN은 새로운 무작위 임계값으로 새 라운드를 시작해. 사운드(절차적 Web Audio, 파일 없음) - 오디오 컨텍스트는 첫 사용자 제스처 이후에만 생성해. SOUND 버튼으로 켜고 끄며(기본 켜짐), 아이콘은 음소거 상태를 표시해. - 고무줄 스냅: 짧은 필터드 노이즈 클릭, 음정이 떨어지는 트라이앵글 "twang"(음정은 압력에 따라 상승), 둔탁한 저음 쿵; 매번 작은 무작위 변화. - 고무줄이 약 30개를 넘으면 이따금 느리고 조용한 삐걱임. - 터짐: 서브 쿵, 노이즈 크랙, 젖은 스플랫, 그리고 잇따르는 고무줄 스냅. 파편이 떨어질 때 부드러운 쿵 소리, 속도 제한. - 동시 발성 수를 제한하고 끝나면 모든 노드를 연결 해제해. 품질 - 데스크톱과 휴대폰(세로 및 가로)에서 작동하고, 픽셀 비율은 2로 제한, 가로 스크롤 없음, 측면 여백 최소 16px. 움직이는 것이 없을 때는 지오메트리 재구축을 건너뛰어. WebGL을 사용할 수 없을 때의 폴백 메시지. 버튼과 캔버스에 보이는 포커스 상태와 aria 라벨. 실제 콘텐츠만, 플레이스홀더 없음.
