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 标签。只使用真实内容，不要占位符。
