Фильтрация определенного диапазона чисел из массива

Я создаю алгоритм, который будет размывать границу холста (изображения). Перед применением эффекта размытия я создаю массив filtered, который включает все значения пикселей, которые должны быть размыты.

Я создал пример с изображением 10 × 10px.

function compute(w, h, bW) {
  w *= 4;
  var ignored = [];
  for (y = bW; y < (h - bW); y++) {
    for (x = 0; x < (w - (bW * 4 * 2)); x++) {
      ignored.push(w * y + x + bW * 4);
    }
  }
  console.log(ignored);

  function range(limit) {
    return Array.apply(null, Array(limit)).map(function(_, i) {
      return i;
    })
  }
  Array.prototype.diff = function(array) {
    return this.filter(function(elem) {
      return array.indexOf(elem) === -1;
    })
  }
  var filtered = range(w * h).diff(ignored);
  console.log(filtered);

  return filtered;
}

compute(10, 10, 2);

//////////////////////////////////////////////////////////////////
// Below is just to display the numbers that are being filtered //
//    Here, the size is 100 x 100 px with 10px border width     //
//////////////////////////////////////////////////////////////////

var pixels = compute(100, 100, 10);
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
var imgD = ctx.createImageData(100, 100);
for (var i = 0; i < imgD.data.length; i += 4) {
  if (pixels.indexOf(i) > 0) {
    imgD.data[i + 0] = 0;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  } else {
    imgD.data[i + 0] = 255;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  }
}
ctx.putImageData(imgD, 10, 10);
<canvas></canvas>

ОТВЕТЫ

Ответ 1

FIDDLEJS: http://jsfiddle.net/t14gr6pL/2/

Пояснение:

Это зависит от ширины ваших треугольников (второй цвет). В примере 64 * 64 эта ширина равна 7.

Предположим, что эта ширина (tw) вычисляется следующим образом (вы можете изменить):

var tw = (2 * bW) - 1;

Таким образом, ваш код будет выглядеть следующим образом:

function compute(w, h, bW) {
    var filtered = [];
    var WIDTH_MULTIPLICATOR = 4;

    var bH = bW;
    w *= WIDTH_MULTIPLICATOR;
    bW *= WIDTH_MULTIPLICATOR;

    var triangleWidth = (2 * bW) - 1;

    for (y = 0; y < h; y++) {
        for (x = 0; x < w; x++) {
            if (
                // Borders
                (Math.min(x, w - x) < bW) ||
                (Math.min(y, h - y) < bH) ||

                // Adding "Triangles"
                (Math.min(x, w - x) < bW + triangleWidth - Math.max(0, Math.min(y, h - y) - bH) * WIDTH_MULTIPLICATOR)

            ) {
                filtered.push(w * y + x);
            }
        }
    }

    return filtered;
}