JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

function Grid (width, height) {
	this.cells = this.createEmptyMatrix(width, height);
	this.cellsWithCounts = this.createEmptyMatrix(width, height);
	this.width = width;
	this.height = height;
}
Grid.prototype.createEmptyMatrix = function (width, height) {
	var cells = [];

	for (var i = 0; i < width * height; i++) {
		cells[i] = 0;
	}

	return cells;
}
Grid.prototype.shuffle = function (o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
Grid.prototype.getCell = function (x, y) {
	return this.cells[y * this.width + x];
};
Grid.prototype.markCell = function (x, y) {
	this.cells[y * this.width + x] = true;

	var count = 1,
		edges = 0;
	
	if (y && this.cellsWithCounts[(y-1) * this.width + x]) {
		this.cellsWithCounts[(y-1) * this.width + x].count++;
		count++;
	}
	if (y < this.height - 1 && this.cellsWithCounts[(y+1) * this.width + x]) {
		this.cellsWithCounts[(y+1) * this.width + x].count++;
		count++; 
	}
	if (x && this.cellsWithCounts[y * this.width + (x-1)]) {
		this.cellsWithCounts[y * this.width + (x-1)].count++;
		count++;
	}
	if (x < this.width - 1 && this.cellsWithCounts[y * this.width + (x+1)]) {
		this.cellsWithCounts[y * this.width + (x+1)].count++;
		count++;
	}

	if (!x) edges++;
	if (x === this.width - 1) edges++;
	if (!y) edges++;
	if (y === this.height - 1) edges++;

	this.cellsWithCounts[y * this.width + x] = {x: x, y: y, count: count, edges: edges};
};
Grid.prototype.unmarkCell = function (x, y) {
	this.cells[y * this.width + x] = false;
};
Grid.prototype.getDesirableCell = function () {
	var cells = this.cellsWithCounts;

	cells = cells.filter(function (cell) {
		return cell.count && cell.count + cell.edges < 5;
	}, this);

	cells = cells.sort(function (a,b) {
	  return a.count == b.count ? 0 : +(a.count < b.count) || -1;
	});
    
    if (Math.random() > .7) {
        cells = this.shuffle(cells);
    }

	var cell = cells[0];

	if (!cell) {
		return...