Filtering specific range of numbers from an array

Question

I'm creating an algorithm that will blur the border of a canvas(image). Before applying the blur effect, I am creating an array filtered that includes all pixel values that needs to be blurred.

I've created an example with a 10×10px image.

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>

The array filtered contains all the numbers that has the background color dark and ignored contains all the numbers that has the background color light and lighest in the image.

My question is:

How do I change my code so that the array filtered will have the numbers with background color dark and light and not lighest ?

enter image description here

An Example on a bit high resolution(65×65px):

enter image description here

Are you trying to select those pixels based on color, or based on the specific geometrical configuration shown in your images? — K. P. MacGregor
– K. P. MacGregor, Commented Nov 13, 2014 at 13:37
@PhoenixStormcrow - I need to get the borders regardless of what color they are. — Weafs.py
– Weafs.py, Commented Nov 13, 2014 at 13:40
Okay, in that case I would probably define a clipping region and then apply the blur operation to the whole canvas. I'll try to write up an answer demonstrating this when I get back to my office this evening. — K. P. MacGregor
– K. P. MacGregor, Commented Nov 13, 2014 at 16:02
Too tired to write it up properly tonight, but here's a fiddle demonstrating the concept: jsfiddle.net/phoenixstormcrow/5htk8jv7/3 — K. P. MacGregor
– K. P. MacGregor, Commented Nov 14, 2014 at 4:09

Nicolas · Accepted Answer · 2014-11-13 13:53:30Z

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

Explanation:

It depends on the width of your triangles (the second color). In the 64*64 example, this width is 7.

Let's assume that this width (tw) is calculate like this (you can change) :

var tw = (2 * bW) - 1;

So your code would be:

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;
}

Collectives™ on Stack Overflow

Filtering specific range of numbers from an array

My question is:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My question is:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related