用平铺估算面积

Question

孩子可以尝试使用标记和方格纸。用瓷砖进行面积估算，这让我想到了这个问题：https://math.stackexchange.com/questions/978834/area-estimation-with-tiling

我在<canvas>中编写了一个简单的代码，它查看了瓷砖的左上角像素，如果颜色不是红色，则会将瓷砖变为蓝色。

问题：如何改进AI以便仅丢弃含有少于50％红色的瓷砖？我需要一个平均（颜色密度）函数来确定这个吗？

这是我的fiddle代码，黑色边框。实际面积为3750单位。当然，如果我减小了瓷砖尺寸，它会更接近实际区域（读取：微积分 - 对于一个孩子来说太快了）。

var sourceHeight = 90;
var sourceWidth = 300;
var pixelation = 10;
var tile_count = 0;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.moveTo(50, 75);
ctx.lineTo(200, 75);
ctx.lineTo(100, 25);
ctx.lineTo(50, 75);
ctx.fill();
ctx.fillStyle = 'lightgreen';
ctx.rect(0, 0, sourceWidth, sourceHeight);
ctx.fill();

var imgData = ctx.getImageData(0, 15, sourceWidth, sourceHeight);
var data = imgData.data;
for (var y = 0; y < sourceHeight; y += pixelation) {
    for (var x = 0; x < sourceWidth; x += pixelation) {
        var red = data[((sourceWidth * y) + x) * 4];
        var green = data[((sourceWidth * y) + x) * 4 + 1];
        var blue = data[((sourceWidth * y) + x) * 4 + 2];

        if (red > 200) {
            red = 255;
            blue = 0;
            green = 0;
            tile_count += 1;
        } else {
            red = 135;
            green = 206;
            blue = 235;
        }

        for (var n = 0; n < pixelation; n++) {
            for (var m = 0; m < pixelation; m++) {
                if (x + m < sourceWidth) {
                    data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                }
            }
        }
    }
}
ctx.putImageData(imgData, 0, 115);

ctx.fillStyle = "black";
ctx.font = "14px Georgia";
ctx.fillText("Tile Size: " + pixelation, 200, 140);
ctx.fillText("Total Tiles: " + tile_count, 200, 155);

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

Answer 1

我只是计算磁贴中红色像素的数量与非红色像素的数量：

        var redcnt = 0, nonredcnt = 0, red, green, blue;
        for (var n = 0; n < pixelation; n++) {
            for (var m = 0; m < pixelation; m++) {
                if (x + m < sourceWidth) {
                    red = data[((sourceWidth * (y + n)) + (x + m)) * 4];
                    if (red > 200)
                        ++redcnt;
                    else
                        ++nonredcnt
                 }
            }
        }
        if (redcnt >= nonredcnt) {

var sourceHeight = 90;
var sourceWidth = 300;
var pixelation = 10;
var tile_count = 0;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.moveTo(50, 75);
ctx.lineTo(200, 75);
ctx.lineTo(100, 25);
ctx.lineTo(50, 75);
ctx.fill();
ctx.fillStyle = 'lightgreen';
ctx.rect(0, 0, sourceWidth, sourceHeight);
ctx.fill();

var imgData = ctx.getImageData(0, 15, sourceWidth, sourceHeight);
var data = imgData.data;
for (var y = 0; y < sourceHeight; y += pixelation) {
    for (var x = 0; x < sourceWidth; x += pixelation) {
        var redcnt = 0, nonredcnt = 0, red, green, blue;
        for (var n = 0; n < pixelation; n++) {
            for (var m = 0; m < pixelation; m++) {
                if (x + m < sourceWidth) {
                    red = data[((sourceWidth * (y + n)) + (x + m)) * 4];
                    if (red > 200)
                        ++redcnt;
                    else
                        ++nonredcnt
                 }
            }
        }
        if (redcnt >= nonredcnt) {
            red = 255;
            blue = 0;
            green = 0;
            tile_count += 1;
        } else {
            red = 135;
            green = 206;
            blue = 235;
        }

        for (var n = 0; n < pixelation; n++) {
            for (var m = 0; m < pixelation; m++) {
                if (x + m < sourceWidth) {
                    data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                }
            }
        }
    }
}
ctx.putImageData(imgData, 0, 115);

ctx.fillStyle = "black";
ctx.font = "14px Georgia";
ctx.fillText("Tile Size: " + pixelation, 200, 140);
ctx.fillText("Total Tiles: " + tile_count, 200, 155);

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>