ioxua/canvas-study.html

## canvas-study.html
<!DOCTYPE html>
<html>
<head>
	<title>Testing Canvas</title>
	<style>
		canvas {
			background-color: #ababab;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		function log(something) {
			console.log(something)
		}

		class Utils {
			constructor() {
				let self = this
				this.generate = {
					random: {
						int: {
							between(min, max) {
								return Math.round( Math.random() * max * 2 + min )
							},
							notnull: {
								between(min, max) {
									let num = self.generate.random.int.between(min, max)
									if(num == 0)
										num = self.generate.random.int.between(min, max)
									return num
								}
							}
						},
						from: {
							array(array) {
								return array[ Math.floor( Math.random() * array.length )]
							}
						}
					}
				}
			}
		}

		class Thing {
			constructor(x, y, w, h, vx, vy) {
				this.x = x || 0
				this.y = y || 0
				this.width = w || 0
				this.height = h || 0
				this.vx = vx || 0
				this.vy = vy || 0

				this.utils = new Utils()
			}

			update() {
				this.x += this.vx
				this.y += this.vy
			}
		}

		class Drawable extends Thing {
			constructor(x, y, w, h, c, s) {
				super(x, y, w, h, 0, 0)

				this.color = c || 'black'
				this.shape = s || 'rect'
			}

			draw(ctx) {
				switch(this.shape) {
					case 'rect':
						ctx.fillStyle = this.color
						ctx.fillRect(this.x, this.y, this.width, this.height)
						break
					case 'circle':
						ctx.fillStyle = this.color

						ctx.beginPath()
						ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2)
						ctx.fill()
						break;
					default:
						throw new Exception(this.shape + " is not supported!")
				}
			}
		}

		class Particle extends Drawable {
			constructor(x, y, r, c, vx, vy) {
				super(x, y, r, r, c, 'circle')

				this.vx = vx || 0
				this.vy = vy || 0
			}

			update() {
				super.update()

				// Reducing the speed
				if(this.vx > 0)
					this.vx += .1
				else if(this.vx > 0)
					this.vx -= .1

				if(this.vy > 0)
					this.vy += .1
				else if(this.vy > 0)
					this.vy -= .1
			}
		}

		class Explosion extends Thing {
			constructor(x, y) {
				super(x, y, 1, 1, 0, 0)

				this.particles = []

				let colors = ['red', 'green', 'orange', 'yellow', 'pink']
				let quant = this.utils.generate.random.int.between(10, 110)

				for(let i = 0; i < quant; i++) {
					let r = this.utils.generate.random.int.between(1, 2)
					let c = this.utils.generate.random.from.array(colors)

					let vx = this.utils.generate.random.int.between(-4, 4)

					let vy = this.utils.generate.random.int.between(-4, 4)

					this.particles.push(new Particle(this.x, this.y, r, c, vx, vy))
				}
			}

			update(ctx) {
				super.update()

				for (var i = this.particles.length - 1; i >= 0; i--) {
					let part = this.particles[i]

					part.update()
					part.draw(ctx)
				}
			}
		}

		class Stage {
			constructor(elements) {
				this.drawables = elements || []
				this.frequency = 100
				this.state = {}
			}

			add(thing) {
				if( !thing instanceof Thing )
					throw new Exception(thing + " must extend Thing")

				this.drawables.push(thing)
			}

			run(ctx) {
				this.state = setInterval(() => {
					ctx.clearRect(
						0,
						0,
						ctx.canvas.width,
						ctx.canvas.height
					)

					for (var i = this.drawables.length - 1; i >= 0; i--) {
						let elem = this.drawables[i]

						elem.update(ctx)

						if(elem.draw)
							elem.draw(ctx)
					}
				}, this.frequency)
			}

			stop() {
				clearInterval(this.state)
			}
		}

		class Manager {
			constructor(ctx) {
				this.ctx = ctx
				this.currentStage = {}
			}

			start(stage) {
				if(this.currentStage instanceof Stage)
					this.currentStage.stop()

				this.currentStage = stage
				this.currentStage.run(this.ctx)
			}
		}

		window.onload = function() {
			// Setting-up the canvas
			let canvas = document.getElementById("canvas")
			canvas.width = 500
			canvas.height = 500

			let ctx = canvas.getContext("2d")

			// Setting-up the manager and stage
			let manager = new Manager(ctx)
			let stage1 = new Stage()
			let stage2 = new Stage()

			// Adding things to the stage
			let thing = new Explosion(ctx.canvas.width / 2, ctx.canvas.height / 2, 3, 'red')
			thing.vx = 1

			stage1.add(thing)
			stage1.frequency = 2

			thing = new Particle(50, 50, 3, 'green')
			thing.vx = 1
			stage2.add(thing)

			// Run!
			console.log(thing.utils.generate.random.int.notnull.between(-2, 2))
			manager.start(stage1)

			setTimeout(() => {
				manager.start(stage2)
			}, 20000)
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing Canvas</title>
	<style>
	canvas {
	background-color: #ababab;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
	function log(something) {
	console.log(something)
	}

	class Utils {
	constructor() {
	let self = this
	this.generate = {
	random: {
	int: {
	between(min, max) {
	return Math.round( Math.random() * max * 2 + min )
	},
	notnull: {
	between(min, max) {
	let num = self.generate.random.int.between(min, max)
	if(num == 0)
	num = self.generate.random.int.between(min, max)
	return num
	}
	}
	},
	from: {
	array(array) {
	return array[ Math.floor( Math.random() * array.length )]
	}
	}
	}
	}
	}
	}

	class Thing {
	constructor(x, y, w, h, vx, vy) {
	this.x = x \|\| 0
	this.y = y \|\| 0
	this.width = w \|\| 0
	this.height = h \|\| 0
	this.vx = vx \|\| 0
	this.vy = vy \|\| 0

	this.utils = new Utils()
	}

	update() {
	this.x += this.vx
	this.y += this.vy
	}
	}

	class Drawable extends Thing {
	constructor(x, y, w, h, c, s) {
	super(x, y, w, h, 0, 0)

	this.color = c \|\| 'black'
	this.shape = s \|\| 'rect'
	}

	draw(ctx) {
	switch(this.shape) {
	case 'rect':
	ctx.fillStyle = this.color
	ctx.fillRect(this.x, this.y, this.width, this.height)
	break
	case 'circle':
	ctx.fillStyle = this.color

	ctx.beginPath()
	ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2)
	ctx.fill()
	break;
	default:
	throw new Exception(this.shape + " is not supported!")
	}
	}
	}

	class Particle extends Drawable {
	constructor(x, y, r, c, vx, vy) {
	super(x, y, r, r, c, 'circle')

	this.vx = vx \|\| 0
	this.vy = vy \|\| 0
	}

	update() {
	super.update()

	// Reducing the speed
	if(this.vx > 0)
	this.vx += .1
	else if(this.vx > 0)
	this.vx -= .1

	if(this.vy > 0)
	this.vy += .1
	else if(this.vy > 0)
	this.vy -= .1
	}
	}

	class Explosion extends Thing {
	constructor(x, y) {
	super(x, y, 1, 1, 0, 0)

	this.particles = []

	let colors = ['red', 'green', 'orange', 'yellow', 'pink']
	let quant = this.utils.generate.random.int.between(10, 110)

	for(let i = 0; i < quant; i++) {
	let r = this.utils.generate.random.int.between(1, 2)
	let c = this.utils.generate.random.from.array(colors)

	let vx = this.utils.generate.random.int.between(-4, 4)

	let vy = this.utils.generate.random.int.between(-4, 4)

	this.particles.push(new Particle(this.x, this.y, r, c, vx, vy))
	}
	}

	update(ctx) {
	super.update()

	for (var i = this.particles.length - 1; i >= 0; i--) {
	let part = this.particles[i]

	part.update()
	part.draw(ctx)
	}
	}
	}

	class Stage {
	constructor(elements) {
	this.drawables = elements \|\| []
	this.frequency = 100
	this.state = {}
	}

	add(thing) {
	if( !thing instanceof Thing )
	throw new Exception(thing + " must extend Thing")

	this.drawables.push(thing)
	}

	run(ctx) {
	this.state = setInterval(() => {
	ctx.clearRect(
	0,
	0,
	ctx.canvas.width,
	ctx.canvas.height
	)

	for (var i = this.drawables.length - 1; i >= 0; i--) {
	let elem = this.drawables[i]

	elem.update(ctx)

	if(elem.draw)
	elem.draw(ctx)
	}
	}, this.frequency)
	}

	stop() {
	clearInterval(this.state)
	}
	}

	class Manager {
	constructor(ctx) {
	this.ctx = ctx
	this.currentStage = {}
	}

	start(stage) {
	if(this.currentStage instanceof Stage)
	this.currentStage.stop()

	this.currentStage = stage
	this.currentStage.run(this.ctx)
	}
	}

	window.onload = function() {
	// Setting-up the canvas
	let canvas = document.getElementById("canvas")
	canvas.width = 500
	canvas.height = 500

	let ctx = canvas.getContext("2d")

	// Setting-up the manager and stage
	let manager = new Manager(ctx)
	let stage1 = new Stage()
	let stage2 = new Stage()

	// Adding things to the stage
	let thing = new Explosion(ctx.canvas.width / 2, ctx.canvas.height / 2, 3, 'red')
	thing.vx = 1

	stage1.add(thing)
	stage1.frequency = 2

	thing = new Particle(50, 50, 3, 'green')
	thing.vx = 1
	stage2.add(thing)

	// Run!
	console.log(thing.utils.generate.random.int.notnull.between(-2, 2))
	manager.start(stage1)

	setTimeout(() => {
	manager.start(stage2)
	}, 20000)
	}
	</script>
	</body>
	</html>