<canvas id=a>

body {
	overflow: hidden;
	margin: 0;
}

canvas {
	width: 100vw;
	height: 100vh;
}

const NUM_CRAYONS = 5
let w = a.width = innerWidth
let h = a.height = innerHeight
const c = a.getContext("2d")

const π = Math.PI
const { cos, sin, round } = Math
const deg = π / 180
const R = (a,b) => (a + (Math.random() * (b - a + 1))|0)

const setSize = () => {
	w=a.width=innerWidth
	h=a.height=innerHeight
}
addEventListener("resize", setSize)
addEventListener("click", setSize)


class Particle {
	constructor(x, y, angle, ω, v) {
		this.randomPosAndColor()
	}
	
	randomPosAndColor() {
		this.x = R(0, w)
		this.y = R(0, h)
		this.angle= R(0, 360)
		this.ω = R(-2, 2)
		this.v = R(2, 5)
		this.x0 = this.x 
		this.y0 = this.y
		this.color = `rgba(${R(0,255)}, ${R(0,255)}, ${R(0,255)}, 0.1)`
	}
	
	
	move() {
		let { x, y, x0, y0, v, angle, ω } = this
		this.x0 = x
		this.y0 = y
		x = this.x = round(this.x + cos(angle * deg) * v)
		y = this.y = round(this.y + sin(angle * deg) * v)
		this.angle += ω
		if (R(0,100) > 95) this.ω = R(0,9)/5 - 1
		if (R(0,1000) > 995) this.ω = this.ω + R(0, 180)
		if (x < 0 || x > w || y < 0 || y > h) this.randomPosAndColor()
	}
	
	render() {
		const { x, y, x0, y0, color } = this
		c.strokeStyle = color
		c.lineWidth = 6
		c.lineCap = "round"
		c.lineJoin = "round"
		c.beginPath()
		c.moveTo(x0, y0)
		c.lineTo(x, y)
		c.stroke()
	}
}

const particles = Array(NUM_CRAYONS).fill(0).map(p => new Particle())

~function L() {
	particles.map(p => { 
		p.render()
		p.move()
	})
	requestAnimationFrame(L)
}()