Beej's Bit Bucket

Someone on Hacker News asked for a concise description of “prototype” in JavaScript. I gave it a go, but the topic closed before I could post. So I saved it here for posterity.

And then I blew it out and made it considerable less concise, which might or might not be for the best, but you can be the judge of that.

Prototype-based inheritance in JavaScript can be a little bit strange to people accustomed to class-based inheritance, but it really doesn’t need to be difficult to grok. Like so many things, once you “get it”, it seems easy enough.
Read more…

I’m certainly not the first person to consider this, but it’s a simple enough technique for managing CSS that it bears repeating.

The problem: your CSS has a bunch of constants hard-coded in it all over the place, because CSS doesn’t support the concept of variables.

Perhaps the original theme color was #1122ff, and so you have CSS like this, where the string “1122ff” appears about 8 million times in your various CSS files:

#somediv {
    background-color: #1122ff;
}

.othertext {
    color: #1122ff;
}

But then you find out that the new theme color is going to be #2211ff and can you please change it. Sure there’s search-and-replace, but there might be false positives, and it’s not easy to verify that everything replaced well.

But there is a better way!

Read more…

Scratch out the color!

[The demo is the fun part, so just click here now, then come back if you want to know more about the subject. Next time I'll just send people there, and link back to the lengthier description in the blog.  Sorry!]

I haven’t had much time to post lately, but I saw a cool little “scratch off” app go by on Hacker News that I thought could be improved upon by using something in HTML5 canvas known as the “globalCompositeOperation“. So I coded up a demo to show it off.

The globalCompositeOperation affects how canvas drawing routines interact with the data that’s being drawn upon. There are many different operations, but the default is "source-over", which the spec says: “Display the source image wherever the source image is opaque. Display the destination image elsewhere”, which makes a certain kind of sense for what you usually want to do.

Another common mode is "copy", which ignores transparency. As the spec says for “copy”: “Display the source image instead of the destination image.”

But, in fact, there are plenty of modes. And some of them are better-supported than others. For this demo, for example, I wanted to use "source-out". Chrome and Safari seemed to be OK with it, but Firefox just left the canvas blank—not too useful. So instead I fell back on using "source-atop", which I also made to work.

(A completely different approach to this entire problem might be to record the path you’ve drawn and use the clip() method to mask out the image, but I have doubts that would be faster.)

Without further ado, here is the demo.

The geek-chic OpenMP logo.

This is a brief intro to using OpenMP for parallel programming (with what I’ve discovered about it so far). We’ll implement a Mandelbrot Set renderer that runs multicore, and throw in a couple aside-goodies as well (basic supersampling and Mandelbrot continuous coloring).

First, let’s talk parallel programming. The basic idea here is that we have some task that can be split up into parts, and we hand off each of these parts to different CPUs.

Read more…

One of the "copies" of the Mandlebrot Set floating somewhere around its outside edge.

And now for something completely different! The Mandelbrot Set! This is the basis for all those paisley computer fractal pictures we see everywhere, especially when they were popular in the 1990s. For your viewing pleasure, a Mandlebrot explorer app is included, with (Flash) source, right down there in this blog post!  Woo!

In this article, I’m going to talk about how the images are generated, and use that as an example of something I find I do quite commonly: remapping number ranges. High excitement, there.

I do apologize in advance that this post is a bit mathy. Now, I was never particularly good with math, so I figure that if I’m grasping it, it must be pretty straightforward (the actual manipulations never get beyond elementary algebra.) But it’s not as easy reading as, say, Captain Blood. If you don’t care for math, I encourage you to just jump, guilt-free, down to the pseudocode and the app! Enjoy!

Read more…