JSFiddle - React, Tailwind, and code Playground

by Nemesis02

HTML

No. of Points : <input type="number" id="no_of_points" /> Position : <button>Random</button><button>N</button><button>S</button><button>E</button><button>W</button><button>NE</button><button>SE</button><button>SW</button><button>NW</button>

CSS

body {
    overflow : hidden;
}

.point {
    height: 8px;
    width: 8px;
    border-radius: 8px;
    border: 1px solid #aaa;
    background: #ddd;
}

input#no_of_points {
    width : 50px;
}

JavaScript

function getRandomPoint(radius, direction) {
    var min=0,max=100;
    switch (direction) {
        case "N" : min = 50; break;
        case "S" : max = 50; break;
        case "E" : 
            if (Math.round(Math.random())) { 
                min = 75;
            } else {
                max = 25;
            }
        break;
        case "W" : min = 25; max = 75; break;
        case "NE" : min = 75; break;
        case "SE" : max = 25; break;
        case "SW" : min = 25; max = 50;
        case "NW" : min = 50; max = 75;
    }
    var angle = (Math.floor(Math.random() * (max - min + 1)) + min)/100 * Math.PI * 2;
    return {
        x: Math.round(Math.cos(angle) * radius),
        y: Math.round(Math.sin(angle) * radius)
    };
};

String.prototype.hashCode = function(){
	var hash = 0;
	if (this.length == 0) return hash;
	for (i = 0; i < this.length; i++) {
		char = this.charCodeAt(i);
		hash = ((hash<<5)-hash)+char;
		hash = hash & hash; // Convert to 32bit integer
	}
	return hash;
};

$(function() {
    var h = $(document).height();
    var w = $(document).width();
    var minDimension = h < w ? h : w;
    var radius = (minDimension / 2) - 20;
    var total = 0;
    var duplicates = 0;
    var x = 0;
    function calcRadius(x) {
        return Math.sqrt(x * 30);
    }
    function generatePoint(no_of_points, direction) {
        var point = null;
        
        do {
            if (point !== null) {
                duplicates++;
                console.log("Found Duplicate #" + duplicates);                
            }
            point = getRandomPoint(calcRadius(total), direction);
        } while ($("#" + (point.x + "," + point.y).hashCode()).length);
        
        var offset = {
            top: point.y + radius + 10,
            left: point.x + radius + 10
        };
        $("<div>").attr({
            id : (point.x + "," + point.y).hashCode(),
            title : point.x + "," + point.y
       ...