Putting it together

TO BE DONE

Content in this section is under development.

This section will cover combining the pieces built in this module to be displayed on the screen, finishing the tutorial project.

/**
 * Look at the state of each cell and update the 3D visual to match.
 * 
 * @param {Array<Array<THREE.object>>} gridState the cell grid of cells to
 *        render
 * @param {Array<Array<THREE.mesh>>} gridView the corresponding grid of 3D 
 *        visuals
 */
function applyBehaviorToVisuals(gridState, gridView) {
  for (let x = 0; x < gridView.length; x++) {
    for (let y = 0; y < gridView[x].length; y++) {
      let size = gridState[x][y].size;

      gridView[x][y].scale.set(size, size, size);
    }
  }
}

// This is how fast the cells will grow or shrink.
const GROWTH_RATE = 0.015;

// This is the smallest box size we'll allow.
const MIN_CELL_SIZE = MAX_CELL_SIZE / 10;

// Create the initial starting state of the cell visuals
let state = buildBehaviorGrid(GRID_SIZE, MAX_CELL_SIZE, MIN_CELL_SIZE, GROWTH_RATE);

/**
 * Compute the changes to the cell states and update the meshes to reflect that
 * state.
 */
function update() {
  applyBehaviorToVisuals(state, cellVisuals);
  state = nextBehaviorGrid(state);
  cellGroup.rotation.y += ROTATION_SPEED;
}