Appearance
Arcade › Fabric Stretch
Click the game above and it runs right here in your browser. No download, no installer, no account needed. William Woodard built it with Cinevva, so it works on a phone or a tablet too.
Nobody has said anything about Fabric Stretch yet. Play it, then tell William Woodard what you would add next.
Fabric Stretch was built by William Woodard with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.
Remix Fabric Stretch opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.
Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.
Create a browser-based interactive 3D simulation titled “Fabric Stretch Lab” (a fabric-stretch exploration game, referred to as Fabric Stretch). Use Three.js-style WebGL rendering with a dark navy/black studio environment and a fixed HTML overlay UI. The camera is a perspective orbit camera aimed at a simple mannequin torso: a dark blue-gray tapered cylinder about 1.75 units tall, with a slightly wider lower end and a thin hip ring/torus around its lower section. Place it on a large dark circular ground plane, with soft hemisphere, white key, and cool blue fill lighting plus subtle dark fog. Wrap a semi-matte, double-sided stretchy fabric tube around the mannequin. Build the fabric as a closed cylindrical cloth mesh with roughly 26 vertices around the circumference and 34 vertical rows, extending from a pinned waistband at y about 1.35 down to a bottom hem at y about 0.28, at radius about 0.52. The top row must remain fixed around the mannequin; the rest is a mass-spring/Verlet cloth simulation. Include structural constraints around each row (including the seam), vertical constraints, and diagonal shear constraints. Each constraint has a rest length and enforces a configurable maximum stretch ratio. Apply gravity, Verlet velocity damping, multiple constraint-solving iterations, a ground collision, and a soft collision-like rule preventing the fabric from moving inside the mannequin radius. The bottom hem should naturally sag under gravity and deform as it is pulled. Add exactly four small glowing cyan-blue spherical drag handles spaced around the bottom hem (at angular positions 0, 25%, 50%, and 75% around the tube). Make the handles follow their cloth particles and enlarge while actively dragged. Let the player click/touch and drag a hem handle with the primary pointer. Project the pointer onto a camera-facing drag plane through the selected handle; permit pulling downward and somewhat outward, clamp the dragged point above y=0.05, and clamp its radial distance roughly between 0.85 and 1.55 times the fabric radius. Disable camera orbit during handle dragging. Clicking/dragging the background instead orbits the camera. Use mouse wheel/middle-button behavior for zoom, right drag for pan, and on touch support one-finger orbit and two-finger dolly/pan. Keep camera distance between about 1.6 and 9 and prevent orbiting too far below the ground. Color the fabric with live per-vertex tension heatmap colors. When heatmap is enabled, calculate each vertex’s average positive strain from its connected constraints and interpolate from relaxed blue (approximately RGB 0.20, 0.55, 0.95) through green/yellowish tones toward tight red (approximately RGB 1.0, 0.20, 0.18), with strain around 0.35 reaching the red end. When disabled, show the whole cloth as a relaxed blue color. Recompute normals and update the mesh every animation frame so the fabric visibly stretches and the heatmap shifts where tension rises. Provide a fixed dark translucent control panel near the upper-left, styled with rounded corners, thin subtle border, backdrop blur, light lavender-white text, and blue accent controls. Display the title “Fabric Stretch Lab” and the instruction line: “Drag hem handles to stretch • Drag background to orbit • Pinch to zoom • Two-finger drag to pan • R to reset”. Add four labeled range sliders with live values: Elasticity (0.1–2.5, default 1.3, step 0.05), Damping (0.80–0.999, default 0.985, step 0.001), Gravity (0–25, default 12, step 0.5), and Max stretch (1.01–1.60, default 1.25, step 0.01). Elasticity controls constraint correction stiffness, damping controls Verlet velocity retention, gravity controls downward acceleration, and max stretch controls the constraint length cap. Show formatted values (elasticity two decimals, damping three, gravity one, max stretch two decimals followed by ×). Add buttons “Reset (R)” and “Heatmap: On”; reset restores the cloth and releases handles, while the heatmap button toggles between live strain colors and flat relaxed blue. The keyboard R must also reset the cloth. Optionally add very subtle short synthesized UI tick sounds on pointer/keyboard interaction, without making sound essential to gameplay. The experience is an open-ended simulation rather than a score-based game: the goal is to grab handles, pull the hem down/out, adjust material and physics sliders, orbit/zoom around the mannequin, and observe how the fabric deforms and where tension concentrates. Do not add enemies, scoring, timers, inventory, or unrelated gameplay systems.