JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<canvas id="c" style="width:400px;height: 400px;border: 1px solid #ccc" width="400" height="400"></canvas>
<div id="result"></div>
</body>
JavaScript
$( function () {
var POINTS_NUMBER = 30;
var RADIUS = 50;
//var SAMPLE_COUNT = 600;
var SAMPLE_PER_POINT = 10;
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var points = [],
circles = [];
// DRAW POINTS
for(var i = 0; i < POINTS_NUMBER; i+=1) {
var x = Math.floor((Math.random() * 400) + 1);
var y = Math.floor((Math.random() * 400) + 1);
points.push({x:x,y:y, covered: false,circles:[]})
var radius = 3;
ctx.beginPath();
ctx.arc(x,y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#003300';
ctx.stroke();
}
// generate circles - at first step N circles, each center in blah
//for(var i = 0; i < POINTS_NUMBER*5; i+=1) {
// old way
//for(var i = 0; i < SAMPLE_COUNT; i+=1) {
// var x = Math.floor((Math.random() * 400) + 1);
// var y = Math.floor((Math.random() * 400) + 1);
// circles.push({x: x,y: y})
//}
//
for(var i = 0; i < POINTS_NUMBER; i+=1) {
var p = points[i];
for(var j = 0; j < SAMPLE_PER_POINT; j+=1) {
var r = Math.random() * RADIUS;
var fi = Math.random() * 2 * Math.PI;
var x = p.x + r * Math.cos(fi);
var y = p.y + r * Math.sin(fi);
circles.push({x:x,y:y})
}
}
var drawCircles = function() {
for(var i = 0; i < circles.length; i+=1) {
var c = circles[i];
ctx.beginPath();
ctx.arc(c.x,c.y, RADIUS, 0, 2 * Math.PI, false);
ctx.fillStyle = 'transparent';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#aa0000';
ctx.stroke();
}
}
var isInside = function(p1,p2) {
return Math.sqrt(Math.pow(p1.x - p2.x,2)+Math.pow(p1.y - p2.y,2))< RADIUS
}
var count = function () {
var newCircles = []
for(var i = 0; i < circles.length; i+=1) {
var c = circles[i];
c.inside = [];
c.insideCount = 0;
for(var j = 0; j < points.length; j += 1) {
...