Dance of of the Rainbow Worms

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/gl-matrix.js"></script>
<canvas id="yeet"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#yeet {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #222;
}

JavaScript

var canvas = document.getElementById('yeet')
var context = canvas.getContext('2d')
var tau = Math.PI * 2

var points = []

var segments = 32
var segmentFraction = 1 / segments
var pointsRadius = 0.3
for (var i = 0; i < segments; i += 1) {
	var fraction = i * segmentFraction
	var angle = tau * fraction
	points.push(
  	glMatrix.vec3.fromValues(
    	Math.cos(angle) * pointsRadius,
    	Math.sin(angle) * pointsRadius,
			0.75 - (fraction * 1.5)
		)
  )
}
for (var i = 0; i < segments; i += 1) {
	var fraction = i * segmentFraction
	var angle = tau * (fraction + 0.5)
	points.push(
  	glMatrix.vec3.fromValues(
    	Math.cos(angle) * pointsRadius,
    	Math.sin(angle) * pointsRadius,
			0.75 - (fraction * 1.5)
		)
  )
}


var transformPoints = (matrix, points) => {
	return points.map((point, index) => {
  	var out = glMatrix.vec3.create()
    out.color = `hsl(${index * segmentFraction * 360}, 100%, 50%)`
  	return glMatrix.vec3.transformMat4(
	    out,
      point,
      matrix
    )
  }).sort((a, b) => {
  	return a[2] - b[2]
  })
}

var drawCircle = (x, y, radius) => {
  context.beginPath()
  context.arc(x, y, radius, 0, tau, true)
  context.fill()
}

var scootAwayFromCameraMatrix = glMatrix.mat4.fromTranslation(
	glMatrix.mat4.create(),
	glMatrix.vec3.fromValues(0, 0, -1),
)
var spinAxis = glMatrix.vec3.normalize(
	glMatrix.vec3.create(),
	glMatrix.vec3.fromValues(1, 1, 0)
)
var spinMatrix = glMatrix.mat4.create()
var compositeTransformMatrix = glMatrix.mat4.create()

var loop = (milliseconds) => {
	requestAnimationFrame(loop)
	var pixelRatio = window.devicePixelRatio
	var width = canvas.clientWidth * pixelRatio
	var height = canvas.clientHeight * pixelRatio
  var widthHalf = width * 0.5
  var heightHalf = height * 0.5
	var smallerAxis = Math.min(
  	widthHalf,
    heightHalf
  )
  var scale = smallerAxis
	var time = milliseconds / 1000
	var spinAngle = time / 32 * tau
	canvas.width = width
	canvas.height = height

	context.clearRect(0, 0, width, height)
 ...