From 7be840fdf1d4448fe2c2abf6cf037d5946015cf3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 29 Apr 2017 15:45:22 -0400 Subject: generate hexagons --- client/index.js | 43 +++++++++++++++++++++++++++++++++++++++++++ index.html | 14 ++++++++++++-- 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/client/index.js b/client/index.js index a182cca..e44508d 100644 --- a/client/index.js +++ b/client/index.js @@ -3,6 +3,45 @@ import keys from './lib/keys' import kalimba from './lib/kalimba' import colundi from './lib/colundi' import { mod, browser, requestAudioContext } from './lib/util' +import { Grid, Views, HexFactory } from 'honeycomb-grid' + +const Hex = HexFactory({ + size: 50, + template: function(hex) { + return ` + + + + ` + } +}) + +const container = document.querySelector("#container") +const view = Views.DOM({ + container: container, + origin: { + x: container.offsetWidth / 2, + y: container.offsetHeight / 2, + } +}) + +const origin = Hex(0,0,0) +const seen = {} +let perimeter = [ origin ] + +for (let i = 0, len = colundi.list.length; i < len;) { + const hex = perimeter.shift() + const id = hexToString(hex) + if (seen[id]) continue + seen[id] = true + let pair = colundi.list[i] + const neighbors = [0,1,2,3,4,5].map((i) => Hex.neighbor(hex, i)) + perimeter = perimeter.concat(neighbors) + view.renderHexes([ hex ]) + const el = container.lastChild + el.querySelector('polygon').setAttribute('fill', pair.color) + i++ +} requestAudioContext(() => { }) @@ -13,3 +52,7 @@ keys.listen(function(index){ kalimba.play(freq) }) +function hexToString(hex) { + return [hex.x, hex.y, hex.z].join("_") +} + diff --git a/index.html b/index.html index c17aafb..2175fbf 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,26 @@ honeycomb +