lgmworks · September 16, 2016 22:47 · lgmworks · Sep 16, 2016
diff --git a/rulething.html b/rulething.html
 <html>
 <head>
  <style>
    .automaton{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .row {
      white-space: nowrap;
    }
    .row div {
      height: 8px;
      display: inline-block;
      width: 8px;
    }
    .row div.active {
      background-color: #fff;
    }
    .row div.inactive {
      background-color: black;
    }
    body {
      margin: 0
    }
  </style>
 </head>
 <body>
  <div class="automaton" onclick="rfs.call(el)">
    <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 < 300; 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 section = document.querySelector('.automaton')
      console.log(allRows.length)
      if(allRows.length > 150) {
        item = allRows.lastElementChild;
        section.removeChild(section.childNodes[151]);
      }
      let lastRow = allRows[0]
      let clone = lastRow.cloneNode(true)

      section.insertBefore( clone, section.firstChild );

      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)


    var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullScreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
 ;
 if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
 } else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
 }


  </script>
 </body>
 </html>
	<html>
	<head>
	<style>
	.automaton{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	}
	.row {
	white-space: nowrap;
	}
	.row div {
	height: 8px;
	display: inline-block;
	width: 8px;
	}
	.row div.active {
	background-color: #fff;
	}
	.row div.inactive {
	background-color: black;
	}
	body {
	margin: 0
	}
	</style>
	</head>
	<body>
	<div class="automaton" onclick="rfs.call(el)">
	<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 < 300; 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 section = document.querySelector('.automaton')
	console.log(allRows.length)
	if(allRows.length > 150) {
	item = allRows.lastElementChild;
	section.removeChild(section.childNodes[151]);
	}
	let lastRow = allRows[0]
	let clone = lastRow.cloneNode(true)

	section.insertBefore( clone, section.firstChild );

	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)


	var el = document.documentElement
	, rfs = // for newer Webkit and Firefox
	el.requestFullScreen
	\|\| el.webkitRequestFullScreen
	\|\| el.mozRequestFullScreen
	\|\| el.msRequestFullscreen
	;
	if(typeof rfs!="undefined" && rfs){
	rfs.call(el);
	} else if(typeof window.ActiveXObject!="undefined"){
	// for Internet Explorer
	var wscript = new ActiveXObject("WScript.Shell");
	if (wscript!=null) {
	wscript.SendKeys("{F11}");
	}
	}


	</script>
	</body>
	</html>