mitchellbusby/water.html

## water.html
<html>
<head>
	<title>Water</title>
</head>
<body>
<canvas id="canvas" width="800" height="1400">

</canvas>
<script type="text/javascript">

let ACCELERATION_X = 0;
let ACCELERATION_Y = 1.25;
let gamma = 0;

class Droplet {
	constructor(x, y) {
		this.x = x;
		this.y = y;
		this.vx = 0;
		this.vy = 0;
	}

	tick() {
		this.vx = this.vx + ACCELERATION_X;
		this.x = this.x + this.vx;
		this.vy = this.vy + ACCELERATION_Y;
		this.y = this.y + this.vy;
	}

	isOnScreen() {
		if (0 < this.x < canvas.width && 0 < this.y < canvas.height) {
			return true;
		}
		console.log('Gonna delete droplet - (' + this.x + ',' + this.y + ')');
		return false;
	}

	render(ctx) {
		ctx.beginPath();
		ctx.fillStyle = "#79CDCD";
		ctx.arc(this.x, this.y, 4, 0, 2*Math.PI);
		ctx.fill();
	}
}

water = [];

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const tick = () => {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	let droplet = new Droplet(400, 1);
	water.forEach(drip => drip.tick());
	water.push(droplet);
	water = water.filter(drip => drip.isOnScreen());
	water.forEach(drip => drip.render(ctx));
	setTimeout(tick, 40);
}

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};

const update_gravity = (ev) => {
	gamma = ev.gamma + 90;
	console.log(gamma);
	let angle = Math.radians(gamma);
	ACCELERATION_X = 1.25 * Math.cos(Math.PI + angle);
	ACCELERATION_Y = 1.25 * Math.sin(angle);
}

window.addEventListener('deviceorientation', update_gravity);

tick();

</script>
</body>
</html>
	<html>
	<head>
	<title>Water</title>
	</head>
	<body>
	<canvas id="canvas" width="800" height="1400">

	</canvas>
	<script type="text/javascript">

	let ACCELERATION_X = 0;
	let ACCELERATION_Y = 1.25;
	let gamma = 0;

	class Droplet {
	constructor(x, y) {
	this.x = x;
	this.y = y;
	this.vx = 0;
	this.vy = 0;
	}

	tick() {
	this.vx = this.vx + ACCELERATION_X;
	this.x = this.x + this.vx;
	this.vy = this.vy + ACCELERATION_Y;
	this.y = this.y + this.vy;
	}

	isOnScreen() {
	if (0 < this.x < canvas.width && 0 < this.y < canvas.height) {
	return true;
	}
	console.log('Gonna delete droplet - (' + this.x + ',' + this.y + ')');
	return false;
	}

	render(ctx) {
	ctx.beginPath();
	ctx.fillStyle = "#79CDCD";
	ctx.arc(this.x, this.y, 4, 0, 2*Math.PI);
	ctx.fill();
	}
	}

	water = [];

	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");

	const tick = () => {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	let droplet = new Droplet(400, 1);
	water.forEach(drip => drip.tick());
	water.push(droplet);
	water = water.filter(drip => drip.isOnScreen());
	water.forEach(drip => drip.render(ctx));
	setTimeout(tick, 40);
	}

	Math.radians = function(degrees) {
	return degrees * Math.PI / 180;
	};

	const update_gravity = (ev) => {
	gamma = ev.gamma + 90;
	console.log(gamma);
	let angle = Math.radians(gamma);
	ACCELERATION_X = 1.25 * Math.cos(Math.PI + angle);
	ACCELERATION_Y = 1.25 * Math.sin(angle);
	}

	window.addEventListener('deviceorientation', update_gravity);

	tick();

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