Javascript-форум - Увеличение массива

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Увеличение массива (https://javascript.ru/forum/misc/66763-uvelichenie-massiva.html)

Увеличение массива

Создавая карту блоков, я решил сохранять ее в двумерном массиве, позначая соответствующие блоки числами.
Вот например, у меня есть участок карты 5x7

и он задается таким вот массивом:

map = [
[1,1,0,0,1],
[1,0,0,0,1],
[1,0,0,1,1],
[1,0,0,0,1],
[1,0,0,0,1],
[1,1,1,0,1],
[1,1,1,1,1],
]

где "1" = присутствие блока, а "0" = соответственно, отсутствие. Может быть только два этих состояния, т.е массив ограничивается числами "1" или "0", в нем нету "2" или чего-то еще.
Допустим, мне нужно увеличить этот участок к размерам 5х10, или к какому-то иному. Но при этом, нужно чтобы в массиве не оставалось пустых мест, а они записывались соседними значениями, или что-то типа того. Примерно так работают фоторедакторы, которые увеличивают растровые изображения, додавая на место появившихся пикселей какие-то новые.
Так вот вопрос: есть ли какой-то не очень тяжелый алгоритм с реализацией на JS? Может кто-то вкратце изложить, как решить эту проблему, или хотя бы скинуть ссылку на хороший туториал?
Уже искал, и ниче не нашел. (Да, значит плохо искал.)

Цитата:

Сообщение от TimohaP

Примерно так работают фоторедакторы, которые увеличивают растровые изображения, додавая на место появившихся пикселей какие-то новые.

Ни какие-то новые, а все определяется методом интерполяции. Она бывает линейная (для изображений не используется), билинейная, бикубическая и еще много других. При билинейной интерполяции берется средневзвешенное значение пикселей 2х2 для нового пикселя, а в бикубической 4х4.

В сети можно найти описания алгоритмов интерполяций, используйте подходящий из них.

Окей, спасибо, кажется, это то, что мне нужно :thanks:

Я решил эту проблему, но, правда, своим способом, который мне больше подходит.
Может, если кому-то надо будет делать что-то подобное, я оставлю тут ссылку, как я это делал с подробной документацией кода. Может кто-то что да и почерпнет для себя.
JSBin/yeqisa/9

TimohaP,
а как то через canvas масштабировать?
http://nutochka.github.io/transform/scale.html

Цитата:

Сообщение от рони

а как то через canvas масштабировать?

Это надо с индексированной палитрой работать, а canvas с этим форматом не работает. А при полноцветном изображении будет кошмар в результате, хотя если PNG и работать не с RGB, а HSB, то можно попробовать.

TimohaP,
вариант ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
  <style type="text/css">
table {border-collapse:collapse; display:inline-block; }
table td {width:15px; height:15px; padding:0; box-shadow:0 0 1px 0 #7395BE;border: 1px solid #000000;}
/*Стиль для заполненных ячеек (f - filled)*/
.f {background:#7395BE}
/*Стиль для пустых ячеек (f - empty)*/
.e {background:#E8F2F7}
  </style>
</head>
<body>
<script>
map = [
      [1,0,1,0,1], //карта значений (смотри, что получилось в результате (вкладка output) и сравни с этим массивом)
      [1,0,1,0,0],
      [1,0,1,1,0],
      [1,0,0,0,1],
      [1,0,0,0,1],
      [1,0,1,1,1],
      [1,0,1,1,1],
      [1,0,0,0,1],
      [1,0,0,0,1],
      [1,1,0,0,1],
      [1,1,0,1,1],
      [1,0,0,1,1],
      [1,0,0,1,1],
      [1,1,0,1,1],
      [1,1,1,1,1],
      [1,0,1,1,1],
      [1,1,1,0,1],
      [1,0,1,0,1],
      [1,0,1,1,1],
      [1,1,0,1,1],
      [1,1,0,0,1]
    ];
function fn(d, f) {
    var c = [],
        b = d.length;
    d.forEach(function(a) {
        for (var b = 0; b < f; b++) c.push(a)
    });
    for (var e = [], a = 0; a < c.length; a += b) e.push(c.slice(a, a + b));
    return e.map(function(a) {
        return +(a.join("").split("1").length - 1 >= b / 2)
    })
};
function createTable( map , num) {
    var table, row, data;
    table = document.createElement('table');

    for (var k = 0; k < map.length; k++) {
        row = table.insertRow(k);
        var len = fn(map[k], num);
        for (var m = 0; m < len.length; m++) {
            data = row.insertCell(m);
            data.classList.add(len[m] ? 'f' : 'e')
                  }
        table.appendChild(row);
    }
    return table;
}
for (var i=5; i<30; i+=3)  {
document.body.appendChild(createTable( map , i));
document.body.appendChild(document.createTextNode(i));
document.body.appendChild(document.createElement('br'))
}


</script>

</body>

</html>

laimas,
я, кстати, думал над этим.
очень просто будет реализовать увеличение картинок в одной градиации цвета, а если увеличивать картинку в HSB, то тут проблема будет только в том, чтобы вычислить средний оттенок (параметр H).
но в конце концов, есть же в интернете какая-то статья, как это делать, и как это делают "серьезные ребята".

Цитата:

Сообщение от TimohaP

а если увеличивать картинку в HSB

Нельзя, изображение, это всегда RGB, и canvas будет работать с RGB. А вот после преобразования изображения в градациях серого легко в цветовой модели HSB получить только по установленному порогу уровня яркости ячейки условно 1 и условно 0. Проделать это же самое в цветовой модели RGB даже с градацией серого будет очень сложно.

PS. Алгоритм преобразования RGB в HSB на всевозможных языках описан многократно в сети, а это о цветовых моделях.