Take a few different approaches to filling up a grid's cells.
A Pen by Scott Meyers on CodePen.
Take a few different approaches to filling up a grid's cells.
A Pen by Scott Meyers on CodePen.
<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> |
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(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.js"></script> |
body { | |
margin: 50px 0; | |
} | |
.container { | |
margin: 0 auto; | |
text-align: center; | |
} | |
canvas { | |
border-left: 3px solid #FFF; | |
border-right: 3px solid #FFF; | |
display: inline; | |
} |