An advanced cloth simulation built with p5.js that works on both desktop and mobile devices. This simulation features realistic cloth physics with tear mechanics, tension visualization, and interactive controls.
- Realistic Cloth Physics: Simulates tension, gravity, and wind effects
- Interactive: Drag and pull the cloth with mouse or touch
- Tearing: Cloth connections break when stretched too far
- Visual Feedback: Color changes based on tension in the cloth
- Mobile-Friendly: Fully responsive and optimized for touch devices
- Customizable: Adjust gravity, stiffness, and wind forces with sliders
- Open the index.html file in a web browser, or host it on any web server
- Interact with the cloth by clicking/tapping and dragging
- Adjust parameters using the sliders below the simulation:
- Gravity: Controls how heavily the cloth falls
- Stiffness: Controls how rigid the cloth feels
- Wind: Applies a horizontal force to the cloth
- Reset the cloth to its original state with the Reset button
This simulation is designed to be easily shareable and accessible on mobile devices. You can:
- Host it on a web server (GitHub Pages, Netlify, etc.)
- Send the files directly to someone who can open them locally
- Use a file sharing service to distribute the entire folder
The simulation uses an advanced mass-spring system with Verlet integration for stable physics. Key technical features include:
- Multiple constraint solvers for stability
- Adaptive mesh density based on screen size
- Optimized rendering with triangle primitives
- Delta-time physics calculation for consistent behavior across devices
- Touch event handling for mobile compatibility
- Visual feedback through HSB color mapping of tension
Tested and works on:
- Chrome (desktop & mobile)
- Firefox (desktop & mobile)
- Safari (desktop & mobile)
- Edge
Created with p5.js - https://p5js.org/