Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<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>

data.json

{
	"viewBox": [100, 100],
	"repeat": 20,
	"speed": 300
	
}