sketch Public

Watch 0 Fork 0 Star 0
HTML · 10612 bytes Raw Blame History
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>ASCII Sketch</title>
6 <style>
7 body {
8 font-family: sans-serif;
9 text-align: center;
10 margin: 0;
11 padding: 1rem;
12 background: #202124;
13 color: #eee;
14 overflow-x: hidden;
15 }
16
17 h1 {
18 margin-top: 0;
19 padding-top: 1rem
20 }
21
22 canvas {
23 border: 1px solid #555;
24 background: #111;
25 cursor: crosshair;
26 }
27
28 #board {
29 position: relative;
30 }
31
32 canvas.erasing {
33 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="white" stroke-width="2"/><line x1="6" y1="10" x2="14" y2="10" stroke="white" stroke-width="2"/></svg>') 10 10, auto;
34 }
35
36 .toolbar {
37 margin-top: .8rem;
38 display: flex;
39 justify-content: center;
40 align-items: center;
41 gap: 1rem;
42 flex-wrap: wrap;
43 }
44
45 button {
46 padding: 0.5rem 1rem;
47 background: #333;
48 color: #eee;
49 border: 1px solid #555;
50 cursor: pointer;
51 transition: background 0.2s;
52 }
53
54 button:hover {
55 background: #444;
56 }
57
58 button.active {
59 background: #0a84ff;
60 border-color: #0a84ff;
61 }
62
63 input[type=range] {
64 margin: 0 .5rem
65 }
66
67 /* Color wheel styles */
68 .color-picker-wrapper {
69 position: relative;
70 display: inline-block;
71 }
72
73 #colorWheel {
74 width: 150px;
75 height: 150px;
76 border-radius: 50%;
77 cursor: crosshair;
78 border: 2px solid #444;
79 }
80
81 .color-preview {
82 width: 30px;
83 height: 30px;
84 border-radius: 50%;
85 border: 2px solid #666;
86 display: inline-block;
87 vertical-align: middle;
88 margin-left: 10px;
89 }
90
91 .tool-group {
92 display: flex;
93 gap: 0.5rem;
94 align-items: center;
95 }
96
97 /* Effects Panel */
98 .effects-panel {
99 margin-top: 1rem;
100 background: #2a2a2a;
101 padding: 1rem;
102 border-radius: 8px;
103 border: 1px solid #444;
104 max-width: 900px;
105 margin-left: auto;
106 margin-right: auto;
107 }
108
109 .effects-grid {
110 display: grid;
111 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
112 gap: 0.8rem;
113 margin-top: 0.5rem;
114 }
115
116 .effect-category {
117 margin-bottom: 1rem;
118 }
119
120 .effect-category h3 {
121 margin: 0 0 0.5rem 0;
122 color: #888;
123 font-size: 0.9rem;
124 text-transform: uppercase;
125 letter-spacing: 1px;
126 }
127
128 .effect-toggle {
129 display: flex;
130 align-items: center;
131 gap: 0.5rem;
132 background: #1a1a1a;
133 padding: 0.5rem;
134 border-radius: 4px;
135 border: 1px solid #333;
136 transition: all 0.2s;
137 }
138
139 .effect-toggle:hover {
140 background: #222;
141 border-color: #555;
142 }
143
144 .effect-toggle.active {
145 background: #0a84ff22;
146 border-color: #0a84ff;
147 }
148
149 .effect-toggle input[type="checkbox"] {
150 width: 16px;
151 height: 16px;
152 cursor: pointer;
153 }
154
155 .effect-toggle label {
156 cursor: pointer;
157 user-select: none;
158 font-size: 0.9rem;
159 flex: 1;
160 }
161
162 /* Canvas container for overlay effects */
163 .canvas-container {
164 position: relative;
165 display: inline-block;
166 }
167
168 #effectsCanvas {
169 position: absolute;
170 top: 0;
171 left: 0;
172 pointer-events: none;
173 background: none;
174 }
175
176 #effectsCanvas {
177 position: absolute;
178 top: 0;
179 left: 0;
180 pointer-events: none;
181 z-index: 2;
182 }
183 </style>
184 </head>
185 <body>
186 <h1>🖋️ sketch 🖋️</h1>
187 <p>Draw by dragging — every stroke prints a random ASCII char.</p>
188
189 <div class="canvas-container">
190 <canvas id="board" width="800" height="600"></canvas>
191 <canvas id="effectsCanvas" width="800" height="600"></canvas>
192 </div>
193
194 <div class="toolbar">
195 <div class="tool-group">
196 <button id="drawTool" class="active">✏️ Draw</button>
197 <button id="eraseTool">🧹 Erase</button>
198 </div>
199 <button id="clear">Clear All</button>
200 <button id="download">💾 Save Image</button>
201 <label>Size
202 <input type="range" id="size" min="12" max="64" value="24">
203 </label>
204 <div class="color-picker-wrapper">
205 <canvas id="colorWheel"></canvas>
206 <div class="color-preview" id="colorPreview"></div>
207 </div>
208 </div>
209
210 <div class="effects-panel">
211 <h2>Visual Effects</h2>
212
213 <div class="effect-category">
214 <h3>Basic Effects</h3>
215 <div class="effects-grid">
216 <div class="effect-toggle">
217 <input type="checkbox" id="glowEffect">
218 <label for="glowEffect">✨ Glow</label>
219 </div>
220 <div class="effect-toggle">
221 <input type="checkbox" id="embossEffect">
222 <label for="embossEffect">🗿 Emboss</label>
223 </div>
224 <div class="effect-toggle">
225 <input type="checkbox" id="outlineEffect">
226 <label for="outlineEffect">⭕ Outline</label>
227 </div>
228 <div class="effect-toggle">
229 <input type="checkbox" id="shadowEffect">
230 <label for="shadowEffect">🌑 Shadow</label>
231 </div>
232 </div>
233 </div>
234
235 <div class="effect-category">
236 <h3>Animation Effects</h3>
237 <div class="effects-grid">
238 <div class="effect-toggle">
239 <input type="checkbox" id="pulseEffect">
240 <label for="pulseEffect">💗 Pulse</label>
241 </div>
242 <div class="effect-toggle">
243 <input type="checkbox" id="fadeInEffect">
244 <label for="fadeInEffect">👻 Fade In</label>
245 </div>
246 <div class="effect-toggle">
247 <input type="checkbox" id="typewriterEffect">
248 <label for="typewriterEffect">⌨️ Typewriter</label>
249 </div>
250 <div class="effect-toggle">
251 <input type="checkbox" id="jitterEffect">
252 <label for="jitterEffect">📳 Jitter</label>
253 </div>
254 </div>
255 </div>
256
257 <div class="effect-category">
258 <h3>Style Effects</h3>
259 <div class="effects-grid">
260 <div class="effect-toggle">
261 <input type="checkbox" id="rainbowEffect">
262 <label for="rainbowEffect">🌈 Rainbow</label>
263 </div>
264 <div class="effect-toggle">
265 <input type="checkbox" id="gradientEffect">
266 <label for="gradientEffect">🎨 Gradient</label>
267 </div>
268 <div class="effect-toggle">
269 <input type="checkbox" id="doubleVisionEffect">
270 <label for="doubleVisionEffect">👀 Double Vision</label>
271 </div>
272 <div class="effect-toggle">
273 <input type="checkbox" id="mirrorEffect">
274 <label for="mirrorEffect">🪞 Mirror</label>
275 </div>
276 </div>
277 </div>
278
279 <div class="effect-category">
280 <h3>Particle Effects</h3>
281 <div class="effects-grid">
282 <div class="effect-toggle">
283 <input type="checkbox" id="sparklesEffect">
284 <label for="sparklesEffect">✨ Sparkles</label>
285 </div>
286 <div class="effect-toggle">
287 <input type="checkbox" id="dripEffect">
288 <label for="dripEffect">💧 Drip</label>
289 </div>
290 <div class="effect-toggle">
291 <input type="checkbox" id="explodeEffect">
292 <label for="explodeEffect">💥 Explode</label>
293 </div>
294 <div class="effect-toggle">
295 <input type="checkbox" id="smokeEffect">
296 <label for="smokeEffect">💨 Smoke Trail</label>
297 </div>
298 </div>
299 </div>
300
301 <div class="effect-category">
302 <h3>Transform Effects</h3>
303 <div class="effects-grid">
304 <div class="effect-toggle">
305 <input type="checkbox" id="rotationEffect">
306 <label for="rotationEffect">🔄 Rotation</label>
307 </div>
308 <div class="effect-toggle">
309 <input type="checkbox" id="waveEffect">
310 <label for="waveEffect">🌊 Wave</label>
311 </div>
312 <div class="effect-toggle">
313 <input type="checkbox" id="scatterEffect">
314 <label for="scatterEffect">🎲 Scatter</label>
315 </div>
316 <div class="effect-toggle">
317 <input type="checkbox" id="sizeVarianceEffect">
318 <label for="sizeVarianceEffect">📏 Size Variance</label>
319 </div>
320 </div>
321 </div>
322
323 <div class="effect-category">
324 <h3>Special Effects</h3>
325 <div class="effects-grid">
326 <div class="effect-toggle">
327 <input type="checkbox" id="matrixEffect">
328 <label for="matrixEffect">💊 Matrix Rain</label>
329 </div>
330 <div class="effect-toggle">
331 <input type="checkbox" id="glitchEffect">
332 <label for="glitchEffect">📺 Glitch</label>
333 </div>
334 <div class="effect-toggle">
335 <input type="checkbox" id="neonFlickerEffect">
336 <label for="neonFlickerEffect">💡 Neon Flicker</label>
337 </div>
338 <div class="effect-toggle">
339 <input type="checkbox" id="echoEffect">
340 <label for="echoEffect">🔊 Echo</label>
341 </div>
342 </div>
343 </div>
344
345 <div class="effect-category">
346 <h3>Motion Effects</h3>
347 <div class="effects-grid">
348 <div class="effect-toggle">
349 <input type="checkbox" id="spiralEffect">
350 <label for="spiralEffect">🌪️ Spiral</label>
351 </div>
352 <div class="effect-toggle">
353 <input type="checkbox" id="orbitEffect">
354 <label for="orbitEffect">💫 Orbit</label>
355 </div>
356 <div class="effect-toggle">
357 <input type="checkbox" id="magneticEffect">
358 <label for="magneticEffect">🎯 Magnetic</label>
359 </div>
360 <div class="effect-toggle">
361 <input type="checkbox" id="vortexEffect">
362 <label for="vortexEffect">🌀 Vortex</label>
363 </div>
364 <div class="effect-toggle">
365 <input type="checkbox" id="snowEffect">
366 <label for="snowEffect">❄️ Snow</label>
367 </div>
368 <div class="effect-toggle">
369 <input type="checkbox" id="fireworksEffect">
370 <label for="fireworksEffect">🎆 Fireworks</label>
371 </div>
372 <div class="effect-toggle">
373 <input type="checkbox" id="lightningEffect">
374 <label for="lightningEffect">⚡ Lightning</label>
375 </div>
376 <div class="effect-toggle">
377 <input type="checkbox" id="pixelDissolveEffect">
378 <label for="pixelDissolveEffect">👾 Pixel Dissolve</label>
379 </div>
380 </div>
381 </div>
382 </div>
383
384 <script src="js/app.js"></script>
385 </body>
386 </html>