グリッドが1つオフセットされました

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が2番目の四角に配置されているわけではなく、2番目のPixelは最初のPixelの色に基づいて描画されています。最後のPixelの色に基づいて最初のPixel描画自体にも同じことが当てはまります。

ストロークを設定しての前にと入力すると、rect()機能が呼び出されます。

サイドノート：あなたはまた、おそらくすべてのif声明、このようにもワンライナーのために{ }中括弧を使用しての習慣を身に取得したい：

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

これはあなたのコード内の任意の問題を引き起こしていませんしかし、それに入るのは良い習慣です。