-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
671 lines (603 loc) · 32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
<!DOCTYPE html>
<html>
<head>
<title>GMAN Doodles</title>
<meta charset="uft-8" >
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
html,body {
background-color: #191919;
font-family: monospace;
color: #999;
margin: 0px;
font-size: large;
}
h1 {
font-size: inherit;
font-weight: bold;
margin: 10px;
color: #a080f0;
text-decoration: underline;
}
h2 {
color: #acf0e9;
font-size: inherit;
font-weight: bold;
}
b {
color: #c0ddd0;
font-weight: normal;
}
.warning {
color: red;
}
.doodle {
padding: 1em;
margin-bottom: 10px;
}
.doodle:nth-child(odd) {
gbackground-color: #202020;
}
code {
background-color: #303030;
color: #CCC;
}
pre {
background-color: #333;
margin-left: 3em;
margin-right: 3em;
}
h2:before {
content: "$ ";
color: #44e;
}
a:visited,
a:active,
a:link {
color: #82b0fd;
}
a:hover,
a:focus {
color: #ffb080;
}
</style>
</head>
<body>
<h1>Various Random Doodles by <a href="http://games.greggman.com">Greggman</a></h1>
<div class="doodle">
<h2>Slime Simulation</h2>
<p>Inspired by <a href="https://www.youtube.com/watch?v=X-iSQQgOd1A">this amazing videoM</a> by <a href="https://www.youtube.com/channel/UCmtyQOKKmrMVaKuRXz02jbQ">Sebastian Lague</a>
I thought I'd see if I could reproduce his results in WebGL2. In his example he uses compute shaders but WebGL2 doesn't have compute shaders so I used the techniques mentioned
<a href="https://webgl2fundamentals.org/webgl/lessons/webgl-gpgpu.html">here</a>.
</p>
<p>
The simple explanation is there are N particles, each with a position and direction. They move every frame each drawing a single pixel, so they effectively leave trails
in the image. The image has a post processing affect to spread the trails out (blur) and fade them out to black over time. Added to that, each particle looks forward, left,
and right a few pixels ahead of its direction and turns a random amount toward which ever of those 3 directions is brightest. That's it.
</p>
<p>One big optimization is instead of <code>sensorSize</code> being used to decide how large an area of pixels when sensing (that's extremely slow), instead I generate a mipmap
and <code>sensorSize</code> is just a bias for which level of mips to use. It's not exactly the same but at a glance I mostly did't notice a difference and it's significantly faster.
You can try a version that scans <a href="https://jsgist.org/?src=a18a1dc959a83b04c44d09cb59670f04">here</a>. On my 2014 MBP it runs too slow (10/15fps)
</p>
<p>Another optimization is the option to use 8bit textures. That is also significantly faster. For most examples I don't notice much of a difference in results.
One obvious place would be if you set <code>trailWeight</code> above 60</p>
<p>This brings up one major difference which is my coloring is not nearly as pretty as Sebastian's. Would love to know what I'm doing wrong. The output of the simulation
is just a grayscale texture. I applying <a href="https://www.google.com/search?q=photoshop+gradient+map">a gradient map</a> which basically maps each of the gray values
to some color gradient. Maybe I just need to experiment with more/better gradients.
</p>
<p>Update:</p>
<p>I decide to make a WebGL1 version as well which uses <a href="https://webglfundamentals.org/webgl/lessons/webgl-gpgpu.html">these techniques</a>.
It's funny though that the WebGL2 version is more likely to work on mobile. This is because the WebGL2
doesn't need floating point textures because it can do the particle math using the <i>transform feedback</i>
feature of WebGL2. The WebGL1 version requires floating point textures which are not available on mobile.
There are ways to work around that problem but I was not interested in trying. WebGL2 exists on the majority
of android devices and it's behind a flag in Safari 14. Hopefully it will be enabled by default by Safari 15.</p>
<div class="link"><a href="slime/slime.html">slime simulation (WebGL2)</a></div>
<div class="link"><a href="slime/slime-webgl1.html">slime simulation (WebGL1)</a></div>
</div>
<div class="doodle">
<h2>3d-grid-video</h2>
<p>Inspired by the Secret Sky Music Festival. It just uses a low-res video to set the height and color of a grid lines.
<span class="warning">warning: there is sound!</span> To stop close the tab or press back<p>
<div class="link"><a href="3d-grid-video.html">3d-grid-video 1</a></div>
<div class="link"><a href="3d-grid-video.html?url=videos/jbns-credits-ld.mp4">3d-grid-video 2</a></div>
<div class="link"><a href="3d-grid-video.html?url=https://webglsamples.org/color-adjust/sample-video.mp4">3d-grid-video 3</a></div>
<p>PS: I'm not 100% sure about the license on the videos.
I made them myself on my PS4 using the PS4's OS built in feature which is there entirely for sharing and let's
users upload directly to various video sharing sites as well as copy to USB.
But, they are of a <a href="http://www.justshapesandbeats.com/">copywritten game</a> with copywritten music. They are fairly low-res.
so I'm just crossing my fingers it's ok to post them here.</p>
</div>
<div class="doodle">
<h2>webgl-threejs-multiple-windows</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/niEejN8dYTg?si=4xYsdbAbBiDb5hUc" title="ThreeJS multiple windows" frameborder="0" allow="encrypted-media; web-share" allowfullscreen></iframe>
<p>Resurrecting an old example I wrote about using WebGL via three.js across multiple windows. It used to be part of the three.js examples but was removed</p>
<p>It shows an example of having multiple windows with different views into the same scene, like for example a 3D editor like Maya would allow</p>
<p>Click <b>create for new window</b> in the top left then drag a sphere. The windows stay in sync. You can create more than one extra window</p>
<div class="link"><a href="webgl_multiple_windows.html">webgl-threejs-multiple-windows</a></div>
</div>
<div class="doodle">
<h2>syncThreeJS</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ef20wKxt5aY?si=Cafo8Dv3o3esu7x6" title="syncThreeJS" frameborder="0" allow="encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>
<p>A port of <a href="https://github.com/greggman/hft-syncThreeJS">https://github.com/greggman/hft-syncThreeJS</a> that only works on the same machine without <a href="https://docs.happyfuntimes.net">happyFunTimes</a>.
<a href="https://github.com/greggman/hft-syncThreeJS">The Original</a> syncs across machines using <a href="https://docs.happyfuntimes.net">happyFunTimes</a>
</p>
<p>This a similar technique to the one used for <a href="https://webglsamples.org/aquarium/README.html">the multi-screen webgl aqaurium</a>.
<p><b>Be sure to open multiple windows!!!! and move and resize them so you can see all of them at once</b></p>
<div class="link"><a href="syncThreeJS/syncThreeJS.html">syncThreeJS</a></div>
</div>
<div class="doodle">
<h2>draw with 3D CSS</h2>
<p>This was a test to learn how to get canvas relative positions even with CSS transforms.
The result is spelled out in <a href="https://gist.github.com/greggman/c28bfbe50f6a27e53626a6860cf168a3">this gist</a>.
</p>
<div class="link"><a href="test/3d-css-and-offsetXY/3d-css-and-offsetXY-working.html">working example, drawing with 3D CSS</a></div>
</div>
<div class="doodle">
<h2>gridzoom</h2>
<p>For a stackoverflow question: How to draw a grid that adds / removes detail as you zoom in and out.</p>
<p>Basically it just draws 2 grids. One for the "current" zoom level and one at 10x that zoom level
and fades them out as a transition. The important code is probably the part that decides what the current
zoom level is. <code>zoom</code> is the distance from the origin that goes from 0.0001 to 10000 in this example.</p>
<pre>
const gridLevel = Math.log10(zoom * zoomAdjust);
const gridFract = euclideanModulo(gridLevel, 1);
const gridZoom = Math.pow(10, Math.floor(gridLevel));
</pre>
<p><code>gridLevel</code> is then the power we need to raise 10 to for our current zoom level. <code>gridFract</code>
is a linear interpolation from 0 to 1 between the current 2 levels we can use for deciding how much to fade. <code>gridZoom</code> is
effectively the scale to draw our grid.</p>
<p>This code computes the alpha values to use for the 2 grids</p>
<pre>
const alpha1 = Math.max((1 - gridFract) * 1);
const alpha2 = Math.max(gridFract * 10) - 1;
</pre>
<p><code>zoomAdjust</code> is 1. but you can change it to decide where the transition between grids happens.</p>
<div class="link"><a href="gridzoom.html">gridzoom</a></div>
</div>
<div class="doodle">
<h2>group camera</h2>
<p>This was some experiments in trying to make a camera that shows a group
of players. Drag the 3 blue dots and see the camera try to show them.
Unfortunately I never got it to work. The idea was to try to show them from
the best angle so I never want them to line up behind each other but, the
problem is which side to look from ends up swinging wildly which is no good.
This is probably a solved problem written in some book on game dev but I
actually don't know a game that has solved this. Most games either let
the user control the camera, OR, they put the camera behind the player
and let him drag it as though it's on a rope, OR, the pick a fixed angle
and at most zoom in and out without changing the direction of the camera.
If you know of a solution post an <a href="https://github.com/greggman/doodles/issues/">issue</a>.</p>
<p>
<a href="group-camera.html">group camera</a><br/>
<a href="group-camera-02.html">group camera 02</a>
</p>
</div>
<div class="doodle">
<h2>html5 webcam iframe issue</h2>
<p>This shows an issue in Chrome (at least still as of v66) that is that
when asked if a webpage can use your camera (or your mic) that permission
is permament. You can see why you'd might want this. Using Google Hangouts
or Facebook messenger maybe you just want the camera to work.</p>
<p>Unfortunately it has a bunch of issues.</p>
<p>The biggest first and that is that the permission is for the domain and
works in iframes. So, some site says "Check out this cool circus mirror demo"
and you click to enable the camera. Now that same domain can embed invisible
iframes all around the net in ads that turn on your camera/mic and spy on you.</p>
<p>Another issue related issue is user expectation. When I run Facetime on my
my phone I expect the camera to come on. When I go to randomsite.com I don't.
So, before I run the facetime app I'll make sure I'm presentable. Where as
when I go to randomsite.com I will not. Randomsite.com/old-post.html might have had a camera
demo I viewed year ago. Randomsite.com/new-post.html might have a site that takes
a picture immediately and uploads it publically. Maybe it's called "what I'm doing
now" that takes a pic and immediately uploads to imgur for fun. But I didn't
know my picture was going to be taken yet randomsite.com has permission to use
my camera at anytime once I've given it permission once.</p>
<p>It seems to me browsers should treat the camera just like GPS. They should
ask for permission EVERY SINGLE TIME. There should maybe be the option to
give permanent permission but the default should be every time. Firefox
has those options. Chrome does not.</p>
<p>
<a href="html5-webcam.html">html5 webcam</a><br/>
</p>
</div>
<div class="doodle">
<h2>no box skybox</h2>
<p>I'm surprised people still use skyboxes in 3d. They
make a 3d cube and map a texture to the inside and then go through
various contortions to render that without clipping issues etc.</p>
<p>It seems like a simpler solution is just to render a cubemap
to a plane with a very simple shader. The plane won't have any clipping
issues</p>
<p>I have a feeling the reasons are (1) tradition. It worked before shaders
so why change. And (2) asset pipeline. If you have a system to import
models and the textures they use then adding a cube model with textures
just works where as to use this method you'd need at least some way
of tagging the model to use a custom shader.</p>
<p>In any case I wrote this back when I first started doing <a href="https://webglsamples.org">webgl stuff</a>.
I put an example on <a href="https://twgljs.org">twgl</a> and then here's a three.js example.</p>
<div class="link"><a href="no-box-skybox.html">no box skybox</a></div>
</div>
<div class="doodle">
<h2>Overdraw</h2>
<p>Someone asked about GPU perf and overdraw. This example shows how
GPUs are not really that fast. Or rather that we're asking them to
do a lot of work and that can really add up.</p>
<p>This sample just draws simple fullscreen quads with very simple shaders.
Up the count to draw more. You'll see even fast GPUs can't draw that
many before not being able to reach 60fps. Increase the value slowly
else your OS might reset your GPU.
</p>
<div class="link"><a href="overdraw.html">overdraw</a></div>
</div>
<div class="doodle">
<h2>x-ray</h2>
<p>Someone asked how to make an x-ray-ish looking image. You can get that
by making this brighter when their viewspace normal is perpendicular to
the view.
</p>
<p>
<a href="x-ray.html">x-ray</a><br/>
<a href="x-ray-02.html">x-ray 02</a>
</p>
</div>
<div class="doodle">
<h2>natural hallucinoen</h2>
<p>adapted from <a href="https://29a.ch/hallucinogen/">here</a></p>
<div class="link"><a href="natural-hallucinogen.html">natural hallucinoen</a></div>
<div class="link"><a href="http://glslsandbox.com/e#31330.0">GLSL version</a></div>
</div>
<div class="doodle">
<h2>shapeplay</h2>
<p>Just goofin</p>
<div class="link"><a href="shapeplay-01.html">shapeplay 01</a></div>
</div>
<div class="doodle">
<h2>picking distinct colors</h2>
<p>For <a href="http://docs.happyfuntimes.net">HappyFunTimes</a> I need to pick
unique colors for each player. I have no idea when I start how many players will be playing.
Players come and go as a game progreses. So for example I can't evenly space the colors since
I don't know up front how many players there will be. But, even spacing the colors evenly
isn't enough, after about 8 colors they start to blend together. So I need to do something else,
make them darker or make them saturated.
</p>
<p>
Of course ideally each game would let you choose a character or assign you one. So if there are 8
characters + 8 colors that's probably enough. <a href="http://greggman.github.io/hft-tonde-iko">Tonde-Iko</a>
did this with something like 12 characters to pick from. It also let the players pick the character and
their own color but of course that was a bunch of work to implement.
</p>
<p>Another idea is to use patterns. One player gets a solid color, another stripes, another checkers or an outline or
something. <a href="http://github.com/greggman/hft-powpow">PowPow</a> tried to do that. Watching players
play I'm not sure it was successful. Of course maybe the issue with that is more the game and less
the colors of player. On Tonde-Iko with 6 screens and knowning where you start it's easy to just look
at your character alone where as on Powpow is relatively hard to pick yourself out. You have to really
be concentrating.
</p>
<p>I needed to see what colors were being picked and experiement with picking algorthms. I can't really
say I succeeded but at least I can visualize the colors</p>
<div class="link"><a href="picking-colors.html">picking-colors</a></div>
</div>
<div class="doodle">
<h2>tween</h2>
<p>Tweening probably has many defintions. I heard one guy call it mapping as in mapping one
range to another range. I've always called that lerping. The simplest lerp is something like</p>
<pre>
value = start + (end - start) * lerp
</pre>
<p>Then given <b>lerp</b> goes from 0 to 1 <b>value</b> will go from <b>start</b> to <b>end</b>.</p>
<p>People have come up with easing functions so instead of linearally going from 0 to 1 you get
some kind of ease in or ease out or both.<p>
<pre>
value = start + (end - start) * easingFunc(lerp)
</pre>
<p>Where easingFunc might be something like</p>
<pre>
function easingFunc(lerp) {
return (-0.5 * (Math.cos(Math.PI * lerp) - 1));
}
</pre>
<p>This gives you a nice ease in and ease out.</p>
<p>I'd been doing that for years but I'd always hand coded it meaning I'd just put in code calls directly to
the easing functions where I needed them.</p>
<p>Recently I saw this <a href="https://www.youtube.com/watch?v=Fy0aCDmgnxg">pretty cool presention about making your game "juicy"</a>
and I decided to look into the code a little to see what ideas to learn from and the big one I came away with from
<a href="https://github.com/grapefrukt/juicy-breakout">looking at their code</a> was using a tweening library.</p>
<p>
Basically a tweening library lets you create tiny mini tasks that lerp some value over time for you. What makes
them useful is you can just fire and forget. Much easier than hand writing each case.
</p>
<p>
So anyway I wrote my own tweening library and have been playing around with it.
</p>
<div class="link"><a href="tween.html">tween</a></div>
<div class="link"><a href="tweeny-graph.html">tweeny easing functions</a></div>
</div>
<div class="doodle">
<h2>wave-text</h2>
<p>Just goofin</p>
<div class="link"><a href="wave-text-01.html">wave-text 01</a></div>
</div>
<div class="doodle">
<h2>fov-checker</h2>
<p>My math sucks. I needed to convert from field of view Y to field of view X. It googled it, found
an answer on stack overflow. The marked answer was <b>WRONG!</b> :P One of the unmarked answers
was correct. I mentioned it to the guy about the wrong answer. With just a little thought it
was clearly 100% wrong. His first response was effectively, don't blame answers you don't like on
the math. The math is correct. I wrote this to show him it wasn't
</p>
<div class="link"><a href="fov-checker.html">fov-checker</a></div>
</div>
<div class="doodle">
<h2>Textme</h2>
<p>This was an attempt at making a glyph postprocessing effect to turn whatever is
being displayed into text.</p>
<p><a href="textme01.html">textme01</a>: First step, make a grid of letters</p>
<p><a href="textme02.html">textme02</a>: Second step, organize by brightness</p>
<p><a href="textme03.html">textme03</a>: Third step, support different glyphs</p>
<p><a href="textme04.html">textme04</a>: Fourth step, render with it</p>
<p><a href="textme05.html">textme05</a>: Fifth step, add more levels through double indirection</p>
<p><a href="textme06.html">textme06</a>: Sixth step, render with it</p>
<p><a href="textme07.html">textme07</a>: Seventh step, try just brightness, no corners.</p>
<p><a href="textme08.html">textme08</a>: Eighth step, render with it</p>
<p><a href="textme09.html">textme09</a>: Ninth step, add inverse and clip glyphs.</p>
<p><a href="textme10.html">textme10</a>: Tenth step, render with it</p>
<p>Note: under <b>glyphs</b> de-select <b>ascii</b> and select <b>boxElements</b> and <b>geometricShapes</b>. Also
under <b>debug</b> select <b>dosColors</b>. Try changing the scene as well.
<p>---</p>
<p>
<a href="textme03.html">Originally</a> I thought I'd take 2x2 pixels from the original picture and try to map that do a glyph. So,
I look at the 4 corners of each glyph rectangle and compute a brightness. Then for 8 levels of brightness of each
corner I try to find the best matching glyph. With 8 levels of brightness there are 4096 possible combinations.
For each of those I try to find the best glyph. That's effectively 64x64 glyphs across a texture. If each glyph
is 32x32 pixels that means that's already a giant 2048x2048 texture so I couldn't do more than 8 levels.
</p>
<p>
<a href="textme04.html">It works and sometimes you can even tell it's matching shapes on the edges</a>.
I wasn't totally happy with the results. It seemed like the system was quite often picking the same glyph
as the closests match for some combination of colors. For example if you <a href="textme03.html#%7B%22glyphOptions%22:%7B%22checker%22:false,%22shade%22:true,%22weighNeighbors%22:false,%22glyphSets%22:%5B%22ascii%22%5D,%22fontOptions%22:%7B%22font%22:%2220px%20monospace%22%7D%7D,%22fontOptions%22:%7B%22font%22:%22monospace%22,%22fontSize%22:20%7D%7D">
check this example</a> where it shows each glpyh over the 2x2 brightness levels it most closely matches you'll see
'[', 't', 'F', and 'T' repeat as the best match in a ton of places.
</p>
<p>
I thought maybe I should say a glyph is brighter if 2 pixels next to each other are on. In other words
<code>**..**</code> is considered brighter than <code>*.*.</code>. That's the weightNeighbors option. But, it
wasn't enough of a help.
</p>
<p>
So... <a href="textme05.html">step05</a>, I tried adding a level of indirection. Instead of making the glyph
texture be 8x8x8x8 make a texture with just each glyph once and then a mapping texture that maps from a 2x2 brightness
to a glyph. In that case I can do 64 levels of brightness because the map will be 64x64x64x64 which is 4096x4096 texture.
</p>
<p>
Unfortunately <a href="textme06.html">it doesn't look much better</a> and it takes way too long to find the
closest match for each 2x2 level of brightness. At 32 levels that's 32*32*32*32 or 1 million 2x2 brighness combinations
for which it needs to find the best matching glyph. It takes 3 to 4 minutes! That's including using a kd-tree to make it faster to search. I never tried 64 levels which is 16 million combinations so that
should take 16 times longer or about 1 hour to compute! Of course I could pre-compute but I wanted
to be able to pick the font at runtime. I also wanted to use the user's fonts which are different on each
browser and OS rather than ship a glyph texture.
</p>
<p>
So...I said to heck with the 4 corners, I'll just do 1 brightness level. I'll just <a href="textme07.html">sort the glyphs by brightness</a>,
put all them in a texture and then map to brightness directly. I still pull out 4 pixels from the original image and
average them to get the brightness when mapping to glyphs. The hope is that gives me 10 bits of brightness instead of just 8.
<a href="textme08.html">It's different but definitely not better</a>.
</p>
<p>
<a href="https://twitter.com/thespite">Jaume Sanchez Elias</a> pointed me to <a href="http://spite.github.io/wagner/assets//ascii/8x16_ascii_font_sorted.gif">this well known? sorted glyph texture</a>.
I noticed it includes all of the characters inversed (black on white instead of white on black). So, I added that, which made me notice the padding around my glpyhs
was really affecting the glyph choices. If there is a border around the glyph then when its inverse is used it will have a white border making it bright.
I had put an option to trim the border call <code>pack</code> so I exposed that. Trimming 2 pixels off each glyph gets
<a href="textme10.html">something similar</a> to <a href="http://spite.github.io/wagner/examples/ascii.html">Jaume's demo</a>.
At least if you look at the sphere you'll see it's fairly evenly shaded with characters.
</p>
<p>
This points out a problem, I have no way to know what size the glyphs are in HTML5. I figure out the
glyph extents by drawing each glyph one at a time to the middle of a canvas and then scan the pixels of
the canvas to compute the extents. You'd think if you ask for a <code>monospace</code> font that all
the glyphs would be the same size or at least no larger that say a `W` or an `M` but as you add in characters
higher up the unicode chart that rule doesn't hold. So, as you add in characters you have to manually bump
the <code>pack</code> value.
</p>
<p>
Anyway, I tried applying the pack and inverse options to the 2x2 version of the glyph postprocessing but
so far it doesn't look any better so I haven't pushed that version.
</p>
<p>
Also under debug is the <code>dosColors</code> option which I really haven't given much thought on how to do it better.
</p>
</div>
<div class="doodle">
<h2>Sketchtext</h2>
<p>an attempt to make lines look like they've been
sketched in a low framerate hand drawn animation kind of way. Still a work in progress.</p>
<div class="link"><a href="sketchtext01.html">sketchtext01</a></div>
</div>
<div class="doodle">
<h2>Scribble</h2>
<p>This was a step on the way to sketchtext. It's was easier to use built in primitives
first rather than figure out how to get the outlines of glyphs from a font.</p>
<div class="link"><a href="scribble01.html">scribble01</a></div>
<div class="link"><a href="scribble02.html">scribble02</a></div>
</div>
<div class="doodle">
<h2>Atom</h2>
<p>Not sure what this is. Just goofin</p>
<div class="link"><a href="atom03.html">atom03</a></div>
<div class="link"><a href="atom02.html">atom02</a></div>
<div class="link"><a href="atom01.html">atom01</a></div>
</div>
<div class="doodle">
<h2>Lightball</h2>
<p>A work in progress that started as <a href="http://stackoverflow.com/a/28471031/128511">an example to an answer on SO<a>.</p>
<div class="link"><a href="lightball03.html">lightball03</a></div>
<div class="link"><a href="lightball02.html">lightball02</a></div>
<div class="link"><a href="lightball01.html">lightball01</a></div>
<p><a href="http://stackoverflow.com/users/868679/brendan-annable">Brendan Annable</a> suggested moving
the vertices behind the camera in the vertex shader instead of discarding in the fragment shader
because that would be faster. The GPU will clip the triangle instead of trying to draw every pixel
and having it get discarded. So, here's those versions.</p>
<div class="link"><a href="lightball03-vertex-shader-discard.html">lightball03-vertex-shader-discard</a></div>
<div class="link"><a href="lightball02-vertex-shader-discard.html">lightball02-vertex-shader-discard</a></div>
<div class="link"><a href="lightball01-vertex-shader-discard.html">lightball01-vertex-shader-discard</a></div>
</div>
<div class="doodle">
<h2>Sort</h2>
<p>
A sort visualizer <a href="http://www.youtube.com/watch?v=kPRA0W1kECg">inspired by this video</a>.
</p><p>
Mostly I had just never personally implemented a quicksort. I first
googled "quicksort explained" which bought up
<a href="http://www.youtube.com/watch?v=Z5nSXTnD1I4?">this AWESOME video that
extermely clearly explains the algorithm</a>. So I implemented that.
</p><p>
But, then I found <a href="http://www.sorting-algorithms.com/">this page
which shows a bunch of algorthms and it has them detailed very tersely</a>.
Their quicksort is nothing like the one in the video above. Their's moves
a random `pivot` through the array going only to the right where as the one
above uses the left most element as its `pivot`, takes it out of the array
and uses left and right pointers to move stuff before and after the pivot
finally inserting the pivot in the space found.
</p><p>
The LR one appears to be much faster than the right only one. I also don't quite
get the point of choosing a random pivot. I suppose it's to try to avoid the worst
case which I think is an inversely sorted array and starting from element #1. I'm sure
somewhere on the net explains why a random pivot is best for algo #2. I'm a little
worried there's a bug because the non LR one take so long on the uniform array example.
</p><p>
Anyway, I added a bunch more including the quicksort 3 way partition. I also added
cycle times but they make no sense currently. It's basically 2 cycles for a load,
3 for a store, 1 for a compare though a compare includes a load so it's 3 cycles.
But cache hits are not currently taken into account nor are a few array accesses
in the algos. Maybe the only thing you care about is array accesses and cache
misses in which case I should remove the various set, cmp, copy, swap stuff and
just add have get/put and count cycles and try to guess cache hits.
</p>
<div class="link"><a href="sort.html">sort.html</a></div>
</div>
<div class="doodle">
<h2>Circles</h2>
<p>
Inspired by an exhibit I saw about
<a href="http://en.wikipedia.org/wiki/Marcel_Duchamp">Marcel Duchamp</a>
at the Moderna Museet in Stockholm.</p>
</p>
<div class="link"><a href="circles.html">circles.html</a></div>
<p>
Some samples:
</p>
<div class="link"><a href="http://goo.gl/s8jsf7">http://goo.gl/s8jsf7</a></div>
<div class="link"><a href="http://goo.gl/IiIyng">http://goo.gl/IiIyng</a></div>
<div class="link"><a href="http://goo.gl/95hWX6">http://goo.gl/95hWX6</a></div>
</div>
<div class="doodle">
<h2>Spirograph</h2>
<p>
Inspired by Spirograph toys.
</p>
<div class="link"><a href="spirograph.html">spirograph.html</a></div>
<p>
Some Samples:
</p>
<div class="link"><a href="http://goo.gl/MJ9dwc">http://goo.gl/MJ9dwc</a></div>
<div class="link"><a href="http://goo.gl/vSgnT7">http://goo.gl/vSgnT7</a></div>
<div class="link"><a href="http://goo.gl/vvZq0N">http://goo.gl/vvZq0N</a></div>
<div class="link"><a href="http://goo.gl/yp5B4j">http://goo.gl/yp5B4j</a></div>
</div>
<div class="doodle">
<h2>Missile-Command</h2>
<p>
Written to demonstrate how the original Missile Command was created.
</p><p>
Most games today erase the entire display every frame. Back when Missile
Command was created machines were not fast enough to draw the entire
display in pixels at 60 frames per second. So, Missile Command never
erases the display. Missiles or Bombs are just a line drawing function
drawing the lead pixel and then erasing that lead pixel with a trail
pixel. This leaves the trail drawing only 2 pixels per frame per
bomb/missile. To erase the trail the line is draw again with black.
</p><p>
The explosions similarly only draw the outer edge of the circle. Because
nothing is erased the circle expands. To clear the explosion black
circles are drawn in the opposite direction.
</p><p>
These techniques make the game fast even on the 1mhz machine it was
originally written on. They also give some of Missile Command's
distinctive looks like when two explosions overlap one will start erasing
the other leaving crescent shapes. In this case though I'm using
HTML5's Canvas arc function to draw the circle. The original Missile
Command likely used a 1 pixel thick function to draw the circle.
Unfortunately HTML5 Canvas has no way to draw circles exactly 1 pixel
thick. I could implement my own circle function but I was too lazy.
</p><p>
The glowing colors were achieved back in the 80s by color cycling or
rather the system could only display 4 colors but you could choose
which 4 colors. By changing 1 of the 4 colors every frame to a different
color you'd get a glowing color "for free". Almost zero work on the part
of the processor. Systems today with their 24bit color displays can't
really do color cycling. To simulate color cycling requires re-drawing
every pixel that changes color either directly or through various GPU
techniques. Since Missile Command only really needs 1 glowing color
I achieve the glow by changing the background color of the canvas every
frame and filling it with opaque black. I draw the tips of the missiles
and the explosions by setting pixels to 0,0,0,0. This makes them show
the through to the background color. Since it's changing every frame
I get "free" glowing similar to the color cycling technique from the 80s.
</p>
<div class="link"><a href="missile-command.html">missile-command.html</a></div>
</div>
<div class="doodle">
<h2>Emoji-Draw</h2>
<p>
Just wanted to see if canvas supports drawing with emoji.
Yes on Safari 7+, FF 29+. No on Chrome as of v34.
</p>
<p>
Update: not sure when but Chrome now works.
</p>
<div class="link"><a href="emoji-draw.html">emoji-draw.html</a></div>
</div>
<div class="doodle">
<h2>Rects</h2>
<p>
Inspired by some t-shirt I saw at Design Festa 39
</p>
<div class="link"><a href="rects.html">rects.html</a></div>
</div>
<div class="doodle">
<h2>Tree-Color</h2>
<p>
Same as tree but each level is a different color.
</p>
<div class="link"><a href="tree-color.html">tree-color.html</a></div>
</div>
<div class="doodle">
<h2>Tree</h2>
<p>
Generating a simple tree.
</p>
<div class="link"><a href="tree.html">tree.html</a></div>
</div>
<div class="doodle">
<h2>Fork</h2>
<p>
Playing around with a forking structure.
</p>
<div class="link"><a href="fork.html">fork.html</a></div>
</div>
<div class="doodle">
<h2>Faces</h2>
<p>
Just a few types of eyes, eyebrows and mouths can generate many expressions
</p>
<div class="link"><a href="faces.html">faces.html</a></div>
</div>
<div class="doodle">
<h2>Tests</h2>
<div class="link"><a href="tests.html">tests</a></div></div>
</body>
</html>