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 トイ。縞模様のスイカが暖かいベージュの床の上に置かれ、タップするたびに輪ゴムが 1 本ずつ巻かれ、果実はくびれて砂時計型になり、ある時点で破裂します。モックアップでもコードの断片でもなく、完全に動作する HTML を納品してください。ステージと見た目 - WebGL は Three.js 経由（インラインで同梱するか、CDN から固定バージョンで読み込む）。画像ファイルも音声ファイルもなし。外部リソースは Google Fonts のみ。 - 暖かいスタジオのルック：ページ背景は #f4f0e8（中央）から #e6dfd3（周辺）へのやわらかなラジアルグラデーション。その上に透明なキャンバス。床はシャドウキャッチャーのみで、果実の下にやわらかなコンタクトシャドウのブロブを追加。右上からのキーライト 1 灯（やわらかな PCF シャドウ付き）、暖色のフィルライト、半球ライト、反射用の控えめな室内環境。グリーンが濁らないようニュートラルなトーンマッピング。 - カメラは約 23 度下向き、FOV 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 系）の上に、波打つ濃緑の縞（#265c33 系）を約 15 本、縞の縁はやわらかく、細かな粒状感をバンプとして表現し、縞は両端の暗い極へ収束し、ワックスのようなクリアコート。 - 読み込み時に上から落ちてきて、バウンドとスクワッシュの後に静止する。ドラッグで慣性付きのトラックボール式に自由回転。マウスとタッチ対応。輪ゴム - 果実をタップすると、その長軸上のタップ位置に輪ゴムが 1 本追加される。それ以外の場所のタップは何もしない。ドラッグだったタップは無視する。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 ボタンでオン／オフを切り替え（既定はオン）、アイコンはミュート状態を表示。 - 輪ゴムのスナップ：短いフィルタリングされたノイズのクリック、ピッチが下がるトライアングルの「トゥワン」（ピッチは圧力とともに上がる）、鈍い低い打音。毎回小さなランダム変化を加える。 - 輪ゴムが約 30 本を超えると、ときどきゆっくり静かな軋み音。 - 破裂：サブベースの打音、ノイズのクラック、濡れた飛沫音、そして輪ゴムのスナップの連打。破片が着地するときのやわらかな打音（レート制限付き）。 - 同時発音数を制限し、終了時にすべてのノードを切断する。品質 - デスクトップとスマートフォン（縦向き・横向き）で動作、ピクセル比は 2 まで、横スクロールなし、左右の余白は最低 16px。何も動いていないときはジオメトリの再構築をスキップ。WebGL が利用できない場合のフォールバックメッセージ。ボタンとキャンバスに可視のフォーカス状態と aria ラベル。プレースホルダーなしの実コンテンツのみ。
