-3

順番に並べられたピクセルの色値 (R、G、B、A、R、G、B、A... など) でいっぱいの配列があり、R、G の値を変更してそれらを移動しようとしています。とBですが、Aは放っておきたいです。配列の 4 番目 (または n 番目) の値を具体的にスキップする最良の方法は何ですか?

私がやろうとしていること:

  • すべてのフレームで、最初の R 値 (配列の 1 番目の項目) を 1 ずつ増やします。
  • R 値で 0 から 255 に移動します。
  • R = 255 の場合、0 にリセットし、G 値 (配列の 2 番目の項目) を 1 増やします。
  • R は循環し続け、0 から 255 まで進み、次のようになるまで毎回 G を増やします。
  • G=255の場合、0にリセットし、Bの値(3番目の項目)を1増やします。
  • 同じこと、G サイクルは毎回 B を 1 ずつ増やします。
  • B = 255 の場合、0 にリセットしてA 値 (4 番目の項目!) をスキップし、代わりに次の R 値である 5 番目の項目を増やします。そして、これを配列の最後まで無限に続けます。

私が取り組んでいるプロジェクトは P5.js にありますが、この問題は Javascript に固有のものであると考えました。

みんな、ありがとう！

ETA: 人々が私が何を使っているのか尋ねてきたので、ここに行きます:

var m = 0;
var array = [0];

function draw() {
  var last = array[array.length-1];

  loadPixels();
  pixels[array[last]] += 1;
  updatePixels();

  if (pixels[array[last]] == 255) {
    loadPixels();
    pixels[array[last]] = 0;
    updatePixels();
    m += 1;
    array.push(m);
  }
}

これはほぼ問題なく機能しているようで、ピクセルが色を循環するのを見ることができますが、すぐに白に変わります (おそらく、ifステートメントがループ後に A 値をゼロにリセットしているためです。それでもやりたいのですが) 1 つだけ実行してから次のピクセルに移動するのではなく、すべてのピクセルを移動し続けます (リストで説明した方法のように)。

私はもともとこれを含めませんでした。私はまだ Javascript に非常に慣れていないためです。これまでの私の作業は非常に難解なブートストラップである可能性が高く、ほとんどの人がそれを理解できないのではないかと恐れています。でも、できればそのほうがいいと思います。

4

4 に答える 4

3

これは、モジュロ演算を使用して非常に簡潔に行うことができます。

var myPixels = [255, 255, 255, 0.5, 255, 189, 22, 0.3];

function updatePixels(pixels) {
    var shouldContinue = true,
        i = 0;

    for ( ; i < pixels.length && shouldContinue; i += 1) {
        // Skip every 4th index
        if (i % 4 !== 3) {
            pixels[i] = (pixels[i] + 1) % 256;

            // keep going as long as the current RGB value has just been reset to 0
            shouldContinue = (pixels[i] === 0);
        }
    }
}

// EXAMPLE USAGE    
console.log(myPixels);
updatePixels(myPixels);
console.log(myPixels);
updatePixels(myPixels);
console.log(myPixels);

実行すると、次の出力が生成されます。

[255, 255, 255, 0.5, 0, 189, 22, 0.3]
[0, 0, 0, 0.5, 0, 190, 22, 0.3]
[1, 0, 0, 0.5, 0, 190, 22, 0.3]
于 2014-12-07T03:54:00.230 に答える