I am developing a website and I'm trying to load multiple "points" within a
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,
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!