Idea #2 in the JavaScript Idea Series – Random Positioning
In this post we have the idea of randomly positioning something on the screen. For this example it is nothing more than a small red box but it could be something like an image.
This project only requires three lines of JavaScript.
1. Randomly choose the x-coordinate
2. Randomly choose the y-coordinate
3. Animate the box to the coordinates
I specifically chose my random number values in order to keep the little red box within the bounds of the larger black box – so those values can be modified to suit your boundaries.
Two things of note in this project:
1. The random number selection looks like it might pick to a value of 1 more than I said but in reality, the random number generator always picks a number less than one. That means we need to multiply that value to one higher as the multiplication will equal 485 at one point but since the random generator will never pick the number 1 – the multiplication will never equal 486.
2. You will notice a small letter ‘c’ in the naming of the box for the animation. It is important to put that small ‘c’ in with the name so that it can address the canvas object. This is part of how Captivate packages things up so don’t forget that little ‘c’.
A working sample plus a view of the code is found below. Please post any questions that you might have.
So – How might you find a way to use this idea in a project?
…
Hello Greg !…
I was thinking about how to use this function within my projects…
In fact, I think the “animate” function could be used to replace the “drag and drop” animation ??!!!…
For example if you have to order some numbers, instead of drag and drop them, you can click on the smaller… then one by one you can order them… (with fixed coordinates of course !…)
But I was wondering if we can put a timing for the movement… It’s too fast on the screen and I want 2 or 3 seconds for the animation… Possible ???…
Thanks in advance !…
🙂
…
Edit : Found it !…
$(“#myBoxc”).animate({left: numX, top: numY}, {duration: 2000});
For example !…
(I’m working on my idea…)
…
Yes, glad you discovered it.
You could also simply put
$(“#myBoxc”).animate({left: numX, top: numY}, 2000);
The default is 500 – or a half second
I will print the code here if that helps. I personally find the green on black very easy on the eyes. I will make it bigger next time around. Perhaps that will help.
var numX = Math.floor(Math.random() * 786);
var numX = Math.floor(Math.random() * 456);
$(“#myBoxc”).animate({left: numX, top: numY});
I briefly explained the function in the post but will try to expand a bit.
The Math.random function will choose a number as such…
0 ≤ x < 1
So I will get something between 0 and 0.999999….
When I multiply that by some other number such as 10 I will get a value between 0 and 9.999999….
Now – Math.floor will basically drop everything after the decimal.
That will leave me with a number from 0 to 9.
That is why if you want a number from 0 to 10 you would use Math.floor(Math.random() * 11);
I was pointing at this blog, where I explained Math.floor and Math.random (towards the end of the blog):
http://blog.lilybiri.com/playing-with-numbers-part-1
I didn’t ask for an explanation, have used randomization since many years.
Thanks for posting the code. I couldn’t really read it, have a genetic eye deficit. It makes it also very difficult to use the so hyped grey on black UI preferred now for Adobe applications. The serif font you used is very thin (except for the serifs) and appear not continuous for me.
I noticed a typo in my post – it has two numX variables.
The second line should be for numY
var numY = Math.floor(Math.random() * 456);
Long time ago, I explained the Math functions step by step in a blog. Just my bad attitude, I want to know how such a function is working.
Greg, I have very bad eyesight, it is impossible for me to see the code statements (very light font type in green on black). Sorry about that.
Shuffling objects for games would be a good use case.
You must be logged in to post a comment.
