Javascript Incremental Looping

Question

私はIsomer JSライブラリで3dグリッドを作成しており、インクリメンタルループのロジックを理解するのに役立つ必要があります。ここでCodepenは：

https://codepen.io/anon/pen/wqwrzL

のJavascript：

function draw() { 
    var iso = new Isomer(document.getElementById("grid")); 

    var Shape = Isomer.Shape; 
    var Point = Isomer.Point; 
    var Path = Isomer.Path; 
    var Color = Isomer.Color; 
    var cube = Shape.Prism(Point.ORIGIN); 
    var white = new Color(255, 255, 255, 0.4); 

    makeGrid(8, 8, 0, new Color(100, 100, 100, 0.6)); 

    for (x = 0; x < 8; x++) { 
     iso.add(Shape.Prism(new Point(x, 0, 0), 1, 1, .5), white); 
    } 

    // GridMaker 
    function makeGrid(xSize, ySize, zHeight, gridColor) { 
     for (x = 0; x < xSize + 1; x++) { 
      iso.add(new Path([ 
      new Point(x, 0, zHeight), 
      new Point(x, xSize, zHeight), 
      new Point(x, 0, zHeight) 
      ]), gridColor); 
     } 
     for (y = 0; y < ySize + 1; y++) { 
      iso.add(new Path([ 
      new Point(0, y, zHeight), 
      new Point(ySize, y, zHeight), 
      new Point(0, y, zHeight) 
      ]), gridColor); 
     } 
    } 
} 

このスニペットは、固体ブロックを作成する：

for (x = 0; x < 8; x++) { 
      iso.add(Shape.Prism(new Point(x, 0, 0), 1, 1, .5), white); 
     } 

new Point()値が順序付けされる：X、Y、Z。 8回目の反復ごとに、y値を1増やす必要があります。これにより、新しい行にブロックを配置し始めます。これも8回起こり、効果的にグリッドを塗りつぶします。

Answer 1

function draw() { 
    var iso = new Isomer(document.getElementById("grid")); 

    var Shape = Isomer.Shape; 
    var Point = Isomer.Point; 
    var Path = Isomer.Path; 
    var Color = Isomer.Color; 
    var cube = Shape.Prism(Point.ORIGIN); 
    var white = new Color(255, 255, 255, 0.4); 

    makeGrid(8, 8, 0, new Color(100, 100, 100, 0.6)); 

    for (x = 0; x < 8; x++) { 
     for (y = 0; y < 8; y++) { 
     iso.add(Shape.Prism(new Point(x, y, 0), 1, 1, .5), white); 
     } 
    } 

    // GridMaker 
    function makeGrid(xSize, ySize, zHeight, gridColor) { 
     for (x = 0; x < xSize + 1; x++) { 
      iso.add(new Path([ 
      new Point(x, 0, zHeight), 
      new Point(x, xSize, zHeight), 
      new Point(x, 0, zHeight) 
      ]), gridColor); 
     } 
     for (y = 0; y < ySize + 1; y++) { 
      iso.add(new Path([ 
      new Point(0, y, zHeight), 
      new Point(ySize, y, zHeight), 
      new Point(0, y, zHeight) 
      ]), gridColor); 
     } 
    } 
}