28.12.13

I was recently flexing my Star Trek trivia muscles when I suddenly had a CAPTCHA related epiphany.

There is a Star Trek TNG episode called The Game where some of the crew gets hooked on a game, which provides satisfaction to the user who drags and drops something circular into another circular something.

Anyway, I thought of the bouncing ball CAPTCHA idea where the user has to bounce the ball and hit a particular obstacle with random coordinates in the process to prove their humanity instead of repeating a string of characters.

It sounds very nice in theory but in practice it requires a lot of consideration. For example, the coordinates of the particular obstacle must not appear in the HTML source code, or otherwise a simple scraper will be able to pass the CAPTCHA every time. In addition, the coordinates should not be easily reproduced with any function.

The whole idea behind the bouncing ball was to make the CAPTCHA experience more pleasant but it wasn't very pleasant for me because I had to code it and in the process I discovered that apparently I can't hit a target even if I rig the physics of the ball.

So I opted out for dragging and dropping of circular objects into other circular objects just like in the Ktarian game in that episode. I call it BubbleCAPTCHA

The idea is simple: drag the ball to the darkest circle to prove your humanity.

Once again this CAPTCHA uses the wonderful properties of transparency and overlapping colour.

The intersection of dark coloured circles with various levels of transparency becomes the darkest point in the image. When light coloured circles overlap dark coloured circles, the overlapping area gets lighter

This is how a simple problem for humans becomes a nightmare for current bots. The human eye can easily differentiate between the darkest transparent circle, partially covered by lighter circles and the intersection of circles, which becomes the darkest point in the image when there are 3 or more colours overlapping.

When a user visits a page with the BubbleCAPTCHA, a unique CAPTCHA is generated on the server side and the coordinates of the darkest circle are temporarily stored in a db table and only retrieved if the user provides correct unique reference id along with some trial coordinates.

The user generates the trial coordinates by dragging the ball to the generated CAPTCHA below the canvas where the ball is drawn. If the trial coordinates are within the stored coordinates within the given timestamp and within the given reference id, the user passes the CAPTCHA.

There are a lot of things to be considered here and I'm planning to consider them in the next few days.

Demo below. BubbleCAPTCHA Beta .