13,045,417 members (119,753 online)
Rate this:
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.

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

Here is my script

```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
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

Rate this:

## Solution 1

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.
```var objectArray = new Array();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = document.getElementById('data');

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

while (objectArray.length < 10) {
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) {
baddata.innerHTML += '(' + xpos + ',' + ypos + ') only ' + Math.round(distance).toString() + ' from (' + objectArray[i].coX + ',' + objectArray[i].coY + ')<br>';
break;
}
}
}

objectArray.push({ coX: xpos, coY: ypos });
ctx.fillRect(xpos,ypos,2,2);
data.innerHTML += '(' + xpos + ',' + ypos + ')<br>';
}
}```
v2
NachiketM 17-Apr-13 3:15am

First Thanks for showing interest in the question, I am beginner in programming.

My program is to place 10 canvas at different position to each one of the array elements.I am facing redundant values as you said earlier.

I intentionally given static size, so that i can get the boundary of each canvas. here I am inserting images to the canvas, and canvas should not replace to other canvas or canvas should not overwritten to previous canvas. Such logic I need to write.
Thank you.
Brian A Stephens 17-Apr-13 10:51am

I added working code to the solution, with a jsFiddle example.
NachiketM 17-Apr-13 11:28am

Thanks a lot.

Top Experts
Last 24hrsThis month
 OriginalGriff 248 Graeme_Grant 135 ppolymorphe 114 Atlapure Ambrish 80 kp564 70
 OriginalGriff 4,713 RickZeeland 1,854 ppolymorphe 1,708 F-ES Sitecore 1,553 Dave Kreskowiak 1,349