Random circles on click

#1

Hi! I am trying to generate circles randomly on the screen after clicking on a button. What’s the best way to do this? I am confused about the random formula and positioning on screen.

Thank you!

#2

Hi!

The random function returns a number between 0 and 1, so if you multiply that by the screen width and height, you will get a random x,y location.

Move circle to (x) [[Math.random() * Window.width]] (y) [[Math.random() * Window.height]]

Be sure to use Move to and not Move by.

The harder part of what you want to do is generate circle. Axure doesn’t allow you create new widgets, so the circles will already have to be created and hidden. You could do the following to then scatter and show them. First, put this script into each (hidden) circle

OnShow
  Move this to (x) [[Math.random() * Window.width]] (y) [[Math.random() * Window.height]]

And then, in your button click, show all circles.

#3

Thank you for your response. I think that your approach should work. Thank you again!

#4

No problem. Note that if you wanted to make sure that all circles are fully on-screen (instead of partially beyond the right and bottom edges of the screen), you could add boundaries to the Move command of each circle (and of course you could then just copy and paste the circle as many times as you want).

(right) boundary is less than or equals [[Window.width]]
(bottom) boundary is less than or equals [[Window.height]]

[Edit] For reasons I don’t understand, the above doesn’t work. Instead of using boundaries, you can use the Math.min() function in the move expression.

[[Math.min(Math.random() * Window.width, Window.width - This.width) ]]
closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.