JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<div id="root"></div>
CSS
.box {
position: relative;
width: 10px;
height: 10px;
}
JavaScript
const { render } = brynja;
const propegationFactor = (propFactor => ({
stay: propFactor.stay / 5,
up: propFactor.up / 5,
left: propFactor.left / 5,
right: propFactor.right / 5,
down: propFactor.down / 5,
}))({
stay: 1,
up: 1,
left: 1,
right: 1,
down: 1,
});
const propegate = currentGrid => {
const newGrid = Array(currentGrid.length)
.fill(0)
.map((_, i) => Array(currentGrid.length).fill(0));
for (let i = 0; i < currentGrid.length; i++) {
for (let k = 0; k < currentGrid.length; k++) {
newGrid[i][k] += currentGrid[i][k] * propegationFactor.stay;
if (i > 0) {
// Can propegate upwards
newGrid[i-1][k] += currentGrid[i][k] * propegationFactor.up;
}
if (i < currentGrid.length-1) {
// Can propegate downwards
newGrid[i+1][k] += currentGrid[i][k] * propegationFactor.down;
}
if (k > 0) {
// Can propegate to the left
newGrid[i][k-1] += currentGrid[i][k] * propegationFactor.left;
}
if (k < currentGrid.length-1) {
// Can propegate to the right
newGrid[i][k+1] += currentGrid[i][k] * propegationFactor.right;
}
}
}
return newGrid;
}
let grid = [];
let timeStep = 0;
const initGrid = n => {
grid = Array(n).fill(0).map(() => Array(n).fill(0));
const middle = Math.floor(n/2);
grid[middle][middle] = 1;
//grid[0][0] = 1;
//grid[grid.length-1][grid.length-1] = 1;
}
const update = () => {
grid = propegate(grid);
render(_=>_
.child('h3', _=>_
.text(`time step: ${timeStep++}`)
)
.child('table', _=>_
.children('tr', grid.length, (_, i)=>_
.children('td', grid.length, (_, k)=>_
.class('box')
.prop('style', `background: rgba(255, 0, 0, ${grid[i][k]*grid.length*2})`)
)
)
)
)
}
setInterval(update, 100);
initGrid(51);
update();