Wasting CPU cycles and finding rendering glitches

Wasting CPU cycles and finding rendering glitches

Sometimes, I get bored and make things for the sake of art rather than any sort of usability. This usually involves a piece of paper or occasionally a bit of canvas, but now and then it happens in an electronic venue. One such example was the morbo silliness last April.

Well, tonight, I have another one. A couple of nights ago, I was chatting with a friend and somehow we got onto the topic of Pascal's triangle. I had first encountered it long ago at this weird Saturday math fair thing, and oddly enough, that's where I also first learned about modulo arithmetic. They had us take the numbers mod the number of distinct colors we had (to make it "wrap around"), and then fill in a graph accordingly. It made some nice patterns.

From there, it was a hop, skip and a jump to the Sierpinski triangle. I honestly have no idea how I first encountered this thing, but I did remember a weird little nugget about how to generate it. Someone told me this a long time ago, and I remembered it for some reason. Here's how it goes.

Let's assume you have a die from a board game handy. Put three dots on your paper. Call one of them "1 or 2", another "3 or 4", and the last "5 or 6". Now put your pencil somewhere inside the triangle this forms and roll the die. Depending on what you roll, move your pencil halfway to the appropriate dot, and put a mark there. So, if you rolled a 1 or a 2, you'd move halfway to that first dot. If you had rolled 3 or 4, you'd move halfway to the second dot, and so on.

Anyway, just you keep doing this, hopping around (hopefully) randomly, leaving dots, and such. If you do this enough times, sooner or later you start getting a nice little pattern.

So, I had remembered all of this, but had no way to test it out. I've never been much for wrangling graphics, and the last time I played with such things was when I still had a graphing calculator left over from my days in school. All of this computing hardware around me is largely dealing with text-based creations of mine, at least when it comes to programs.

I decided to use this opportunity to try to better understand the HTML5 canvas, and at the same time, see if my memory was accurate. It turns out that dropping a dot on a canvas is just a matter of drawing a filled circle, and that's just a matter of drawing a full arc. There are plenty of examples around, so it didn't take long to figure out.

The hardest part was trying to do the whole "halfway to the target" calculation. It turned out to just be the average of the two end points for each axis, and the math nerds out there are probably facepalming right about now, but hey, this is not my thing. I don't do this every day.

So now I knew how to drop a dot and knew where to put it. The rest was just a matter of some JavaScript wrapper stuff to make it run all by itself. Then I sprinkled in some color randomization to make it pretty and finally added some silliness involving opacity to simulate fading.

Without further ado, here it is. I've probably made a whole bunch of dumb mistakes, but for this kind of stuff, I honestly don't care. Enjoy it, or don't. It is what it is.

There's an interesting side note here: I tested it in Firefox, Chrome, and Safari, and they all behave slightly differently when subjected to changing conditions. To see what I mean, grab the corner of your browser window and resize the whole thing. Then notice what happens to the text. Firefox reflows it uneventfully while Safari actually scales the text this way and that, but the real fun comes with Chrome.

When you resize that page on Chrome on my system, it starts glitching and actually blows away some of the words (the "blah blah" stuff). Maybe I'm doing something horribly evil in my page, but it's still humorous to see how it reacts to a changing window. What's better is that it seems to matter how quickly I resize it. A slow expansion will mostly leave blank space behind, whereas a fast one will seemingly give it a chance to redraw the words.

I have no idea what's going on there. I'll just chalk it up to yet another wacky failure mode I've managed to expose in software.

Missed the link above? Here it is again. Have fun!