requirebin sketch

index.js

//node.js logo hexagonal cellular automata thing
//
// author: Mikola Lysenko
// (c) 2015 MIT License
//

//Configuration parameters
var ON_STYLE    = '#80bd01'
var OFF_STYLE   = '#333'
var GRID_DIM    = 20
var HEX_RADIUS  = 10
var HEX_PADDING = 2
var TICK_RATE   = 0.1
var RULE_NUM    = (Math.random() * (1<<14))|0
var WIDTH       = 1.1 * (Math.sqrt(3)/2*HEX_RADIUS + HEX_PADDING) *
                        (2 * GRID_DIM + 1)
var HEIGHT      = 1.1 * (HEX_RADIUS + HEX_PADDING) * (2 * GRID_DIM + 1)

var canvas = document.createElement('canvas')
canvas.width  = WIDTH|0
canvas.height = HEIGHT|0
document.body.appendChild(canvas)

var ruleP = document.createElement('p')
ruleP.innerHTML = 'rule number: ' + RULE_NUM
document.body.appendChild(ruleP)

var context = canvas.getContext('2d')

var VI = [-0.5, Math.sqrt(3)/2]
var VJ = [ 0.5, Math.sqrt(3)/2]

var DATA = new Array(6 * GRID_DIM * GRID_DIM)
var NEXT_DATA = DATA.slice()

var TIMER = 1.0

var MOORE_NEIGHBORHOOD = [
  [ 0,-1],
  [ 1,-1],
  [ 1, 0],
  [ 0, 1],
  [-1, 1],
  [-1, 0]
]

var POLYGON = [
  [0,1],
  [Math.sqrt(3)/2, 0.5],
  [Math.sqrt(3)/2,-0.5],
  [0,-1],
  [-Math.sqrt(3)/2,-0.5],
  [-Math.sqrt(3)/2, 0.5]
]

function gridIndex(i, j) {
  return (2 * GRID_DIM + 1) * (i + GRID_DIM) + j + GRID_DIM
}

function gridRead(i, j) {
  if(Math.abs(i) > GRID_DIM ||
     Math.abs(j) > GRID_DIM ||
     Math.abs(i+j) > GRID_DIM) {
    return 0
  }
  return DATA[gridIndex(i, j)]
}

function drawHexagon(i, j) {
  var cx = (HEX_RADIUS + HEX_PADDING) * (VI[0] * i + VJ[0] * j)
  var cy = (HEX_RADIUS + HEX_PADDING) * (VI[1] * i + VJ[1] * j)

  context.beginPath()
  var N = POLYGON.length
  var p = POLYGON[N-1]
  context.moveTo(
    cy + 0.5 * HEX_RADIUS * p[1] + canvas.width/2,
    cx + 0.5 * HEX_RADIUS * p[0] + canvas.height/2)
  for(var k=0; k<N; ++k) {
    var p = POLYGON[k]
    context.lineTo(
      cy + 0.5 * HEX_RADIUS * p[1] + canvas.width/2,
      cx + 0.5 * HEX_RADIUS * p[0] + canvas.height/2)
  }
  context.closePath()
  context.fill()
}

function drawGrid() {
  for(var i=-GRID_DIM; i<=GRID_DIM; ++i) {
    for(var j=-GRID_DIM; j<=GRID_DIM; ++j) {
      if(Math.max(Math.abs(i), Math.abs(j), Math.abs(i+j)) > GRID_DIM) {
        continue
      }
      if(gridRead(i, j)) {
        context.fillStyle = ON_STYLE
      } else {
        context.fillStyle = OFF_STYLE
      }
      drawHexagon(i, j)
    }
  }
}

function tick() {
  var nextGrid = NEXT_DATA
  for(var i=-GRID_DIM; i<=GRID_DIM; ++i) {
    for(var j=-GRID_DIM; j<=GRID_DIM; ++j) {
      var sum = 0
      for(var k=0; k<MOORE_NEIGHBORHOOD.length; ++k) {
        sum += gridRead(i+MOORE_NEIGHBORHOOD[k][0], j+MOORE_NEIGHBORHOOD[k][1])
      }
      var state = gridRead(i,j)

      nextGrid[gridIndex(i,j)] = (RULE_NUM >> (2 * sum + state)) & 1
    }
  }
  NEXT_DATA = DATA
  DATA = nextGrid
}

function initGrid() {
  for(var i=-GRID_DIM; i<=GRID_DIM; ++i) {
    for(var j=-GRID_DIM; j<=GRID_DIM; ++j) {
      if(Math.max(Math.abs(i), Math.abs(j), Math.abs(i+j)) > GRID_DIM) {
        continue
      }
      if(i < 0.5*GRID_DIM &&
        -j < 0.5*GRID_DIM &&
         i+j < 0.5*GRID_DIM &&
        -0.5*GRID_DIM < i+j) {
        DATA[gridIndex(i,j)] = 1
      } else {
        DATA[gridIndex(i,j)] = 0
      }
    }
  }
}

function anim() {
  requestAnimationFrame(anim)
  TIMER -= TICK_RATE
  while(TIMER < 0) {
    TIMER += 1
    tick()
  }
  drawGrid()
}

initGrid()
anim()

minified.js

var ON_STYLE="#80bd01";var OFF_STYLE="#333";var GRID_DIM=20;var HEX_RADIUS=10;var HEX_PADDING=2;var TICK_RATE=.1;var RULE_NUM=Math.random()*(1<<14)|0;var WIDTH=1.1*(Math.sqrt(3)/2*HEX_RADIUS+HEX_PADDING)*(2*GRID_DIM+1);var HEIGHT=1.1*(HEX_RADIUS+HEX_PADDING)*(2*GRID_DIM+1);var canvas=document.createElement("canvas");canvas.width=WIDTH|0;canvas.height=HEIGHT|0;document.body.appendChild(canvas);var ruleP=document.createElement("p");ruleP.innerHTML="rule number: "+RULE_NUM;document.body.appendChild(ruleP);var context=canvas.getContext("2d");var VI=[-.5,Math.sqrt(3)/2];var VJ=[.5,Math.sqrt(3)/2];var DATA=new Array(6*GRID_DIM*GRID_DIM);var NEXT_DATA=DATA.slice();var TIMER=1;var MOORE_NEIGHBORHOOD=[[0,-1],[1,-1],[1,0],[0,1],[-1,1],[-1,0]];var POLYGON=[[0,1],[Math.sqrt(3)/2,.5],[Math.sqrt(3)/2,-.5],[0,-1],[-Math.sqrt(3)/2,-.5],[-Math.sqrt(3)/2,.5]];function gridIndex(i,j){return(2*GRID_DIM+1)*(i+GRID_DIM)+j+GRID_DIM}function gridRead(i,j){if(Math.abs(i)>GRID_DIM||Math.abs(j)>GRID_DIM||Math.abs(i+j)>GRID_DIM){return 0}return DATA[gridIndex(i,j)]}function drawHexagon(i,j){var cx=(HEX_RADIUS+HEX_PADDING)*(VI[0]*i+VJ[0]*j);var cy=(HEX_RADIUS+HEX_PADDING)*(VI[1]*i+VJ[1]*j);context.beginPath();var N=POLYGON.length;var p=POLYGON[N-1];context.moveTo(cy+.5*HEX_RADIUS*p[1]+canvas.width/2,cx+.5*HEX_RADIUS*p[0]+canvas.height/2);for(var k=0;k<N;++k){var p=POLYGON[k];context.lineTo(cy+.5*HEX_RADIUS*p[1]+canvas.width/2,cx+.5*HEX_RADIUS*p[0]+canvas.height/2)}context.closePath();context.fill()}function drawGrid(){for(var i=-GRID_DIM;i<=GRID_DIM;++i){for(var j=-GRID_DIM;j<=GRID_DIM;++j){if(Math.max(Math.abs(i),Math.abs(j),Math.abs(i+j))>GRID_DIM){continue}if(gridRead(i,j)){context.fillStyle=ON_STYLE}else{context.fillStyle=OFF_STYLE}drawHexagon(i,j)}}}function tick(){var nextGrid=NEXT_DATA;for(var i=-GRID_DIM;i<=GRID_DIM;++i){for(var j=-GRID_DIM;j<=GRID_DIM;++j){var sum=0;for(var k=0;k<MOORE_NEIGHBORHOOD.length;++k){sum+=gridRead(i+MOORE_NEIGHBORHOOD[k][0],j+MOORE_NEIGHBORHOOD[k][1])}var state=gridRead(i,j);nextGrid[gridIndex(i,j)]=RULE_NUM>>2*sum+state&1}}NEXT_DATA=DATA;DATA=nextGrid}function initGrid(){for(var i=-GRID_DIM;i<=GRID_DIM;++i){for(var j=-GRID_DIM;j<=GRID_DIM;++j){if(Math.max(Math.abs(i),Math.abs(j),Math.abs(i+j))>GRID_DIM){continue}if(i<.5*GRID_DIM&&-j<.5*GRID_DIM&&i+j<.5*GRID_DIM&&-.5*GRID_DIM<i+j){DATA[gridIndex(i,j)]=1}else{DATA[gridIndex(i,j)]=0}}}}function anim(){requestAnimationFrame(anim);TIMER-=TICK_RATE;while(TIMER<0){TIMER+=1;tick()}drawGrid()}initGrid();anim();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0"
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin