Antelope Love Fan

I’m sure most developers out there are familiar with The Daily WTF. I’m also sure most developers are aware of the dirty little secret that we all write bad code sometimes.

This is a chance to share some of my own personal horror stories.

It was 2000 and I was working at my second job after college. I was mostly coding for the PalmOS but dabbled a bit in Classic ASP (VBScript).

One day, I was given the task of writing a script to email several hundred people using an off-the-shelf COM object for email tasks.

The pseudo-code of the script went something like this:

dim emailList
dim emailSender 'The 3rd-party component

emailSender.StartSession()

for each person in emailList
  emailSender.From = emailList.email
  emailSender.Subject = "Whatever"
  emailSender.Body = "Foo"

  emailSender.Send
next

emailSender.EndSession()

Pretty straightforward, right?

What I didn’t realize was that, during a single session, setting the From address actually did an append rather than overwriting the current value.

That meant that, the first time through the loop, the email went to the first person. The second email went to the second person and the first person. The third email went to the third person, second person, and first person. And so on.

Luckily, I was on the list so I immediately noticed that I was getting multiple emails. Unfortunately it ran through half the list before I was able to get IIS stopped.
As you can imagine, we had a lot of really pissed of replies.

Don’t worry about how your bike looks.

Don’t worry about your clothes.

Don’t worry about the weather. If it’s cold, you’ll warm up again. If it’s wet, you’ll get dry again.

Just get on your bike and ride it. Go as fast as you can. Or as fast as you want to.

You don’t need headphones.

Listen to the sounds of the world. The wind whistling in your ears. The sound of your heart pounding in your chest.

If you see someone else on a bike, wave to them.

Don’t worry about mountain bike, road bike, fixie, used, new, fancy brand, department store bike.

People should wave to other people on bikes.

We are brothers and sisters of the wheel and should acknowledge each other as such.

Today we’re going to learn how to manipulate the HTML <canvas> element at the pixel level.

To start, we need a canvas element:

<canvas id=”canvas” width=”640″ height=”480>”
<p>Your browser doesn’t support canvas.</p>
</canvas>

Next get a handle to the canvas element and its 2d context.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Next, we create a ImageData element on the canvas that covers the entire canvas. This is we’re actually going to be drawing our pixels on.

var imgd = ctx.createImageData(canvas.width, canvas.height);

The ImageData element is basically just a big array. Each block of 4 array elements corresponds to a single pixel.

The array indices in each pixel block control the color and alpha transparency as follows:

• i = Red value
• i+1 = Green value
• i+2 = Blue value
• i+3 = Alpha

And here’s a simple function for drawing a single pixel given an x,y value and r,g,b:

var setPixel = function(imageData, point, r, g, b, a) {
    a = typeof a == 'undefined' ? 255 : a;
    i = (point.x + point.y * imageData.width) * 4;

    imageData.data[i  ] = r;
    imageData.data[i+1] = g;
    imageData.data[i+2] = b;
    imageData.data[i+3] = a;
};

Let’s say we wanted to draw a red pixel at 100,100. Given the ImageData element we declared above, we’d call setPixel like this:

setPixel(imgd, {x:100,y:100}, 255, 0, 0);

Notice we’re not passing a value for the alpha transparency. The setPixel defaults the alpha to fully opaque if a value is specified.

A more full-featured setPixel function can be found here. This version accepts HTML hex codes for colors and extends the Object prototype so we call it directly on the ImageData element like this:

imgd.setPixel({x:100,y:100}, ‘#f00’);

Here’s a sample that draws a Sierpinski triangle using the chaos game