Сетка смещена на один

Question

Итак, я пытаюсь получить сетку для работы на моем холсте. Вот что я получил:

codepen link

for (var j = 0; j < rows; j++) { 
    for (var i = 0; i < cols; i++) { 
     var pix = new Pixel(i, j); 
     grid.push(pix); 
    } 
} 

Теперь проблема заключается в том, что в массиве сетки, пиксель на индекс 0 является фактически второй один и последний является первым. Я хочу изменить это, но я не вижу, в чем проблема в коде.

Answer 1

Посмотрите на свой Pixel#draw() функции:

this.draw = function() { 
    rect(this.x, this.y, l, l); 
    fill(0); 
    stroke(20); 
    if (this.on) 
     fill(255); 
} 

Прочитайте этот код построчно и действительно думать о том, что именно он делает. Пройдите через него с листом бумаги и карандашом, чтобы точно понять, что происходит.

Обратите внимание, что вы вызываете функцию rect()сначала, а затем вы настраиваете заливку и обводку.

Это приведет к тому, что каждый квадрат будет иметь цвет предыдущий. Так что это не значит, что ваш первый Pixel находится во втором квадрате, а второй Pixel рисует сам по цвету первого Pixel. То же самое верно для первого Pixel рисунка, основанного на цвете последних Pixel.

Чтобы устранить проблему, просто установите ход и заполните до, вы вызываете функцию rect().

Side Примечание: Вы также, вероятно, хотите, чтобы войти в привычку использовать { } фигурные скобки для каждого if заявления, даже однострочечники, как это:

if(this.one){ 
    fill(255); 
} 

Это не вызывает никаких проблем в коде но это хорошая привычка.