Take the 2-minute tour ×
Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. It's 100% free, no registration required.

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!

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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}]$.

share|improve this answer
    
Thanks for the response! I'll test this out soon and post the results! –  Snailer Jun 10 '12 at 21:02
    
After setting up a few more test "dots" and hitting f5 about 100 times, the dots in the lower and upper regions did not move beyond the rounded borders! Thanks a lot! –  Snailer Jun 10 '12 at 22:52
    
You are wellcome! –  H. Kabayakawa Jun 10 '12 at 23:30
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.