JSFiddle - React, Tailwind, and code Playground

HTML

<title>Fluid Simulation in Javascript</title>
	

<body>
	<canvas id="canvas" width="500" height="400">
		Please <a href="http://www.google.com/chrome">update your browser</a> in order to view this page.
	</canvas>

</body>

CSS

html, body {
	margin: 0px;
	padding: 0px;
	background-color: #000;
}

#canvas {
	border: 3px solid #F00;
	border-radius: 0px;
	position: fixed;
	width: 500px;
	height: 400px;
	left: 50%;
	top: 50%;
	margin-left: -250px;
	margin-top: -200px;
	padding: 0px;
	background-color: #FFF;
	cursor: default;
	z-index: 0;
}

JavaScript

var Vector = function(x, y) {
	this.x = x || 0;
	this.y = y || 0;
};

Vector.prototype = { // typeof VAR === "object" | VAR instanceof Vector
	constructor: Vector,

	set: function(set) {
		if (typeof set === "object") {
			this.x = set.x;
			this.y = set.y;
		} else {
			this.x = set
			this.y = set
		}

		return this;
	},
	
	equals: function(v) {
		return ((v.x === this.x) && (v.y === this.y));
	},

	clone: function() {
		return new Vector(this.x, this.y);
	},
	
	mul: function(mul) {
		if (typeof mul === "object") {
			return new Vector(this.x * mul.x, this.y * mul.y);
		} else {
			return new Vector(this.x * mul, this.y * mul);
		}
	},

	div: function(div) {
		return new Vector(this.x / div, this.y / div);
	},

	add: function(add) {
		if (typeof add === "object") {
			return new Vector(this.x + add.x, this.y + add.y);
		} else {
			return new Vector(this.x + add, this.y + add);
		}
	},

	sub: function(sub) {
		if (typeof sub === "object") {
			return new Vector(this.x - sub.x, this.y - sub.y);
		} else {
			return new Vector(this.x - sub, this.y - sub);
		}
	},

	reverse: function() {
		return this.mul(-1);
	},
	
	abs: function() {
		return new Vector(Math.abs(this.x), Math.abs(this.y));
	},

	dot: function(v) {
		return (this.x * v.x + this.y * v.y);
	},

	length: function() {
		return Math.sqrt(this.dot(this));
	},

	lengthSq: function() {
		return this.dot(this);
	},

	setLength: function(l) {
		return this.normalize().mul(l)
	},
	
	lerp: function(v, s) {
		return new Vector(this.x + (v.x - this.x) * s, this.y + (v.y - this.y) * s);
	},

	normalize: function() {
		return this.div(this.length());
	},
	
	truncate: function(max) {
		if (this.length() > max) {
			return this.normalize().mul(max);
		} else {
			return this
		}
	},
	
	dist: function(v) {
		return Math.sqrt(this.distSq(v));
	},

	distSq: function(v) {
		var dx = this.x - v.x, dy = this.y - v.y;
		return dx * dx + dy * dy;
	},
	
	cross: function(v) {
		return this.x * v.y - this.y * v.x;
	}
};

if...