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（邊緣）的柔和徑向漸變。其上覆蓋透明 canvas。地板只作爲陰影承接面，另外在果實下方加一團柔和的接觸陰影。一盞來自右上方的主光，帶柔和的 PCF 陰影，一盞暖色補光，一盞半球光，以及一個用於反射的微妙室內環境。使用中性色調映射，讓綠色保持純淨。 - 相機向下俯約 23 度，28 度 FOV。設定場景尺寸，使果實在豎屏手機上約佔寬度的 55%，在桌面上約佔高度的 40%。排版 - 標題“THE WATERMELON TEST”，採用超寬粗體 grotesque 字體，全大寫，加字距（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 按鈕用於開關它（默認開啓），圖標顯示靜音狀態。 - 橡皮筋扣緊：一聲短暫的濾波噪聲咔噠、一聲音高下行的三角波“嘣”響（音高隨壓力升高），以及一記沉悶的低頻撞擊；每次都帶有小幅隨機變化。 - 超過約 30 根後，間或發出一聲緩慢、輕微的吱嘎聲。 - 爆裂：次低頻撞擊、噪聲爆裂、溼潤的飛濺聲，以及一陣密集的橡皮筋扣緊聲。碎屑落地時發出輕柔的悶響，並限制觸發頻率。 - 限制同時發聲的數量，並在結束時斷開每個節點。質量 - 在桌面與手機（豎屏和橫屏）上均可用，像素比上限爲 2，無橫向滾動，兩側留白至少 16px。沒有東西在移動時跳過幾何體重建。WebGL 不可用時顯示回退提示。按鈕與 canvas 上具有可見的焦點狀態和 aria 標籤。只使用真實內容，不要佔位符。
