This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.
-
-
Save dxlbnl/13d281ce35c1dcb0ad8eae725850b8bd to your computer and use it in GitHub Desktop.
Game of Life in 6's
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg viewBox="0 0 100 130"> | |
<defs> | |
<pattern id="pattern" width="{{patternWidth}}" height="{{patternHeight}}" patternUnits="userSpaceOnUse"> | |
<path fill="url(#pattern)" stroke-width=".1" d="M0 {{gridHeight}}0h{{patternWidth}}"/> | |
<path fill="url(#pattern)" stroke-width=".1" d="M0 {{patternHeight}}h{{patternWidth}}"/> | |
<path fill="url(#pattern)" stroke-width=".1" d="M0 0h{{patternWidth}}"/> | |
<path fill="url(#pattern)" stroke-width=".1" d="M0 {{patternHeight}}L{{patternWidth}} 0"/> | |
<path fill="url(#pattern)" stroke-width=".1" d="M0 0L{{patternWidth}} {{patternHeight}}"/> | |
</pattern> | |
</defs> | |
<path fill="url(#pattern)" d="M0 0h100v100H0z"/> | |
<g ref:pointSet> | |
{{#each gridPoints as point}} | |
<circle class="point" r=".3em" index={{JSON.stringify(point.index)}} cx={{point.x}} cy={{point.y}}/> | |
<!--<text x={{point.x-0.7}} y={{point.y+0.3}}>{{point.index}}</text>--> | |
{{/each}} | |
</g> | |
<g class='button' on:click="set({state: state === 'running' ? 'paused' : 'running'})"> | |
<rect width=3em height=1.5em/> | |
<text x=.1em y=1em>{{(state == 'running') ? 'Pauze' : 'Start'}}</text> | |
</g> | |
<g class='button' on:click="set({active: null})" transform="translate(14 0)"> | |
<rect width=3em height=1.5em/> | |
<text x=.1em y=1em>Reset</text> | |
</g> | |
</svg> | |
<style> | |
svg { | |
font-size: 4px; | |
} | |
pattern path { | |
stroke: black; | |
} | |
.button rect { | |
fill: rgba(12, 23, 140, 0.3); | |
cursor: pointer; | |
} | |
.button text { | |
font-size: 1em; | |
} | |
text { | |
font-size: .4em; | |
text-align: middle; | |
} | |
.point { | |
fill: #DDD; | |
transition: fill ease-in-out 0.1s; | |
} | |
:global(.active).point { | |
fill: #F00; | |
} | |
</style> | |
<script> | |
const sqrt3d4 = Math.sqrt(3/4.0) | |
export default { | |
data () { | |
return { | |
state: 'stopped' | |
} | |
}, | |
computed: { | |
patternWidth: (gridWidth) => gridWidth, | |
patternHeight: (gridHeight) => gridHeight * 2, | |
gridWidth: (repeat, viewBox) => viewBox[0] / repeat, | |
gridHeight: (gridWidth) => gridWidth * sqrt3d4, | |
gridPoints: (viewBox, gridWidth, gridHeight) => { | |
const p = [] | |
const [width, height] = [ | |
Math.floor(viewBox[0] / gridWidth), | |
Math.floor(viewBox[1] / gridHeight) | |
] | |
let x = 0, y = 0 | |
let even = true | |
let xStart = 0 | |
while (y <= height) { | |
while (x <= width) { | |
p.push({ | |
x: (x - xStart + (y%2 ? 0.5 : 0)) * gridWidth, | |
y: y * gridHeight, | |
index: [x, y] | |
}) | |
x ++ | |
} | |
y ++ | |
xStart = - Math.floor(y/2) | |
x = xStart | |
} | |
return p | |
} | |
}, | |
methods: { | |
random () { | |
const viewBox = this.get('viewBox') | |
const width = viewBox[0] / this.get('gridWidth') | |
const height = viewBox[1] / this.get('gridHeight') | |
const active = [] | |
for (let i=0; i<300; i++) { | |
const y = Math.round(Math.random() * height) | |
const x = Math.round(Math.random() * height) - Math.floor(y/2) | |
active.push([x, y]) | |
} | |
return new Map(active.map(p => [`${p}`, p])) | |
}, | |
tick () { | |
const nextActive = new Map() | |
const active = this.get('active') | |
const viewBox = this.get('viewBox') | |
const gridWidth = this.get('gridWidth') | |
const gridHeight = this.get('gridHeight') | |
const [width, height] = [ | |
Math.floor(viewBox[0] / gridWidth), | |
Math.floor(viewBox[1] / gridHeight) | |
] | |
for (let y = 0; y<height; y++) { | |
let xStart = - Math.floor(y/2) | |
for (let x = xStart; x<width+xStart; x++) { | |
// Ceck whether its in the set | |
let location = [x, y] | |
const neighbours = [[x,y-1],[x+1,y-1],[x+1,y],[x,y+1],[x-1,y+1],[x-1,y]] | |
const isActive = active.has(location.toString()) | |
const activeNeighbours = neighbours.filter(p => | |
active.has(p.toString())).length | |
/* | |
Any live cell with fewer than two live neighbours dies, as if caused by underpopulation. | |
Any live cell with two or three live neighbours lives on to the next generation. | |
Any live cell with more than three live neighbours dies, as if by overpopulation. | |
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction. | |
*/ | |
if (isActive) { | |
if (activeNeighbours < 2) { | |
continue // dies | |
} else if (activeNeighbours > 3) { | |
continue // dies | |
} else { | |
// lives | |
nextActive.set(location.toString(), location) | |
} | |
} else { | |
if (activeNeighbours === 3) { | |
// alive | |
nextActive.set(location.toString(), location) | |
} | |
} | |
} | |
} | |
this.set({ | |
active: nextActive | |
}) | |
} | |
}, | |
oncreate() { | |
this.set({ | |
active: this.random() | |
}) | |
this.set({ | |
isActive: ({index: [x, y]}) => this.get('active').find(([px, py]) => (x===px && y===py)) | |
}) | |
this.observe('state', state => { | |
if (state === 'running') { | |
if (this.interval) clearInterval(this.interval); | |
this.interval = setInterval(() => { | |
this.tick() | |
}, this.get('speed')); | |
} else { | |
clearInterval(this.interval); | |
} | |
}) | |
this.observe('active', active => { | |
if (!active) { | |
active = this.random() | |
this.set({active}) | |
} | |
this.refs.pointSet.querySelectorAll('.point.active') | |
.forEach(p => p.classList.remove('active')) | |
active.forEach(point => { | |
let el = this.refs.pointSet | |
.querySelector(`.point[index="[${point}]"]`) | |
if (el) { | |
el.classList.add('active') | |
} | |
}) | |
}) | |
}, | |
ondestroy() { | |
clearInterval(this.interval); | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"viewBox": [100, 100], | |
"repeat": 20, | |
"speed": 300 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment