1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import Tone from 'tone'
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 `
<svg class='hex'>
<polygon points="43.30127019 0 86.60254039 25 86.60254039 75 43.30127019 100 0 75 0 25"/>
</svg>
`
}
})
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(() => {
})
keys.listen(function(index){
index += 20
const freq = colundi.index(index)
kalimba.play(freq)
})
function hexToString(hex) {
return [hex.x, hex.y, hex.z].join("_")
}
|
