Pixel Indexing

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js"></script>
<canvas id="image_canvas" width="590" height="469"></canvas>

JavaScript

var index = ['#FCF0AD', '#E9E74A', '#EE5E9F', '#FFDD2A', '#F59DB9', '#F9A55B', '#D0E17D', '#36A9CE', '#EF5AA1', '#AE86BC', '#FFDF25', '#56C4E8', '#D0E068', '#CD9EC0', '#ED839D', '#FFE476', '#CDDD73', '#F35F6D', '#FAA457', '#35BEB7', '#D189B9', '#99C7BC', '#89B18C', '#738FA7', '#8A8FA3', '#82ACB8', '#F9D6AC', '#E9B561', '#E89132', '#DA7527', '#DEAC2F', '#BAB7A9', '#BFB4AF', '#CDC4C1', '#CFB69E', '#D0AD87'];
var block;
var colors = [];
var color;
var colorIndex = {};
index.forEach(function(hexColor){
    colors.push(new Color(hexColor));
});

function colorDistance(color, candidate){
    return Math.sqrt( Math.abs(color[0] - candidate[0])^2 + Math.abs(color[1] - candidate[1])^2 + Math.abs(color[2] - candidate[2])^2 );
};
var count = -100000;
function closestColor(color){
    var distance;
    var newDistance;
    var finalColor;
    colors.forEach(function(indexColor){
        newDistance = colorDistance(color, indexColor);
        if(count > 0 && count < 2000){ console.log('! '+color.hex+' '+indexColor.hex+' '+newDistance+' ? '+distance); }
        count++;
        if(newDistance < distance || !distance){
            distance = newDistance;
            finalColor = indexColor;
        }
    });
    //console.log('! '+finalColor.hex+' '+color.hex);
    return finalColor;
}
function indexPixel(imageData, x, y) {
    block = (x + y * imageData.width) * 4;
    color = closestColor($RGB(imageData.data[block+0], imageData.data[block+1], imageData.data[block+2]));
    if(count > 0 && count < 2000) console.log(imageData.data[block+0], imageData.data[block+1], imageData.data[block+2]);
    if(count > 0 && count < 2000) console.log(color[0], color[1], color[2], color);
    imageData.data[block+0] = color[0];
    imageData.data[block+1] = color[1];
    imageData.data[block+2] = color[2];
    imageData.data[block+3] = 1;
}

function IndexImage(){
    var img = new Image();
    var canvas = document.getElementById('image_canvas');
    var context = canvas.getContext('2d');
   ...