<canvas id="cnv" width="800" height="800"></canvas>

<style>
	body {
		margin: 0px auto;
	}

</style>

<script>
	'use strict'

	void function () {
		//Config
		const frameRate = 25
		const backgroundColor = 'black'
		const wireframeColor = 'green'
		const size = 20
		let dots = [
			[-100, -100, -100, -100],
			[-100, -100, -100, 100],
			[-100, -100, 100, -100],
			[-100, -100, 100, 100],
			[-100, 100, -100, -100],
			[-100, 100, -100, 100],
			[-100, 100, 100, -100],
			[-100, 100, 100, 100],
			[100, -100, -100, -100],
			[100, -100, -100, 100],
			[100, -100, 100, -100],
			[100, -100, 100, 100],
			[100, 100, -100, -100],
			[100, 100, -100, 100],
			[100, 100, 100, -100],
			[100, 100, 100, 100]
		]



		const cnv = document.getElementById('cnv')
		const ctx = cnv.getContext('2d')
		let timestamp = new Date().getTime()
		const frameStep = Math.round(1000 / frameRate)
		let offsetX = Math.round(cnv.width / 2)
		let offsetY = Math.round(cnv.height / 2)
		function init() {


			function renderFrame() {
				ctx.fillStyle = backgroundColor
				ctx.fillRect(0, 0, cnv.width, cnv.height)
				ctx.closePath()
				dots.forEach( dot => {
					let renderSize = (size + dot[3] / 10)
					let minX = Math.round(offsetX + dot[0]) + dot[2]
					let minY = Math.round(offsetY + dot[1]) + dot[2]


					ctx.fillStyle = wireframeColor
					ctx.strokeStyle = wireframeColor
					ctx.beginPath()
					ctx.arc(minX,minY,renderSize,0,2*Math.PI)
					ctx.fill()
					//ctx.fillRect(minX, minY, renderSize, renderSize)
					ctx.closePath()
				})
				dots.forEach( (dot, index, arr) => {
					let renderSize = (size + dot[3] / 10)
					let minX = Math.round(offsetX + dot[0]) + dot[2]
					let minY = Math.round(offsetY + dot[1]) + dot[2]

					ctx.beginPath()
					ctx.strokeStyle = wireframeColor
					ctx.moveTo(minX, minY)
					ctx.lineTo(minX - dot[0], minY)
					ctx.stroke()
					ctx.closePath()

					ctx.beginPath()
					ctx.strokeStyle = wireframeColor
					ctx.moveTo(minX, minY)
					ctx.lineTo(minX, minY - dot[1])
					ctx.stroke()
					ctx.closePath()

					ctx.beginPath()
					ctx.strokeStyle = wireframeColor
					ctx.moveTo(minX, minY)
					ctx.lineTo(minX - dot[2], minY - dot[2])
					ctx.stroke()
					ctx.closePath()

				})

				//dots = dots.map( dot => rotatePoint2(dot, 1) )
				dots = dots.map( dot => rotatePoint(dot, 1) )
			}

			function playAnimation() {


				if (timestamp + frameStep < new Date().getTime()) {
					timestamp = new Date().getTime()
					renderFrame()
				}
				requestAnimationFrame(playAnimation)
			}
			requestAnimationFrame(playAnimation)
		}
		function rotatePoint(dot, angle, axis) {
			let cx = size/2
			let cy = size/2
			let x = dot[0]
			let y = dot[1]
			let z = dot[2]
			let q = dot[3]
			let rotOne = y
			let rotTwo = q
			let radians = (Math.PI / 180) * angle,
				cos = Math.cos(radians),
				sin = Math.sin(radians)
			rotOne = (cos * (rotOne - cx)) + (sin * (rotTwo - cy)) + cx
			rotTwo = (cos * (rotTwo - cy)) - (sin * (rotOne - cx)) + cy
		    return [x, rotOne, z, rotTwo]
		}
		function rotatePoint2(dot, angle, axis) {
			let cx = size/2
			let cy = size/2
			let x = dot[0]
			let y = dot[1]
			let z = dot[2]
			let q = dot[3]
			let rotOne = q
			let rotTwo = x
			let radians = (Math.PI / 180) * angle,
				cos = Math.cos(radians),
				sin = Math.sin(radians)
			rotOne = (cos * (rotOne - cx)) + (sin * (rotTwo - cy)) + cx
			rotTwo = (cos * (rotTwo - cy)) - (sin * (rotOne - cx)) + cy
		    return [rotTwo, y, z, rotOne]
		}


		document.addEventListener('DOMContentLoaded', event => {
			cnv.width = window.innerWidth
			cnv.height = window.innerHeight
			offsetX = Math.round(cnv.width / 2)
			offsetY = Math.round(cnv.height / 2)
			init()
		})

		window.onresize = event => {
			cnv.width = window.innerWidth
			cnv.height = window.innerHeight
			offsetX = Math.round(cnv.width / 2)
			offsetY = Math.round(cnv.height / 2)
		}

	}()







</script>