# One-Shot Prompt

**Simulation**: Paper / Receipt (Receipt Paper Physics)
**Theme**: Clean Minimal (Default)
**Generated**: 2026-04-06

## Prompt

Generate a single-file HTML physics simulation of a receipt paper with printed text that can be grabbed, crumpled, folded, and tossed. The simulation must be fully interactive, visually polished, and run at 60fps on mid-range hardware.

### Physics Specifications

- **Particle grid**: 40 columns × 60 rows (total 2400 particles) arranged in a rectangular grid matching receipt aspect ratio (approx 3:2).
- **Integration**: Verlet integration with fixed timestep of 1/60 seconds, 8 substeps per frame, delta-time capping at 33ms.
- **Constraints**:
  - Distance constraints between adjacent particles (horizontal, vertical) with rest length equal to initial spacing.
  - Bending constraints for each pair of adjacent triangles (across each quad) with stiffness higher than cloth—paper resists folding but eventually creases.
  - Pin constraints: top-left and top-right corners pinned initially; user can unpin via UI.
- **Self-collision**: Simple repulsion between non-adjacent particles within a threshold distance (radius = 1.2× spacing) using spatial hashing for performance.
- **Forces**: Gravity (0.5 units/sec²), damping (0.995 per step), optional wind (toggle via UI) with Perlin noise variation.
- **Collision**: Floor plane at y = -10 with elastic collision (coefficient of restitution 0.3).

### Visual Treatment

- **Background**: Light gray gradient (#e0e0e0 to #d0d0d0) from top to bottom.
- **Paper material**: Off-white matte (`MeshStandardMaterial` with color #f8f8f2, roughness 0.8, metalness 0). Double-sided rendering.
- **Text texture**: Canvas-generated receipt text mapped via UV coordinates. Text content: a receipt for “One‑Shot Physics Simulation” with line items (Model: DeepSeek‑V3.2, Tokens: 2400 particles, Integration: Verlet, Substeps: 8, etc.). Use dark gray ink (#333). Font: monospace 12px.
- **Lighting**: Ambient light (intensity 0.6) + directional light (intensity 1.0) from upper‑left casting shadows (shadow map size 2048×2048, soft).
- **Ground**: Semi‑transparent gray plane at y = -10 for shadows to land on.
- **Camera**: Orbit‑style interaction (drag to rotate, scroll to zoom, right‑drag to pan). Camera initially positioned to view receipt from slight angle.
- **Renderer**: Antialiasing enabled, pixel ratio clamped to devicePixelRatio ≤ 2.

### Interaction Model

- **Mouse grab**: Click and drag to grab nearest particle within a radius. Visual cursor feedback: a small hand sprite appears at grab point.
- **Touch grab**: touchstart/touchmove/touchend mapped to same grab logic.
- **Raycasting**: Three.js raycaster projects screen coordinates onto a plane in 3D space for accurate grabbing.
- **Release physics**: On release, particle receives velocity based on drag motion; simulation continues naturally.
- **Multi‑touch**: Pinch‑to‑zoom camera, single‑finger grab.
- **UI controls** (overlay):
  - Toggle wind (W key / button)
  - Reset simulation (R key / button)
  - Toggle pinning (P key / button)
  - Toggle FPS display (I key)
- **Instruction text**: “Click and drag to crumple” fades after 3 seconds.

### Mobile Support

- Detect touch via `navigator.maxTouchPoints`. On mobile, reduce particle grid to 30×45 (1350 particles) for stable 60fps.
- `touch-action: none` on canvas to prevent scroll interference.
- Responsive canvas fills viewport; adapts to orientation changes.
- Touch‑specific UI: larger buttons, swipe gestures for camera.

### Performance Optimizations

- Use `THREE.BufferGeometry` with `Float32Array` for particle positions.
- Update positions via `geometry.attributes.position.needsUpdate = true`.
- Spatial hashing for self‑collision (grid cell size = 2× particle spacing).
- Constraint solving loops unrolled for speed; avoid object allocation inside animation loop.
- Reduce shader precision on mobile (`mediump`).

### States & UI

- **Loading**: “Initializing receipt paper…” with progress bar.
- **Running**: Physics active, instruction fades, FPS counter (hidden by default).
- **Paused**: Space bar toggles pause; semi‑transparent overlay.
- **Reset**: Animate particles back to initial grid (interpolated over 0.5 seconds).

### Metadata

- HTML `<title>`: “Tender – Receipt Paper Physics”
- Inline SVG favicon depicting a crumpled paper sheet.
- Open Graph / Twitter meta tags describing the simulation.

### Code Constraints

- Single HTML file containing all HTML, CSS, JavaScript.
- Only external dependency: Three.js r128 via CDN (`https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js`).
- No other libraries; physics engine written from scratch.
- All code inline—no placeholders, no truncated loops. Write every particle initialization, every constraint definition, every force calculation explicitly.

### Output

The file must be ready to run in any modern browser, work on desktop and mobile, and be deployable to static hosting (Cloudflare Pages, Vercel, CodePen).

## Notes

- **Physics approach**: Verlet integration chosen for stability and ease of constraint satisfaction. Bending constraints simulate paper stiffness.
- **Performance**: 2400 particles is heavy but manageable with spatial hashing and limited constraint iterations (4 per substep). Mobile reduction ensures smoothness.
- **Notable techniques**: Canvas texture for dynamic text that deforms with mesh; spatial hashing for O(n) self‑collision; fixed‑timestep accumulator for framerate‑independent physics.
- **Hosting**: Works on CodePen, Vercel, Cloudflare Pages, or local HTTP server.