TheNuttyMaker/GlowingThread

## GlowingThread
<!DOCTYPE html>
<html>
<head>
	<title>Glow</title>
	<style>
		#b {
			position: fixed;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle, #456,#200);
		}
		</style>
</head>
<body>
<canvas id="b"></canvas>

<audio id="a"></audio>

<script type="text/javascript">
	c = b.getContext('2d');
	MAX = 96*60;
	img = new Image();
	img.src='walkMan.png';
	img.onload=function update(){
	requestAnimationFrame(update);

	//Initialize
	if(!window.time){
		time=0;
		frame = 0;
		timeNextFrame = 0;
		vines= [{x:0, y:0,a:0,ai:0,w:8,p:[],l:MAX}];
	}
	currentTime = performance.now() /1000;
	while(time < currentTime){
		while(time<timeNextFrame){
			time += 1/16384;
		}
		frame++;
		timeNextFrame += 1/60;

		// update visuals
		vines = vines.filter( v => v.l--);
		vines.forEach( v => {
			dx = Math.cos(v.a) * v.w /2;
			dy = Math.sin(v.a) * v.w /2;
			v.x += dx;
			v.y += dy;
			v.a += v.ai / v.w / 2;
			v.p.splice(0, v.p.length - v.l);
			v.p.splice(0, v.p.length - 60 * 5);
			v.p.push({x:v.x, y: v.y, dx:dx, dy:dy});
			if(frame % 30 ==0){
				v.ai = Math.random() - .5;
			}
			if (v.w > 1 && Math.random() < v.l / 16384 / 2){
				vines.push({x:v.x, y:v.y,a:v.a,ai:v.ai,w:v.w/2,p:[],l:Math.min(v.l, 0|v.w*32*(1+Math.random()))});
			}
		})

	}


		//render visual
		H = b.height = 512;
		W = b.width = 0 | H * innerWidth/innerHeight;
		c.translate(W/2, H/2);
		c.shadowBlur = 24;


		vines.forEach( v => {
			c.shadowColor =
			c.strokeStyle = 'hsl('+(v.a*60|0)+',100%,'+(60+v.w*5|0)+'%)';
			if(v.w == 8){
				c.rotate(v.a);
				c.drawImage(img, frame*4&112,0,16,24,-8,0,16,24);
				c.rotate(-v.a);
				c.translate(-v.x, -v.y);
			}

			c.beginPath();
			l=v.p.length-1;
			for(i=l; p=v.p[i]; i-=8){
				e=i/l*8;
				c.moveTo(p.x,p.y);
				c.lineTo(p.x-e*p.dx,p.y-e*p.dy);
			}
			c.stroke();
		})

	}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Glow</title>
	<style>
	#b {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #456,#200);
	}
	</style>
	</head>
	<body>
	<canvas id="b"></canvas>

	<audio id="a"></audio>

	<script type="text/javascript">
	c = b.getContext('2d');
	MAX = 96*60;
	img = new Image();
	img.src='walkMan.png';
	img.onload=function update(){
	requestAnimationFrame(update);

	//Initialize
	if(!window.time){
	time=0;
	frame = 0;
	timeNextFrame = 0;
	vines= [{x:0, y:0,a:0,ai:0,w:8,p:[],l:MAX}];
	}
	currentTime = performance.now() /1000;
	while(time < currentTime){
	while(time<timeNextFrame){
	time += 1/16384;
	}
	frame++;
	timeNextFrame += 1/60;

	// update visuals
	vines = vines.filter( v => v.l--);
	vines.forEach( v => {
	dx = Math.cos(v.a) * v.w /2;
	dy = Math.sin(v.a) * v.w /2;
	v.x += dx;
	v.y += dy;
	v.a += v.ai / v.w / 2;
	v.p.splice(0, v.p.length - v.l);
	v.p.splice(0, v.p.length - 60 * 5);
	v.p.push({x:v.x, y: v.y, dx:dx, dy:dy});
	if(frame % 30 ==0){
	v.ai = Math.random() - .5;
	}
	if (v.w > 1 && Math.random() < v.l / 16384 / 2){
	vines.push({x:v.x, y:v.y,a:v.a,ai:v.ai,w:v.w/2,p:[],l:Math.min(v.l, 0\|v.w32(1+Math.random()))});
	}
	})

	}



	//render visual
	H = b.height = 512;
	W = b.width = 0 \| H * innerWidth/innerHeight;
	c.translate(W/2, H/2);
	c.shadowBlur = 24;


	vines.forEach( v => {
	c.shadowColor =
	c.strokeStyle = 'hsl('+(v.a60\|0)+',100%,'+(60+v.w5\|0)+'%)';
	if(v.w == 8){
	c.rotate(v.a);
	c.drawImage(img, frame*4&112,0,16,24,-8,0,16,24);
	c.rotate(-v.a);
	c.translate(-v.x, -v.y);
	}

	c.beginPath();
	l=v.p.length-1;
	for(i=l; p=v.p[i]; i-=8){
	e=i/l*8;
	c.moveTo(p.x,p.y);
	c.lineTo(p.x-ep.dx,p.y-ep.dy);
	}
	c.stroke();
	})

	}
	</script>
	</body>
	</html>