Skip to content

Commit f00ad77

Browse files
cpreid2cpreid2
authored
Add files via upload
1 parent f6625fd commit f00ad77

22 files changed

+36811
-0
lines changed

‎Blob_Examples/1_blobs.json

Lines changed: 5931 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/2_strings.json

Lines changed: 8079 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/3_constrained_blob.json

Lines changed: 8210 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/4_constrained_blob2.json

Lines changed: 5123 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/5_face.json

Lines changed: 1360 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/6_splat_blob.json

Lines changed: 2891 additions & 0 deletions
Large diffs are not rendered by default.

‎Blob_Examples/7_person_icon.json

Lines changed: 2848 additions & 0 deletions
Large diffs are not rendered by default.

‎help.html

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>blobSketch – Help &amp; User Guide</title>
6+
<style>
7+
/* ---------- GLOBAL BOX-SIZING ---------- */
8+
*, *::before, *::after {
9+
box-sizing: border-box;
10+
}
11+
12+
/* ---------- GENERAL LAYOUT ---------- */
13+
html, body {
14+
margin: 0;
15+
height: 100%;
16+
font-family: "Courier New", monospace;
17+
background: #efefef;
18+
color: #000;
19+
}
20+
body {
21+
display: flex;
22+
overflow: hidden;
23+
}
24+
aside {
25+
/* fix width and prevent shrinking below min-width */
26+
flex: 0 0 230px;
27+
min-width: 200px;
28+
background: #d9d9d9;
29+
border-right: 2px solid #000;
30+
padding: 16px 14px 40px;
31+
overflow-y: auto;
32+
}
33+
main {
34+
flex: 1 1 auto;
35+
padding: 28px 36px 80px;
36+
overflow-y: auto;
37+
}
38+
39+
/* ---------- TYPOGRAPHY ---------- */
40+
h1 {
41+
margin: 0 0 18px;
42+
font-size: 22px;
43+
font-weight: bold;
44+
}
45+
h2 {
46+
background: #c0c0c0;
47+
border: 2px solid #000;
48+
padding: 4px 8px;
49+
margin: 26px 0 10px;
50+
font-size: 18px;
51+
}
52+
h3 {
53+
margin: 18px 0 6px;
54+
font-size: 16px;
55+
}
56+
p, li {
57+
font-size: 14px;
58+
line-height: 1.5;
59+
}
60+
kbd {
61+
display: inline-block;
62+
min-width: 20px;
63+
padding: 1px 4px;
64+
border: 1px solid #000;
65+
border-radius: 4px;
66+
background: #fff;
67+
font-size: 12px;
68+
text-align: center;
69+
}
70+
71+
/* ---------- NAVIGATION ---------- */
72+
nav ul {
73+
list-style: none;
74+
margin: 0;
75+
padding: 0;
76+
}
77+
nav li {
78+
margin-bottom: 6px;
79+
}
80+
nav a {
81+
display: block;
82+
color: #000;
83+
text-decoration: none;
84+
font-weight: bold;
85+
/* ensure long labels wrap rather than overflow */
86+
word-wrap: break-word;
87+
word-break: break-word;
88+
hyphens: auto;
89+
}
90+
nav a:hover {
91+
text-decoration: underline;
92+
}
93+
nav a.active {
94+
background: #ff0;
95+
padding: 2px 4px;
96+
border: 1px solid #000;
97+
}
98+
nav ul ul {
99+
margin-top: 4px;
100+
margin-left: 12px;
101+
padding-left: 12px;
102+
border-left: 1px solid #000;
103+
}
104+
105+
/* ---------- TABLE ---------- */
106+
table {
107+
border-collapse: collapse;
108+
width: 100%;
109+
margin: 8px 0;
110+
}
111+
th, td {
112+
border: 1px solid #000;
113+
padding: 6px 8px;
114+
text-align: left;
115+
}
116+
th {
117+
background: #c0c0c0;
118+
}
119+
120+
/* ---------- BACK LINK ---------- */
121+
.back-link {
122+
display: block;
123+
margin-top: 28px;
124+
font-weight: bold;
125+
}
126+
127+
/* ---------- RESPONSIVE Fallback ---------- */
128+
@media (max-width: 600px) {
129+
body {
130+
flex-direction: column;
131+
overflow: auto;
132+
}
133+
aside {
134+
width: 100%;
135+
flex: 0 0 auto;
136+
border-right: none;
137+
border-bottom: 2px solid #000;
138+
}
139+
main {
140+
width: 100%;
141+
padding-top: 14px;
142+
}
143+
/* collapse nested borders on mobile */
144+
nav ul ul {
145+
border-left: none;
146+
padding-left: 12px;
147+
}
148+
}
149+
</style>
150+
</head>
151+
<body>
152+
<aside>
153+
<h1>blobSketch Help</h1>
154+
<nav>
155+
<ul>
156+
<li><a href="#intro">Overview</a></li>
157+
<li><a href="#interface">Interface</a>
158+
<ul>
159+
<li><a href="#draw">Draw Tools</a></li>
160+
<li><a href="#edit">Edit Tools</a></li>
161+
<li><a href="#shape">Shape Settings</a></li>
162+
<li><a href="#sliders">Physics Sliders</a></li>
163+
<li><a href="#canvas">Canvas Controls</a></li>
164+
</ul>
165+
</li>
166+
<li><a href="#requirements">System Requirements</a></li>
167+
<li><a href="#file">File &amp; Export</a></li>
168+
<li><a href="#troubleshooting">Troubleshooting</a></li>
169+
</ul>
170+
</nav>
171+
<a href="index.html" class="back-link">← Back to App</a>
172+
</aside>
173+
<main>
174+
<section id="intro">
175+
<h2>Overview</h2>
176+
<p>blobSketch is a WebGL-based canvas for creating physics-driven blobs, lines, and repulsion circles. Draw shapes, tweak physics, then export to SVG or high-res JPG.</p>
177+
</section>
178+
179+
<section id="interface">
180+
<h2>Interface</h2>
181+
<ul>
182+
<li><strong>Toolbar (left)</strong> – icons for draw/edit modes and shape defaults.</li>
183+
<li><strong>Canvas (center)</strong> – 500×500 px drawing area with always-on grid.</li>
184+
<li><strong>Sliders (bottom)</strong> – real-time physics controls.</li>
185+
</ul>
186+
</section>
187+
188+
<section id="draw">
189+
<h2>Draw Tools</h2>
190+
<ul>
191+
<li><strong>Blob</strong> – closed shapes. Click-drag to draw; releases seal the shape.</li>
192+
<li><strong>Line</strong> – open polylines. Click-drag to draw</li>
193+
<li><strong>Circle</strong> – draw a repulsion circle. Drag sets radius; blobs avoid inside. Wrap blobs around circles to create controlled shapes.</li>
194+
</ul>
195+
<p>Active tool shows an "ON" badge on its icon.</p>
196+
</section>
197+
198+
<section id="edit">
199+
<h2>Edit Tools</h2>
200+
<ul>
201+
<li><strong>Drag</strong> – move blobs, lines or circles.</li>
202+
<li><strong>Freeze</strong> – lock physics inside closed shapes (dashed rendering).</li>
203+
<li><strong>Slice</strong> – click a chain segment to split the shape.</li>
204+
<li><strong>Pin</strong> – fix single points in place (red target ring). Click red target ring to release point.</li>
205+
<li><strong>Delete</strong> – erase the nearest circle, line segment or blob.</li>
206+
</ul>
207+
<p>Only one edit mode may be active at a time.</p>
208+
</section>
209+
210+
<section id="shape">
211+
<h2>Shape Settings</h2>
212+
<ul>
213+
<li><strong>Color</strong> – sets stroke/fill color.</li>
214+
<li><strong>Size</strong> – sets the base blob / line size</li>
215+
<li><strong>Variation</strong> – random size variation per drawn object</li>
216+
</ul>
217+
</section>
218+
219+
<section id="sliders">
220+
<h2>Physics Sliders</h2>
221+
<table>
222+
<thead><tr><th>Slider</th><th>Description</th></tr></thead>
223+
<tbody>
224+
<tr><td>Blob Size</td><td>Scales blob size.</td></tr>
225+
<tr><td>Excitability</td><td>Controls bounce/damping.</td></tr>
226+
<tr><td>Rigidity</td><td>Spring tension between points on blob/line.</td></tr>
227+
<tr><td>Turmoil</td><td>Repulsion strength to avoid overlaps.</td></tr>
228+
<tr><td>Animation Speed</td><td>Adjusts the global timestep.</td></tr>
229+
</tbody>
230+
</table>
231+
</section>
232+
233+
<section id="canvas">
234+
<h2>Canvas Controls</h2>
235+
<ul>
236+
<li><strong>Thickness (T icon)</strong> – toggles 1 px/5 px stroke.</li>
237+
<li><strong>Undo (⎌)</strong> – removes last element.</li>
238+
<li><strong>Repel ↔ </strong> – enables high repel mode, which adds more force to keep blobs from intersecting</li>
239+
<li><strong>Reset (⟳)</strong> – clears all after confirmation.</li>
240+
</ul>
241+
</section>
242+
<section id="shortcuts">
243+
<h2>Keyboard</h2>
244+
<ul>
245+
<li><kbd>Space</kbd> – Freezes animation -> toggles Excitability to 0 and back.</li>
246+
</ul>
247+
</section>
248+
<section id="file">
249+
<h2>File &amp; Export</h2>
250+
<h3>File Menu</h3>
251+
<ul>
252+
<li>Save Blobs – saves shapes + settings to JSON.</li>
253+
<li>Load Blobs – import shapes + settings from JSON.</li>
254+
</ul>
255+
<h3>Export Menu</h3>
256+
<ul>
257+
<li>Lines → SVG/JPG – strokes only.</li>
258+
<li>Fill → SVG/JPG – fills closed shapes.</li>
259+
</ul>
260+
</section>
261+
<section id="requirements">
262+
<h2>System Requirements</h2>
263+
<h3>Hardware</h3>
264+
<ul>
265+
<li><strong>Desktop / Laptop (recommended)</strong> – any CPU from 2013‑onward with an
266+
integrated or discrete GPU that supports OpenGL 2.1 / WebGL 1.0.</li>
267+
<li><strong>Tablets and Mobile Devices</strong> – Not Supported</li>
268+
</ul>
269+
270+
<h3>Software</h3>
271+
<ul>
272+
<li><strong>Browsers</strong> – Chrome 49+, Firefox 44+, Edge 79+, Safari 11+ with WebGL enabled.</li>
273+
<li><strong>OS</strong> – Windows 7+, macOS 10.11+, Linux distros with Mesa 11+ drivers.</li>
274+
</ul>
275+
276+
<h3>Performance Tips</h3>
277+
<ul>
278+
<li>Turn off <em>Thickness</em> or lower <em>Blob Size</em> on Intel HD 4000‑era GPUs.</li>
279+
<li>Press <kbd>Space</kbd> to mute physics when previewing static artwork.</li>
280+
<li>Laptop users: disable high‑DPI rendering by setting browser zoom to 100 % for extra FPS.</li>
281+
</ul>
282+
</section>
283+
<section id="troubleshooting">
284+
<h2>Troubleshooting</h2>
285+
<ul>
286+
<li><strong>No drawing?</strong> Ensure WebGL is enabled in your browser.</li>
287+
<li><strong>Slow performance?</strong> Lower Blob Size or Animation Speed.</li>
288+
<li><strong>Mobile warning?</strong> App requires a desktop browser.</li>
289+
</ul>
290+
</section>
291+
</main>
292+
293+
<script>
294+
const navLinks = document.querySelectorAll('aside nav a');
295+
const sections = document.querySelectorAll('main section');
296+
function updateNav(){
297+
let id = 'intro';
298+
sections.forEach(sec=>{
299+
if(sec.getBoundingClientRect().top <= 60) id=sec.id;
300+
});
301+
navLinks.forEach(a=>a.classList.toggle('active', a.getAttribute('href').slice(1)===id));
302+
}
303+
document.addEventListener('scroll', updateNav, {passive:true});
304+
</script>
305+
</body>
306+
</html>

‎images/blob.png

865 Bytes
Loading

‎images/cut.png

344 Bytes
Loading

0 commit comments

Comments
 (0)