Untitled

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	canvas.height = window.innerHeight-20;
	canvas.width = window.innerWidth-20;
	var count=1
	var points = []
	class point{
		constructor(x,y,vx,vy){
			this.x = x
			this.y = y
			this.px = this.x
			this.py = this.y
			this.r = 5
			this.vx = vx
			this.vy = vy
			this.lifespan = 0
			this.alive = true
		}
		draw(){
			ctx.moveTo(this.px,this.py)
			ctx.lineTo(this.x,this.y)
			ctx.stroke()
			this.x+=this.vx
			this.y+=this.vy
			this.dx = this.px-this.x
			this.dy = this.py-this.y
			this.r = Math.sqrt((this.dx**2) + (this.dy**2))
			if(this.lifespan>2){this.alive = false; this.vx=0;this.vy=0;}
			if(this.r>50 && this.alive){
				this.lifespan++
				count++
				points.push(new point(this.x,this.y,this.vx,this.vy))
				this.vx +=-1+Math.random()*2
				this.vy +=-1+Math.random()*2
				this.px = this.x
				this.py = this.y
				ctx.moveTo(this.x,this.y)
				ctx.arc(this.x,this.y,2,0,7)
				ctx.fill()
			}
		}
	}
	points[0]=new point(innerWidth/2,innerHeight-200,0,-1)
	function draw(){
	for(var i = 0;i<count;i++){
		points[i].draw()
	}
	}
	setInterval(draw,16)
</script>
</body>
</html>