JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="out1" width=200 height=500></canvas>
<canvas id="out2" width=200 height=500></canvas>
<canvas id="out3" width=200 height=500></canvas>
<canvas id="out4" width=200 height=500></canvas>

CSS

canvas{
	display: inline-block;
	margin-right: 10px;
}

JavaScript

"use strict";

var ctx1 = document.getElementById('out1').getContext('2d');
var ctx2 = document.getElementById('out2').getContext('2d');
var ctx3 = document.getElementById('out3').getContext('2d');
var ctx4 = document.getElementById('out4').getContext('2d');

class RandBin{
	constructor(numBins) {
		this.numBins = numBins;
		this.binWidth = 1.0 / this.numBins;
		this.resetAvailableBins();
	}
	
	resetAvailableBins() {
		this.binsAvailable = new Array(this.numBins);
		for(var i = 0; i < this.numBins; i++) {
			this.binsAvailable[i] = i;
		}
		this.binsAvailable = _.shuffle(this.binsAvailable);
	}
	
	getBin() {
		var b = this.binsAvailable.pop();
		if(this.binsAvailable.length == 0) {
			this.resetAvailableBins();
		}
		return b;
	}
	
	randFloat(min, max) {
		var s = Math.random();
		var b = this.getBin();
		s = (b + s) * this.binWidth;
		return s * (max-min) + min;
	}
	
	randInt(minI, maxE) {
		return Math.floor(this.randFloat(minI, maxE));
	}
}

console.time('A');
var a = new RandBin(25);
for(var i = 0; i < 500; i+=0.1) {
	var p = a.randInt(0, 200);
	ctx1.fillRect(p, Math.floor(i), 1, 1);
}
console.timeEnd('A');

console.time('B');
for(var i = 0; i < 500; i+=0.1) {
	ctx2.fillRect(Math.floor(Math.random() * 200), Math.floor(i), 1, 1);
}
console.timeEnd('B');

console.time('C');
var a = new RandBin(25);
for(var i = 0; i < 500; i+=0.1) {
	var p = a.randInt(0, 200);
	var q = a.randInt(0, 500);
	ctx3.fillRect(p, q, 1, 1);
}
console.timeEnd('C');

console.time('D');
for(var i = 0; i < 500; i+=0.1) {
	ctx4.fillRect(Math.floor(Math.random() * 200), Math.floor(Math.random() * 500), 1, 1);
}
console.timeEnd('D');