p5.jsで画像を操作したい.

Question

###前提・実現したいこと
p5.jsで画像の配列をゴニョゴニョしたい．

###発生している問題・エラーメッセージ
356 * 356のイメージを読み込んで
ワンラインを操作して最終的には斜体の文字を出力したいのですが

console.log
176 1424
index.js:22 buffer.length:254896
index.js:23 sub.length:720
index.js:24 removed.length:704
index.js:21 177 1424
index.js:22 buffer.length:253472
index.js:23 sub.length:716
index.js:24 removed.length:708
index.js:21 178 0
index.js:22 buffer.length:253472
index.js:23 sub.length:0
index.js:24 removed.length:0
index.js:21 179 0
index.js:22 buffer.length:253472
index.js:23 sub.length:0
index.js:24 removed.length:0

と本来なら356回繰り返したいのですが178回目で処理できなくなってしまいます．

###該当のソースコード

var img;

function preload() {
    img = loadImage("helvetica_a.png");
};

function setup() {

    createCanvas(356, 356);
    img.loadPixels();
    // console.log(img.pixels);
    // var shift = [];
    buffer = Array.prototype.slice.call(img.pixels);
    for (var i = 0; i < height; i++) {
        var idx = i * 4 * width;
        var sub = buffer.splice(idx, width * 4);
        var removed = sub.splice(0, i * 4);
        var resub = sub.concat(removed);
        console.log(i, resub.length, idx);
        console.log("buffer.length:" + buffer.length);
        console.log("sub.length:" + sub.length);
        console.log("removed.length:" + removed.length);
        img.pixels.set(resub, idx);
    }
    img.updatePixels();
};

function draw() {
    image(img, 0, 0);
};

###試したこと
色々いじりましたがだめでした．

###出力結果

入力画像

出力結果

Answer 1

buffer.splice(idx, width * 4);

が原因なんでは？
spliceメソッドはご存知かと思いますが、第3引数がない場合は、指定された範囲を削除します。
ですが、idxは削除していない場合での各ラインの開始位置を計算した値となっています。

buffer.splice(0, width * 4);

とすべきだと思いますが。

Comments

[moc0311]

その通りでした．一人でハマっていました．本当にありがとうございました．