По-строковое суммирование данных по заданному диапазону [JS, canvas]

Question

Не получается реализовать функцию по-строкового суммирования данных по заданному диапазону. Данными являются значения синего канала пикселей.

На примере этой картинки:

На выходе должен получить:

[0 - 255] [1 - 510] [2 - 765] [3 - 765] [4 - 510]

[5 - 765] [6 - 765] [7 - 765] [8 - 510] [9 - 255]

[10 - 510] [11 - 765] [12 - 1020] [13 - 765] [14 - 765]

Проблема заключается в корректном подсчёте при переходе на следующую строку, то есть, чтобы пиксель 4, при диапазоне [-2; 2] суммировался только с предыдущими двумя значениями (пиксели 2 и 3). А пиксель 5 (начало новой строки) игнорировал предыдущие пиксели, находящиеся в первой строке.

Помогите подправить имеющийся код.

Функция:

function getRowSumOfBlueChannels(Array, Counter, Width, MinSigmaValue, MaxSigmaValue){
var sum = 0;
var blueChannels = [];
var numRow = 1;
blueChannels = getBlueChannels(Array);

        for(var sigma = MinSigmaValue; sigma <= MaxSigmaValue; sigma++){

            if(blueChannels[Counter + sigma] !== undefined){
                if( (Counter + sigma) < Width * numRow){  // ошибка тут

                    sum += blueChannels[Counter + sigma];

                } else {
                    numRow++;
                    break;
                }
            }
        }

    return sum;
}

UPD Реализовал функцию, решил хранить значения сумм в массиве.

Если кому интересно моё решение:

function getRowSumOfBlueChannel(Array, Width, Height, MinSigmaValue, MaxSigmaValue){
var sum = 0;
var blueChannels = [];

blueChannels = getBlueChannels(Array);

    var sumValues = [];

        for(var numRow = 0; numRow < Height; numRow++){
            for(var i = numRow * Width; i < Width + (numRow * Width); i++){

                for(var sigma = MinSigmaValue; sigma <= MaxSigmaValue; sigma++){

                    if( blueChannels[i + sigma] !== undefined){ // игнорируем отрицательные знаения

                        if( ((i + sigma) >= Width + ((numRow - 1) * Width )) && ((i + sigma) < Width + (numRow * Width))  ){ 
                            sum += blueChannels[i + sigma];
                        }   

                    }
                }
                sumValues[i] = sum;

                alert(i + " | " + sumValues[i] );
                sum = 0;
            }
        }

    return sumValues;
}

вся идея в этой проверке let differentRows = !colors[index + offset] || Math.floor(index/width) !== Math.floor((index+offset)/width); — Stranger in the Q, Mar 24 '19 at 10:15

Stranger in the Q · Accepted Answer · 2019-03-24T10:20:43.290

0

Я не смог понять Вашу идею и сделал как сделал:

вся идея в этой проверке let differentRows = !colors[index + offset] || Math.floor(index/width) !== Math.floor((index+offset)/width);

let kernel = [-2, -1, 0, 1, 2];
let black = [0,0,0];
let white = [255,255,255];
let red = [255,0,0];
let blue = [0,0,255];
let cyan = [0,255,255];
let yellow = [255,255,0];
let magenta = [255,0,255];
let width = 5;
let height = 3;
let colors = [
  red,   white, black,   blue,  white,
  blue,  blue,  magenta, black, yellow,
  white, black, blue,    cyan,  white
];
let sum = colors.map((value, index) => 
  kernel.map(offset => get(index, offset))
        .reduce((acc, value) => acc + value, 0));
function get(index, offset) {
  let differentRows = !colors[index + offset] || 
                      Math.floor(index/width) !== Math.floor((index+offset)/width);
  return differentRows ? 0 : colors[index + offset][2];
}
console.log(sum)

edited Mar 24 '19 at 10:20

answered Mar 23 '19 at 21:35

Stranger in the Q

56,055

Спасибо за отклик, у Вас интересное компактное решение. Некоторые методы (и особенности синтаксиса) мне пока не знакомы, есть повод разобраться и понять! – azatt Mar 24 '19 at 10:57
@azatt задавайте вопросы, с радостью отвечу – Stranger in the Q Mar 24 '19 at 10:57
@azatt для реального изображения это можно сделать при помощи видеокарты во фрагментном шейдере, там, если не считать управляющего кода, это можно сделать в 2-3 строчки =), так устроен blur, только он берет значения не только справа и слева но и сверху и снизу и не только синий а весь цвет – Stranger in the Q Mar 24 '19 at 11:00
@azatt https://ru.stackoverflow.com/a/951405/188366 – Stranger in the Q Mar 24 '19 at 11:04

По-строковое суммирование данных по заданному диапазону [JS, canvas]

1 Answers1