add hex animation
This commit is contained in:
parent
a0589885e3
commit
f56bb48811
60
content/hypno/hex/hex.css
Normal file
60
content/hypno/hex/hex.css
Normal file
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
208
content/hypno/hex/hex.js
Normal file
208
content/hypno/hex/hex.js
Normal file
|
@ -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);
|
8
content/hypno/hex/hex.svg
Normal file
8
content/hypno/hex/hex.svg
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version='1.0' encoding='UTF-8'?>
|
||||||
|
<!-- This file was generated by dvisvgm 2.3.5 -->
|
||||||
|
<svg height='203.9997pt' version='1.1' viewBox='56.4094 53.8583 177.2056 203.9997' width='177.2056pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
|
||||||
|
<g id='page1'>
|
||||||
|
<g transform='matrix(0.996264 0 0 0.996264 145.012 155.858)'>
|
||||||
|
<path d='M 6.1462e-15 -100.375L -86.9273 -50.1875L -86.9273 50.1875L -1.84386e-14 100.375L 86.9273 50.1875L 86.9273 -50.1875L 6.1462e-15 -100.375Z' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='4.015'/>
|
||||||
|
</g></g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 637 B |
8
content/hypno/hex/index.html
Normal file
8
content/hypno/hex/index.html
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
+++
|
||||||
|
title = "hex"
|
||||||
|
date = 2020-06-21T18:52:30-04:00
|
||||||
|
draft = false
|
||||||
|
unlisted = false
|
||||||
|
+++
|
||||||
|
|
||||||
|
<div id="grid"></div>
|
11
content/hypno/hex/spiral.svg
Normal file
11
content/hypno/hex/spiral.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in a new issue