How to achieve 10 random x and y co-ordinates with difference of 150

Question

3.00/5 (2 votes)

See more:

I am new to html5 and JavaScript, First sorry if i ask silly question but i really need this.

I have one canvas and I want to insert 10 images at different location. So I created one array to store the co-ordinates, and I have written logic to find new location which is new to and have atleast difference of 150. I know there are many mistakes. but i cant find the locations. Help me, Thank you.

HTML

<canvas id = "canvas" height = "100%" width = "100%"></canvas>

Here is my script

JavaScript

var objectArray = new Array();
var canvas = document.getElementById("canvas");

 while (objectArray.length < 10)
        {
            xpos = Math.floor(Math.random() * (canvas.width-100)+100);
            ypos = Math.floor(Math.random() * (canvas.height-100)+100);
            if (objectArray.length > 0)
            {
                for (var i = 0; i < objectArray.length; i++)
                {
                    if
                        (
                        (xpos > (objectArray[i].coX + 150)) || (xpos + 150 < objectArray[i].coX)
                                                            &&
                        (ypos > (objectArray[i].coY + 150)) || (ypos + 150 < objectArray[i].coY)

                        )
                    {
                        objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
                    }
                }
            }
            else
            {
                objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
            }
        }

Posted 16-Apr-13 1:43am

NachiketM

Add a Solution

Comments

Sergey Alexandrovich Kryukov 16-Apr-13 11:09am

At least 150 between previous and new location, or any two locations? If you want the second option (space all objects), do you understand that this problem can be non-resolvable?
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Brian A Stephens · Accepted Answer · 2013-04-16T05:07:00

There are several problems with the code:

- Why are you getting random x and y coordinates between 100 and the maximum edge of the canvas? Are you purposefully avoiding the top and left 100 pixels?

- Your logic will add to the array as long as the new point is more than 150 away from any one other point. It could be right on top of one of the others.

- You are not exiting the loop after adding to the array, so you will add the same point many times.

- Depending on the size of the canvas, you will quickly run out of possible places for the new points (once you fix the logic). You could end up with an endless loop.

- Why do you take the absolute value of a number that's guaranteed to be greater than 100?

Here is a revision that works (see http://jsfiddle.net/cD6uC/3/[^])

I realized that you can't size a canvas as percentages, so I used the window dimensions. Also, it seemed a little weird to require the X and Y values each to be more than 150 different. Assuming you really meant for the distance between points to be more than 150, I changed the logic to use the Pythagorean theorem.

C#

var objectArray = new Array();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = document.getElementById('data');
var baddata = document.getElementById('baddata');

canvas.width  = window.innerWidth - 50;
canvas.height = window.innerHeight - 50;

while (objectArray.length < 10) {
    var addToArray = true;
    var xpos = Math.floor(Math.random() * canvas.width);
    var ypos = Math.floor(Math.random() * canvas.height);

    if (objectArray.length > 0) {
        for (var i = 0; i < objectArray.length; i++) {
            var distance = Math.sqrt(Math.pow(Math.abs(xpos - objectArray[i].coX), 2) + Math.pow(Math.abs(ypos - objectArray[i].coY), 2));
            if (distance < 150) {
                addToArray = false;
                baddata.innerHTML += '(' + xpos + ',' + ypos + ') only ' + Math.round(distance).toString() + ' from (' + objectArray[i].coX + ',' + objectArray[i].coY + ')<br>';
                break;
            }
        }
    }

    if (addToArray) {
        objectArray.push({ coX: xpos, coY: ypos });
        ctx.fillRect(xpos,ypos,2,2);
        data.innerHTML += '(' + xpos + ',' + ypos + ')<br>';
    }
}