Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript jQuery HTML5
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 2:43am
Comments
Sergey Alexandrovich Kryukov at 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

Rate this: bad
good
Please Sign up or sign in to vote.

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');
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>';
    }
}
  Permalink  
v2
Comments
NachiketM at 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 at 17-Apr-13 10:51am
   
I added working code to the solution, with a jsFiddle example.
NachiketM at 17-Apr-13 11:28am
   
Thanks a lot.

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

  Print Answers RSS
0 Maciej Los 315
1 OriginalGriff 273
2 Aajmot Sk 224
3 Marcin Kozub 210
4 Richard MacCutchan 200
0 OriginalGriff 7,853
1 Sergey Alexandrovich Kryukov 7,107
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,790


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 17 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100