From f56bb48811a5b7f9578862721fe9a471f047ab14 Mon Sep 17 00:00:00 2001 From: xenofem Date: Sun, 21 Jun 2020 23:55:06 -0400 Subject: [PATCH] add hex animation --- content/hypno/hex/hex.css | 60 ++++++++++ content/hypno/hex/hex.js | 208 +++++++++++++++++++++++++++++++++++ content/hypno/hex/hex.svg | 8 ++ content/hypno/hex/index.html | 8 ++ content/hypno/hex/spiral.svg | 11 ++ 5 files changed, 295 insertions(+) create mode 100644 content/hypno/hex/hex.css create mode 100644 content/hypno/hex/hex.js create mode 100644 content/hypno/hex/hex.svg create mode 100644 content/hypno/hex/index.html create mode 100644 content/hypno/hex/spiral.svg diff --git a/content/hypno/hex/hex.css b/content/hypno/hex/hex.css new file mode 100644 index 0000000..3372df6 --- /dev/null +++ b/content/hypno/hex/hex.css @@ -0,0 +1,60 @@ +.cell .hex { + width: 55px; + position: absolute; + z-index: -1; + transform: translate(-50%, -50%); +} + +.cell .spiral { + width: 45px; + position: absolute; + animation: spin 1s linear infinite; +} + +.cell.alive { + animation: birth 1s linear forwards; +} + +.cell.dead { + animation: death 1s linear forwards; +} + +#grid { + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + overflow: hidden; +} + +#controls { + display: none; +} + +@keyframes death { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes birth { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} diff --git a/content/hypno/hex/hex.js b/content/hypno/hex/hex.js new file mode 100644 index 0000000..5d4412c --- /dev/null +++ b/content/hypno/hex/hex.js @@ -0,0 +1,208 @@ +var grid = document.getElementById("grid"); + +var cellsize = 60; +var width = Math.ceil(window.innerWidth / cellsize) + 1; +var height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2)); + +function xCoord(i, j) { + var x = i + j/2; + if (x > width - 1) { + x = x - width; + } + return x; +} + +function yCoord(i, j) { + return Math.sqrt(3)*j/2; +} + +var cells = new Array(width); +for (var i = 0; i < width; ++i) { + cells[i] = new Array(height); + for (var j = 0; j < height; ++j) { + cells[i][j] = document.createElement("div"); + cells[i][j].classList.add("cell"); + cells[i][j].classList.add("alive"); + + spiral = document.createElement("img"); + spiral.classList.add("spiral"); + spiral.src = "spiral.svg"; + cells[i][j].appendChild(spiral); + + hex = document.createElement("img"); + hex.classList.add("hex"); + hex.src = "hex.svg"; + cells[i][j].appendChild(hex); + + cells[i][j].style.position = "absolute"; + cells[i][j].style.left = xCoord(i, j)*cellsize + "px"; + cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px"; + grid.appendChild(cells[i][j]); + } +} + +function prebirth(i, j) { + cells[i][j].classList.add("birthing"); +} +function prekill(i, j) { + cells[i][j].classList.add("dying"); +} +function birth(i, j) { + cells[i][j].classList.remove("dead"); + cells[i][j].classList.add("alive"); +} +function kill(i, j) { + cells[i][j].classList.remove("alive"); + cells[i][j].classList.add("dead"); +} +function update(i, j) { + var cl = cells[i][j].classList; + if (cl.contains("birthing")) { + cl.remove("birthing"); + birth(i, j); + } + if (cl.contains("dying")) { + cl.remove("dying"); + kill(i, j); + } +} +function isAlive(i, j) { + return !cells[i][j].classList.contains("dead"); +} + +function rotate(a) { + a.push(a.shift()); +} + +function arraysEq(a, b) { + if (a.length !== b.length) { + return false; + } + + for (var i = 0; i < a.length; ++i) { + if (a[i] !== b[i]) { + return false; + } + } + + return true; +} + +function arraysRotatedEq(a, b) { + if (a.length !== b.length) { + return false; + } + + for (var i = 0; i < a.length; ++i) { + if (arraysEq(a, b)) { + return true; + } + rotate(b); + } + + return false; +} + +function mod(m, n) { + return ((m % n) + n) % n; +} + +function ip(i) { + return mod(i-1, width); +} +function is(i) { + return mod(i+1, width); +} +function jp(j) { + return mod(j-1, height); +} +function js(j) { + return mod(j+1, height); +} + +function ll(i, j) { + return isAlive(ip(i), j); +} +function dl(i, j) { + return isAlive(i, jp(j)); +} +function dr(i, j) { + return isAlive(is(i), jp(j)); +} +function rr(i, j) { + return isAlive(is(i), j); +} +function ur(i, j) { + return isAlive(i, js(j)); +} +function ul(i, j) { + return isAlive(ip(i), js(j)); +} + +function neighbors(i, j) { + return [ll(i, j), dl(i, j), dr(i, j), rr(i, j), ur(i, j), ul(i, j)]; +} + +function neighborsCount(i, j) { + return neighbors(i, j).filter(function (b) { return b; }).length; +} + +function golay(i, j) { + var n = neighbors(i, j); + var g1 = [true, true, false, false, false, false]; + var g2 = [true, false, true, false, false, false]; + return (arraysRotatedEq(n, g1) || arraysRotatedEq(n, g2)); +} + +function preston(i, j) { + var n = neighbors(i, j); + var p1 = [true, true, false, false, false, false]; + var p2 = [true, false, true, false, false, false]; + return (isAlive(i, j) && (arraysRotatedEq(n, p1) || arraysRotatedEq(n, p2))) || (!isAlive(i, j) && neighborsCount(i, j) === 2); +} + +function golayStep() { + for (var i = 0; i < width; ++i) { + for (var j = 0; j < height; ++j) { + if (golay(i, j)) { + prebirth(i, j); + } else { + prekill(i, j); + } + } + } + + for (var i = 0; i < width; ++i) { + for (var j = 0; j < height; ++j) { + update(i, j); + } + } +} + +function prestonStep() { + for (var i = 0; i < width; ++i) { + for (var j = 0; j < height; ++j) { + if (preston(i, j)) { + prebirth(i, j); + } else { + prekill(i, j); + } + } + } + + for (var i = 0; i < width; ++i) { + for (var j = 0; j < height; ++j) { + update(i, j); + } + } +} + +for (var i = 0; i < width; ++i) { + for (var j = 0; j < height; ++j) { + if (Math.floor(Math.random()*2) === 0) { + kill(i, j); + } + } +} + +setInterval(prestonStep, 1000); diff --git a/content/hypno/hex/hex.svg b/content/hypno/hex/hex.svg new file mode 100644 index 0000000..0664a0e --- /dev/null +++ b/content/hypno/hex/hex.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/content/hypno/hex/index.html b/content/hypno/hex/index.html new file mode 100644 index 0000000..d1975aa --- /dev/null +++ b/content/hypno/hex/index.html @@ -0,0 +1,8 @@ ++++ +title = "hex" +date = 2020-06-21T18:52:30-04:00 +draft = false +unlisted = false ++++ + +
diff --git a/content/hypno/hex/spiral.svg b/content/hypno/hex/spiral.svg new file mode 100644 index 0000000..f7c9558 --- /dev/null +++ b/content/hypno/hex/spiral.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file