Javascript, HexagonSplit

Disclaimer: Its pretty slow due to lots of dom manipulation and probably needs a bugfix for the x-axis to not wrap-around.

Fiddle

http://jsfiddle.net/16bhsr52/9/

Fiddle now allows to toggle active cells.

Still Live

Oscillator

Spaceship (2 phases, two variants)

Spacehip (4 phases)

Javascript

//-- Prepare -- var topX = 0; var topY = 0; var sizeX = 40; var sizeY = 10; var patternSizeX = 17; var patternSizeY = 43; var patternElements = 3; var neighbourTopLeft = -(sizeX + 1) * patternElements; var neighbourTop = -(sizeX) * patternElements; var neighbourTopRight = -(sizeX - 1) * patternElements; var neighbourLeft = -patternElements; var neighbourRight = +patternElements; var neighbourBottomLeft = +(sizeX - 1) * patternElements; var neighbourBottom = +(sizeX) * patternElements; var neighbourBottomRight = +(sizeX + 1) * patternElements; var patternNeighbours = [ [neighbourTopLeft + 2, neighbourTop + 2, neighbourTopRight + 2, neighbourLeft, neighbourLeft + 1, 1, neighbourRight], [neighbourLeft + 1, 0, 2, neighbourRight, neighbourRight + 1, neighbourRight + 2], [neighbourLeft + 1, neighbourLeft + 2, 1, neighbourRight + 2, neighbourBottomLeft, neighbourBottom, neighbourBottomRight] ]; for (i = 0; i < sizeX; i++) { for (j = 0; j < sizeY; j++) { var tileId = (j * sizeX + i) * patternElements; $("body").append('<div id="t' + (tileId) + '" class="shapeDown" style="left:' + topX + patternSizeX * i + 'px;top:' + topY + patternSizeY * j + 'px;">'); $("body").append('<div id="t' + (tileId + 1) + '" class="shapeHexagon" style="left:' + (8 + topX + patternSizeX * i) + 'px;top:' + (17 + topY + patternSizeY * j) + 'px;">'); $("body").append('<div id="t' + (tileId + 2) + '" class="shapeUp" style="left:' + topX + patternSizeX * i + 'px;top:' + (34 + topY + patternSizeY * j) + 'px;">'); } } //-- Populate -- for (i = 0; i < (patternElements * sizeX * sizeY) / 5; i++) { $("#t" + Math.floor((Math.random() * (patternElements * sizeX * sizeY)))).addClass("shapeAlive"); }; //-- Animate -- setInterval(progress, 1000); function progress() { var dying = []; var rising = []; for (i = 0; i < sizeX; i++) { for (j = 0; j < sizeY; j++) { var tileBaseId = (j * sizeX + i) * patternElements; for (k = 0; k < patternElements; k++) { var tileSelect = "#t" + (tileBaseId + k); var alive = $(tileSelect).filter(".shapeAlive").length; var nbSelect = $.map(patternNeighbours[k], function (n, i) { return ("#t" + (tileBaseId + n)); }).join(); var count = $(nbSelect).filter(".shapeAlive").length; if (alive && (count < 2 || count > 3)) { dying.push(tileSelect); }; if (!alive && count == 3) { rising.push(tileSelect); }; } } } $(dying.join()).removeClass("shapeAlive"); $(rising.join()).addClass("shapeAlive"); }; 

CSS

.shapeHexagon { background-color: black; height: 8px; width: 16px; position: absolute; } .shapeUp { background-color: black; height: 8px; width: 16px; position: absolute; } .shapeUp:after, .shapeHexagon:before { content:""; position: absolute; top: -8px; left: 0px; width: 0; height: 0; border-style: solid; border-color: transparent transparent black; border-width: 0px 8px 8px 8px; } .shapeAlive.shapeUp { background-color: green; } .shapeAlive.shapeUp:after { border-color: transparent transparent green; } .shapeDown { background-color: black; height: 8px; width: 16px; position: absolute; } .shapeDown:after, .shapeHexagon:after { content:""; position: absolute; top: 8px; left: 0px; width: 0; height: 0; border-style: solid; border-color: black transparent transparent transparent; border-width: 8px 8px 0 8px; } .shapeAlive.shapeUp:after, .shapeAlive.shapeHexagon:before { border-color: transparent transparent green; } .shapeAlive.shapeDown, .shapeAlive.shapeHexagon { background-color: green; } .shapeAlive.shapeDown:after, .shapeAlive.shapeHexagon:after { border-color: green transparent transparent transparent; }