Grid Origin

grid-origin.markdown

Grid Origin

Take a few different approaches to filling up a grid's cells.

A Pen by Scott Meyers on CodePen.

License.

index.html

<div class="container">
  <canvas id="random" height="200" width="200"></canvas>
  <canvas id="inside" height="200" width="200"></canvas>
  <canvas id="outside" height="200" width="200"></canvas>
  <canvas id="slice" height="200" width="200"></canvas>
  <canvas id="layer" height="200" width="200"></canvas>
</div>

script.js

const gridOrigin = (squareDims, cellDims, style) => {
  const grid = {
   init: function (squareDims, cellDims) {
      this.initSquareDims = squareDims;
      this.cellDims = cellDims;
      this.cellsInRow = this.initSquareDims / cellDims;
      this.innerSquares = this.initSquareDims / this.cellDims / 2;
      this.totalCells = this.cellsInRow * this.cellsInRow;
      this.count = 0;

      for (var i = this.innerSquares; i >= 1; i--) {
        this.iteration = this.innerSquares - i;
        this.createSquareWrap();
      }
    },
    createSquareWrap: function () {
      const startPos = this.iteration * this.cellDims;
      const squareDims = this.initSquareDims - this.iteration * 2 * this.cellDims;
      this.cellsInRow = squareDims / this.cellDims;
      this.createSquareRows(startPos);
    },
    createSquareRows: function (startPos) {
      const inset = this.iteration * this.cellDims;
      const currentSquareDimms = this.initSquareDims - this.iteration * this.cellDims - this.cellDims;
      let pos = [];

      for (let i = 0; i < 4; i++) {
        switch (i) {
          case 0:
            for (var j = 0; j < this.cellsInRow; j++) {
              pos = [j * this.cellDims + inset, startPos];
              this.store(pos[0], pos[1]);
            }
            break;
          case 1:
            for (let j = 1; j < this.cellsInRow; j++) {
              pos = [currentSquareDimms, j * this.cellDims + inset];
              this.store(pos[0], pos[1]);
            }
            break;
          case 2:
            for (let j = this.cellsInRow - 2; j >= 1; j--) {
              pos = [j * this.cellDims + inset, currentSquareDimms];
              this.store(pos[0], pos[1]);
            }
            break;
          case 3:
            for (let u = this.cellsInRow - 1; u >= 1; u--) {
              pos = [startPos, u * this.cellDims + inset];
              this.store(pos[0], pos[1]);
            }
            break;
        }
      }
    },
    store: function (x, y) {
      if (!this.data) this.data = [];
      this.data.push([x, y]);
    },
    order: {
      random: (array) => {
        let currentIndex = array.length;

        while (0 !== currentIndex) {
          const randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
          const temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }
        return array;
      },
      inside: (array) => array.reverse(),
      slice: (array) => {
        let rows = [];
        const rowCellCount = Math.sqrt(array.length);

        for (let i = 0; i < rowCellCount; i++) {
          for (let j = 0; j < rowCellCount; j++) {
            rows.push([i * cellDims, j * cellDims]);
          }
        }
        return rows;
      },
      layer: (array) => {
        let rows = [];
        const rowCellCount = Math.sqrt(array.length);

        for (let i = 0; i < rowCellCount; i++) {
          for (let j = 0; j < rowCellCount; j++) {
            rows.push([j * cellDims, i * cellDims]);
          }
        }
        return rows;
      },
    }
  };

  grid.init(squareDims, cellDims, style);

  switch (style) {
    case 'random':
      return grid.order.random(grid.data);
    case 'inside':
      return grid.order.inside(grid.data);
    case 'slice':
      return grid.order.slice(grid.data);
    case 'layer':
      return grid.order.layer(grid.data);
    default:
      return grid.data;
  }
};

const init = () => {
  const canvases = document.querySelectorAll("canvas");

  const fire = (i) => {
    const size = 10;
    const instance = i;
    const data = gridOrigin(200, 10, canvases[i].id);
    const canvas = canvases[i];
    const ctx = canvas.getContext('2d');

    const insertCell = (x, y, size, id, totalCells, instance) => {
      setTimeout(() => {
        ctx.fillStyle = '#f1f1f1';
        ctx.fillRect(x, y, size, size);
        ctx.fillStyle = chance.color();
        ctx.fillRect(x + size / 4, y + size / 4, size / 2, size / 2);

        if (id === totalCells - 1) {
          ctx.clearRect(0, 0, 200, 200);
          ctx.fillStyle = '#ffffff';
          ctx.fillRect(0, 0, 300, 300);
          fire(instance);
        }
      }, 10 * i);
    };

    for (var i = 0; i < data.length; i++) {
      insertCell(data[i][0], data[i][1], size, i, data.length, instance);
    }
  };

  canvases.forEach((canvas, i) => fire(i));
};

init();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.js"></script>

style.css

body {
  margin: 50px 0;
}

.container {
  margin: 0 auto;
  text-align: center;
}

canvas {
  border-left: 3px solid #FFF;
  border-right: 3px solid #FFF;
  display: inline;
}