# Verlet cloth

DevFeed: [Verlet cloth](<https://devfeed.tech/articles/verlet-cloth-28095.md>)

Original publisher: [Read original article](<https://jlongster.com/verlet-cloth>)

Author: James Long

Published: 2025-04-11T12:00:00Z

Content type: article

Language: en

Sources: [James Long](<https://devfeed.tech/sources/james-long.md>)

Topics: [Demo](<https://devfeed.tech/topics/demo.md>), [Code](<https://devfeed.tech/topics/code.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [demo](<https://devfeed.tech/tags/demo.md>), [experiment](<https://devfeed.tech/tags/experiment.md>), [script](<https://devfeed.tech/tags/script.md>)

## AI overview

An interactive Verlet cloth demo lets users drag the cloth with the left mouse button, tear it with the right button, and adjust its size. The demo was written with a fork of LLJS that compiles to asm.js, and its code is available.

## Source excerpt

body { background-color: black; } #demo-mount { margin-top: 50px; } .sizer { position: absolute; bottom: 60px; width: 500px; left: calc(50% - 250px); text-align: center; color: white; background-color: #303040; padding: 20px; border-radius: 6px; } .sizer input { width: 100%; margin-bottom: 20px; } .sizer .output { font-size: 3em; line-height: 1em; } .info { position: fixed; bottom: 0; right: 0; display: block; margin: 1.5em; } .info.closed { display: none; } .info span { display: block; text-align: right; font-size: .75em; } div.info { color: white; width: 250px; background-color: rgba(255, 255, 255, .2); padding: 1em; } a.info { color: #004854; background-color: white; border-radius: 50%; width: 25px; height: 25px; text-align: center; padding-top: 12px; line-height: 0; opacity: .4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a.info:hover { opacity: 1; cursor: pointer; } ^96c620 <div id="demo-mount"></div> ^f31aec <div class="sizer"> <input name="size" type="range" min="100" max="350" value="100" /> <div class="output">32 x 33</div> </div> <a class="info">?</a> <div class="info closed"> <p> Drag the cloth around with the left mouse button, and tear it with the right button. </p> <p> This was written with <a href="https://github.com/jlongster/LLJS">my fork</a> of <a href="http://lljs.org/">LLJS</a> that compiles to <a href="http://asmjs.org/">asm.js</a>. Get <a href="https://github.com/jlongster/lljs-cloth">the code</a>, and see more demos at <a href="https://jlongster.com">my site</a>. <span>- James Long</span> </p> </div> <script src="https://archive.jlongster.com/lljs-cloth/stats.min.js"></script> <script src="https://archive.jlongster.com/lljs-cloth/gl-matrix.js"></script> <script src="https://archive.jlongster.com/lljs-cloth/gl-renderer.js"></script> <script src="https://archive.jlongster.com/lljs-cloth/canvas-renderer.js"></script> <script src="https://archive.jlongster.com/lljs-cloth/verlet-run.js"></script> <script s