Skip to content

Instantly share code, notes, and snippets.

@mpj
Created September 10, 2016 16:49
Show Gist options
  • Save mpj/94427edd9a5ed4d2cc677f1ae0a0558b to your computer and use it in GitHub Desktop.
Save mpj/94427edd9a5ed4d2cc677f1ae0a0558b to your computer and use it in GitHub Desktop.
Code from episode
<html>
<head>
<style>
.row div {
height: 8px;
display: inline-block;
width: 8px;
}
.row div.active {
background-color: red;
}
.row div.inactive {
background-color: #99CCFF;
}
body {
margin: 0
}
</style>
</head>
<body>
<div class="automaton">
<div class="row"></div>
</div>
<script>
function randomBinary() {
let max = 1
let min = 0
return Math.floor(
Math.random() * (max - min + 1)
)
}
for (let i = 0; i < 101; i++) {
let div = document.createElement('div')
document.querySelector('.row').appendChild(div)
}
function randomizeRow(rowDiv) {
for (let i = 0; i < rowDiv.childNodes.length; i++) {
let div = rowDiv.childNodes[i]
div.classList
.add(randomBinary() ? 'active' : 'inactive')
}
}
randomizeRow(document.querySelector('.row'))
function duplicateRow() {
let allRows = document.querySelectorAll('.row')
let lastRow = allRows[allRows.length - 1]
let clone = lastRow.cloneNode(true)
document
.querySelector('.automaton')
.appendChild(clone)
processRow(clone, lastRow)
}
function processRow(rowDiv, parentRowDiv) {
for (let i = 0; i < rowDiv.childNodes.length; i++) {
let target = rowDiv.childNodes[i]
let prevSelf = parentRowDiv.childNodes[i]
let leftSibling =
prevSelf.previousElementSibling ||
parentRowDiv.childNodes[
parentRowDiv.childNodes.length - 1]
let rightSibling =
prevSelf.nextElementSibling ||
parentRowDiv.childNodes[0]
let toggleClass = setActiveIfMatchesRule
.bind(
null,
target,
leftSibling,
prevSelf,
rightSibling
)
toggleClass([1,1,1], false)
toggleClass([1,1,0], true)
toggleClass([1,0,1], false)
toggleClass([1,0,0], false)
toggleClass([0,1,1], true)
toggleClass([0,1,0], false)
toggleClass([0,0,1], false)
toggleClass([0,0,0], true)
}
}
function setActiveIfMatchesRule(
target,
leftSibling,
prevSelf,
rightSibling,
rule,
ruleValue
) {
let matchesRule =
state(leftSibling) === rule[0] &&
state(prevSelf) === rule[1] &&
state(rightSibling) === rule[2]
if(matchesRule)
setIsActive(target, ruleValue)
}
function state(cellDiv) {
return cellDiv.classList.contains('active') ? 1 : 0
}
function setIsActive(cellDiv, isActive) {
if (!!isActive) {
cellDiv.classList.remove('inactive')
cellDiv.classList.add('active')
} else {
cellDiv.classList.remove('active')
cellDiv.classList.add('inactive')
}
}
setInterval(duplicateRow, 100)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment