提示词
作者公开分享的提示词或制作说明。
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
帖子正文
这段文字来自 X 原帖。
Interactive 3D watermelon squeeze toy that bursts with rubber bands
One watermelon, a bunch of rubber bands, and quite a price gap 🍉
Claude Opus 5.5 vs ChatGPT-6 Astra
Both did pretty much equally well: add rubber bands, watch the watermelon squeeze, and eventually it bursts into pieces
But Opus clearly wins on price. Estimated API cost:
Opus - $7.70
Astra - $12.95
Pretty similar results, but Opus costs about 40% less. Easy choice for me this round 👀