2014-12-07 2 views
-3

У меня есть массив, полный значений цвета пикселей, упорядоченных последовательно (R, G, B, A, R, G, B, A ... и т. Д.), И я пытаюсь переместить их, изменяя значения для R, G и B, но я хочу оставить А в покое. Каков наилучший способ специально пропустить 4-е (или n-е) значение массива?Javascript: пропускать каждый 4-й элемент в массиве?

То, что я пытаюсь сделать:

  • С каждым кадром, увеличивать первое значение R (1-й элемент в массиве) на 1.
  • Go от 0 до 255 в значении R.
  • Когда R = 255, сбросить его до 0 и увеличить значение G (2-й элемент в массиве) на 1.
  • R продолжает цикл, происходит от 0 до 255, и увеличивая г каждого времени до тех пор:
  • Когда G = 255, сбросьте его на 0 и увеличьте значение B (3-й элемент) на 1.
  • То же самое, G циклов, увеличивающих B на каждый раз каждый раз.
  • Когда 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 до нуля после того, как он проходит через него. Хотя мне все же хотелось бы, чтобы все пиксели перемещались (вроде как описано в списке) вместо того, чтобы просто делать одно, а затем переходить к следующий:

Я изначально не включал это, потому что я все еще супер новый для Javascript и понимаю свою работу t мужа, скорее всего, так эзотерически загружена, что я боюсь, что большинство из них не смогут сделать головы или хвосты. Но если вы можете, тем лучше, я полагаю.

+3

Можете ли вы предоставить некоторые данные и код? – rfornal

+0

Что это за массив, можете ли вы опубликовать пример? Сколько из них у вас в массиве, как они связаны? –

+0

Используйте модульное подразделение, возможно? – incutonez

ответ

2

Вы можете сделать это очень сжато с использованием арифметических операций по модулю:

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] 
0

пропустить на 4 по логике петли массива, а затем три вложенных циклов на RGB, чтобы делать то, что вы хотите, смотрите ниже:

P.S. так как мой ответ неверно проголосовали, я добавил массив образцов и сообщение console.log, чтобы дать вам полный рабочий образец, который вы можете запустить в узле или в браузере, чтобы увидеть, как он выполняет именно то, что запросил ОП.

var a=[0,0,0,1,0,0,0,2,0,0,0,3,0,0,0,4]; 
 
    for(i=0;i<a.length;i+=4) // notice the i+=4 instead of i++, this the trick. 
 
    { 
 
     for(b=0;b<256;b++) { 
 
     for(g=0;g<256;g++) { 
 
      for(r=0;r<256;r++) { 
 
      a[i]=r; // R cycles from 0 to 255 
 
      console.log(i, a[i], a[i+1], a[i+2]); 
 
      } 
 
      a[i+1]=g; // G cycles from 0 to 255 
 
     } 
 
     a[i+2]=b; // B cycles from 0 to 255 
 
     } 
 
    }

+0

Все это будет означать, что все значения RGB равны 255, что крайне неэффективно. – JLRishe

+0

нет, нет, запустите его в своем браузере или в узле, и вы увидите, что он делает именно то, что запросил ОП. постскриптум у меня изначально была опечатка в циклах for, в b ++ и r ++, я просто исправил опечатку, но логика остается. Я также могу опубликовать рабочий пример с массивом образцов, если хотите. – Born2Code

+0

Обязательно отправьте образец. – JLRishe

1

Какой самый лучший способ определенно пропустить 4-й (или п-е) значение массива?

Идея заключается в том, чтобы создать for цикл с i в качестве индекса и проверить, если i % 4 != 3 верно. В приведенном ниже коде пропустят 4-й элемент массива, где n - положительное целое число.

var arr = ['R', 'G', 'B', 'A', 'R', 'G', 'B', 'A', 'R', 'G', 'B', 'A', 'R', 'G', 
      'B', 'A', 'R', 'G', 'B', 'A','R']; 

for (i = 0; i < arr.length; i++) { 
    if (i % 4 != 3) { 
     alert(arr[i]); // will display only R, G, and B 

     // do your thing here for R, G, and B 
    } 
} 

Элементы строчки предназначены только для примера. Вы можете изменить arr с массивом чисел и использовать тот же цикл for.

Работа демо: http://jsfiddle.net/o7epn1cb/

1

Пропуск итерации с ключевым словом continue:

for(var i = 0; i < ary.length; i++) { 
    if(i % 4 === 3) { 
     continue; // this keyword means skip following steps, jump to next iteration 
    } 
    // work to do 
}