Simplest way to plot points randomly inside a circle?

Question

I want to have random points plotted inside a circle, but I do not know how to limit the points to be inside the circle. Given a circle of a certain size and position, how would I go about generating random (x,y) coordinates that fall inside the circle?

Answer 1

Let's assume we have a circle at position (x, y), and radius r. To plot a random point inside of a circle, we can get a random number based on the degrees around a circle, and use trigonometry to solve for the x/y coordinates of the point.

Some trigonometric functions that may help you with circles in the future:

Y = A*sin(angle)

X = A*cos(angle)

Where A is the hypotenuse of a right triangle, and X and Y are the lines coming off from the right angle (horizontal line is X, vertical is Y).

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

// First step draw a circle at (x, y) of radius r.

var x = 100, y = 75, r = 50;

var ctx = document.getElementById("myCanvas").getContext("2d");

ctx.beginPath();

ctx.arc(x, y, r, 0, 2 * Math.PI);

ctx.stroke();

// Next step, get a random radian and random distance

var angle = Math.random() * 2 * Math.PI;

var distance = Math.random() * r;

// Get the x and y coordinates of these using trigonometry. Don't forget to add the position of your circle.

var point_x = distance * Math.sin(angle) + x;

var point_y = distance * Math.cos(angle) + y;

// draw the pixel at that point.

ctx.fillRect(point_x, point_y, 1, 1);

</script>