misterymyra_collaboration Phases and things

by Admiral Potato

HTML

<script src="https://unpkg.com/vue@2"></script>
<div id="app">
	<div class="flex">
		<div v-for="(configuration, label) in configurations">
			<svg viewBox="-256 -256 512 512">
				<defs>
					<g id="smallDot">
						<circle r="8" fill="#000" stroke="#fff" stroke-width="2" />
						<circle r="2" fill="#fff" />
					</g>
					<g id="largerDot">
						<circle r="10" fill="#000" stroke="#fff" stroke-width="2" />
						<circle r="3" fill="#fff" />
					</g>
					<line id="line" x0="0" x1="30" y0="0" y1="0" stroke="#fff" stroke-weight="2"/>
					<g id="leg">
						<use xlink:href="#line" />
						<use xlink:href="#smallDot" transform="translate(30, 0)" />
					</g>
					<g id="bot">
						<use xlink:href="#leg" transform="rotate(000)" />
						<use xlink:href="#leg" transform="rotate(120)" />
						<use xlink:href="#leg" transform="rotate(240)" />
						<use xlink:href="#largerDot" />
					</g>
				</defs>
				<g>
					<text x="-240" y="-220" fill="#fff" font-size="32">{{label}}</text>
					<bot
						v-for="n in configuration.botCount"
						:motion="configuration.motion"
						:time="time / configuration.botCount"
						:phase="(n -1) / configuration.botCount"></bot>
				</g>
			</svg>
		</div>
	</div>
</div>

CSS

html{
	font-size: 16px;
}
body{
	background-color: #000;
}
.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex > div{
	width: 50%;
}
svg{
	margin: 0.5rem;
	border: 2px solid #333;
	display: block;
}

JavaScript

const tau = Math.PI * 2;

Vue.component(
	'bot',
	{
		props: {
			time: Number,
			phase: Number,
			motion: Function
		},
		computed: {
			transforms: function() {
				return this.motion();
			}
		},
		methods: {
		},
		template: `
			<g :transform="transforms">
				<use xlink:href="#bot" />
			</g>
		`
	}
);

let vueApp = new Vue({
	el: '#app',
	data: {
		time: 0,
		configurations: {
			a: {
				botCount: 6,
				motion: function(){
					let phase = this.phase + this.time;
					let deg = phase * 360;
					let radius = 100;
					return [
						`rotate(${-2 * deg})`,
						`translate(${radius}, 0)`,
						`rotate(${-3 * deg})`,
						`translate(${0.5 * radius}, 0)`,
						`rotate(${-6 * deg})`,
						`translate(${-0.25 * radius}, 0)`,
						`rotate(${deg * 12})`,
					].join(' ');
				}
			},
			b: {
				botCount: 6,
				motion: function(){
					let phase = this.phase + this.time;
					let deg = phase * 360;
					let radius = 100;
					return [
						`rotate(${-2 * deg})`,
						`translate(${radius}, 0)`,
						`rotate(${-3 * deg})`,
						`translate(${0.5 * radius}, 0)`,
						`rotate(${deg * 6})`,
					].join(' ');
				}
			},
			c: {
				botCount: 6,
				motion: function() {
					let phase = this.phase + this.time;
					let deg = phase * 360;
					let radius = 100;
					return [
						`rotate(${2 * deg})`,
						`translate(${radius}, 0)`,
						`rotate(${-3 * deg})`,
						`translate(${0.5 * radius}, 0)`,
						`rotate(${deg * 6})`,
					].join(' ');
				}
			},
			d: {
				botCount: 6,
				motion: function() {
					let phase = this.phase + this.time;
					let deg = phase * 360;
					let radius = 100;
					return [
						`rotate(${-4 * deg})`,
						`translate(${radius}, 0)`,
						`rotate(${7 * deg})`,
						`translate(${0.5 * radius}, 0)`,
						`rotate(${deg * 5})`,
					].join(' ');
				}
			},
			e: {
				botCount: 8,
				motion: function() {
					let phase = this.phase + this.time;
					let deg = phase * 360;
					let radius = 100;
					return...