Position points within an oval-like area

Question

I am developing a website and I'm trying to load multiple "points" within a <div>. If you don't know much about web development, a div is just a rectangle. See the picture below, where the purple box represents the dimensions of the div, which is exactly 150x700 pixels.

Note that in browsers, the y-axis is flipped. As you can see, my div is not actually rectangular in appearance, though it is still manipulated as though it were. It has rounded corners, each corner's border-radius being 75px.

When I load my website, several dots (like the one in the picture) are appended to the inside of the div. Each dot has a specific y-value, and the x value is randomized between 1 and 150.

The problem is that if a dot has something near the top or bottom- for example, y=690- the x value can still be randomized in a way that the dot will appear outside of the rounded corners.

What I need help with is determining a way to still have a randomized x-value, but is also restricted to stay within the borders of the div, rather than it's rectangular frame.

I'm sorry if this is too short an explanation: I currently have to leave my computer. I will try to edit in more information and reply to comments as soon as I can. Thank you!

Answer 1

For $1\leq y\leq 75$ take random $x$ between $[ 76-\sqrt{75^2-(y-75)^2}]$ and $[74+\sqrt{75^2-(y-75)^2}]$, where $[\cdot ]$ indicates integer part.

For $76\leq y\leq 625$ take random $x$ between $1$ and $150$.

Finally, for $626\leq y\leq 700$ take random $x$ between $[ 76-\sqrt{75^2-(y-626)^2}]$ and $[74+\sqrt{75^2-(y-626)^2}]$.

Answer 2

If the top and bottom curve are circular arcs, given $y$ you can easily find the interval of $x$ values for which $(x,y)$ is inside your region. Take $x$ to be a random number in that interval.