"CAPTCHA: Prototype" or another attempt to avoid deciphering captcha

Probably every web programmer was thinking about how to get rid of annoying anti-spam pictures, which in the sense should stop bots spammers, but actually scare away real visitors. While working on another HTML5 + JS + canvas article, the idea of ​​a new prototype of protection against bots came up. This idea is nothing but another variation of the captcha itself, but this time without stupid "guessing" of characters.




')

How it works?

In order to pass the anti-bot check, the user is prompted to click on the circle of a certain color. Here you can immediately add that this is just a prototype, and is put up for public discussion in order to at least somehow move from the dead center of the captcha monopoly. Circles are drawn on canvas. In my example, they are drawn directly in JavaScript. In the working version, it is supposed to draw them on the server side, and only the finished picture is drawn onto the canvas.

The whole prototype itself can be found on a githaba .

In the meantime, I will describe the main methods used to implement:
1. Create a certain array of colors of the future circles.

this.colors = ["red", "green", "blue", "pink", "yellow", "orange", "violet"]; 

2. We generate the circles themselves.

 generateObjects = function(g) { var used = []; var used_ = []; //   var colors = shuffle(self.colors); //    ,     var howMuch = rand(3, colors.length); for (var i = 0; i < howMuch; i++) { var centerX = rand(10, self.width); var centerY = rand(10, self.height); var radius = rand(10, 15); g.beginPath(); g.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); g.fillStyle = colors[i]; g.fill(); g.lineWidth = 1; g.strokeStyle = colors[i]; g.stroke(); used.push(colors[i]); used_.push({ x: centerX, y: centerY, //  ,       r: radius }); } //          var a = rand(0, howMuch - 1); self.active = used_[a]; return used[a]; }; 

3. In order to determine the intersection of clicking and circle, use two methods.

 mouseReleased = function(dim) { //     lib/captcha_listener.js dim.x = dim.x - $(self.canvas).offset().left; dim.y = dim.y - $(self.canvas).offset().top; //  ,       "" if (self.inBounds(dim)) { //    $(".captchaResult").val(dim.x + ":" + dim.y); //      POC,    ,        if (self.inCircle(dim)) { alert("nice!"); } else { alert("bot..."); } } }; 

Check inCircle () itself

 inCircle = function(dim) { var a = self.active; //     ,      // NB!  -    ,         var x0 = ax - ar; var x1 = ax + ar; var y0 = ay - ar; var y1 = ay + ar; if (x0 <= dim.x && dim.x <= x1 && y0 <= dim.y && dim.y <= y1) { return true; } else { return false; } }; 

And actually our freshly baked captcha looks like this:


Unfortunately, such a captcha will be a problem not only for bots, but also for people who do not distinguish colors.

I’m happy to hear suggestions about captcha. Feel free to make forks if you like the idea. Let me remind you that this is only a prototype of what can be created from this idea.

UPD.: After the first comments on the article, the idea to add color noise to this captcha appeared.