Skip to content

Commit 4291b8b

Browse files
DenisValeevDenisValeev
committed
cloth
1 parent 8537c19 commit 4291b8b

3 files changed

Lines changed: 1453 additions & 0 deletions

File tree

‎apps/cloth/index.html‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="Interactive cloth simulator you can open directly in the browser."
9+
/>
10+
<title>Cloth Lab</title>
11+
<link rel="stylesheet" href="styles.css" />
12+
</head>
13+
<body>
14+
<div class="app-shell">
15+
<aside class="control-panel">
16+
<p class="eyebrow">Standalone browser toy</p>
17+
<h1>Cloth Lab</h1>
18+
<p class="intro">
19+
Pull, pin, and slice a hanging cloth in real time. Everything is
20+
self-contained, so opening <code>index.html</code> is enough.
21+
</p>
22+
23+
<section class="panel-section">
24+
<div class="section-header">
25+
<h2>Interaction</h2>
26+
<span class="mode-pill" id="mode-pill">Drag</span>
27+
</div>
28+
29+
<div class="mode-buttons" role="group" aria-label="Interaction mode">
30+
<button type="button" class="mode-button is-active" data-mode="drag" aria-pressed="true">
31+
Drag
32+
</button>
33+
<button type="button" class="mode-button" data-mode="cut" aria-pressed="false">
34+
Cut
35+
</button>
36+
<button type="button" class="mode-button" data-mode="pin" aria-pressed="false">
37+
Pin
38+
</button>
39+
</div>
40+
41+
<p class="hint" id="mode-hint">
42+
Drag nearby points to stretch, swing, and fling the cloth.
43+
</p>
44+
</section>
45+
46+
<section class="panel-section">
47+
<div class="section-header">
48+
<h2>Fabric</h2>
49+
</div>
50+
51+
<label class="control" for="columns-range">
52+
<span class="control-label">Columns</span>
53+
<span class="control-value" id="columns-output">30</span>
54+
<input
55+
id="columns-range"
56+
type="range"
57+
min="14"
58+
max="42"
59+
step="1"
60+
value="30"
61+
data-config="columns"
62+
/>
63+
</label>
64+
65+
<label class="control" for="rows-range">
66+
<span class="control-label">Rows</span>
67+
<span class="control-value" id="rows-output">18</span>
68+
<input
69+
id="rows-range"
70+
type="range"
71+
min="10"
72+
max="28"
73+
step="1"
74+
value="18"
75+
data-config="rows"
76+
/>
77+
</label>
78+
79+
<label class="control" for="spacing-range">
80+
<span class="control-label">Spacing</span>
81+
<span class="control-value" id="spacing-output">16px</span>
82+
<input
83+
id="spacing-range"
84+
type="range"
85+
min="10"
86+
max="20"
87+
step="1"
88+
value="16"
89+
data-config="spacing"
90+
/>
91+
</label>
92+
</section>
93+
94+
<section class="panel-section">
95+
<div class="section-header">
96+
<h2>Motion</h2>
97+
</div>
98+
99+
<label class="control" for="gravity-range">
100+
<span class="control-label">Gravity</span>
101+
<span class="control-value" id="gravity-output">0.72</span>
102+
<input
103+
id="gravity-range"
104+
type="range"
105+
min="0.20"
106+
max="1.40"
107+
step="0.01"
108+
value="0.72"
109+
data-config="gravity"
110+
/>
111+
</label>
112+
113+
<label class="control" for="stiffness-range">
114+
<span class="control-label">Stiffness</span>
115+
<span class="control-value" id="stiffness-output">0.93</span>
116+
<input
117+
id="stiffness-range"
118+
type="range"
119+
min="0.72"
120+
max="1.00"
121+
step="0.01"
122+
value="0.93"
123+
data-config="stiffness"
124+
/>
125+
</label>
126+
127+
<label class="control" for="iterations-range">
128+
<span class="control-label">Iterations</span>
129+
<span class="control-value" id="iterations-output">7</span>
130+
<input
131+
id="iterations-range"
132+
type="range"
133+
min="3"
134+
max="10"
135+
step="1"
136+
value="7"
137+
data-config="iterations"
138+
/>
139+
</label>
140+
141+
<label class="control" for="wind-range">
142+
<span class="control-label">Wind</span>
143+
<span class="control-value" id="wind-output">0.38</span>
144+
<input
145+
id="wind-range"
146+
type="range"
147+
min="0.00"
148+
max="1.20"
149+
step="0.01"
150+
value="0.38"
151+
data-config="wind"
152+
/>
153+
</label>
154+
155+
<label class="control" for="tearFactor-range">
156+
<span class="control-label">Tear threshold</span>
157+
<span class="control-value" id="tearFactor-output">1.85x</span>
158+
<input
159+
id="tearFactor-range"
160+
type="range"
161+
min="1.20"
162+
max="3.20"
163+
step="0.05"
164+
value="1.85"
165+
data-config="tearFactor"
166+
/>
167+
</label>
168+
</section>
169+
170+
<section class="panel-section">
171+
<div class="section-header">
172+
<h2>Stats</h2>
173+
</div>
174+
175+
<div class="stats-grid">
176+
<div class="stat-card">
177+
<span class="stat-label">Particles</span>
178+
<strong class="stat-value" id="particle-count">0</strong>
179+
</div>
180+
<div class="stat-card">
181+
<span class="stat-label">Links</span>
182+
<strong class="stat-value" id="link-count">0</strong>
183+
</div>
184+
<div class="stat-card">
185+
<span class="stat-label">Breaks</span>
186+
<strong class="stat-value" id="tear-count">0</strong>
187+
</div>
188+
</div>
189+
</section>
190+
191+
<div class="action-row">
192+
<button type="button" class="button button-primary" id="reset-button">
193+
Reset cloth
194+
</button>
195+
<button type="button" class="button" id="defaults-button">
196+
Restore defaults
197+
</button>
198+
</div>
199+
200+
<section class="panel-section">
201+
<div class="section-header">
202+
<h2>Shortcuts</h2>
203+
</div>
204+
205+
<ul class="tips">
206+
<li><kbd>D</kbd> drag mode, <kbd>C</kbd> cut mode, <kbd>P</kbd> pin mode</li>
207+
<li><kbd>R</kbd> rebuild the cloth and <kbd>Space</kbd> toggle wind</li>
208+
<li>Pointer events work for mouse, trackpad, and touch screens</li>
209+
</ul>
210+
</section>
211+
</aside>
212+
213+
<main class="stage">
214+
<div class="stage-header">
215+
<div>
216+
<p class="stage-label">Canvas viewport</p>
217+
<h2>Interactive cloth simulator</h2>
218+
</div>
219+
<button type="button" class="button" id="wind-toggle" aria-pressed="true">
220+
Wind on
221+
</button>
222+
</div>
223+
224+
<div class="canvas-wrap">
225+
<canvas id="cloth-canvas" aria-label="Interactive cloth simulation canvas"></canvas>
226+
<div class="canvas-overlay" id="canvas-note">
227+
Grab the mesh and throw it around.
228+
</div>
229+
</div>
230+
</main>
231+
</div>
232+
233+
<script src="main.js"></script>
234+
</body>
235+
</html>

0 commit comments

Comments
 (0)