橡皮筋压爆西瓜模拟
- 播放
- 41.6万
- 点赞
- 102
- 评论
- 16
- 收藏
- 33
一个交互式3D网页小玩具,点击西瓜就会缠上橡皮筋直到它爆开,由Claude Sonnet 5.5 Extra根据一个详细提示词生成,估算API成本为4.96美元。
完整提示词5,567 字符
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.
出处:作者在原帖下的回复。提示词保留原文语言,未做改写。
作者提到的工具
Three.js
原帖:https://x.com/vib3coded/status/2104928244382277727
全部作品数据开源在 GitHub · awesome-opus-5.5-video。
模型归属以作者自述为准,本站未独立复现。播放量为 2026-10-02 的快照。作品版权归原作者,修改署名或下架请在 X 私信 @GoSailGlobal。