CODEWITHSUNDEEP
javascriptfirebasesvgd3.jsgoogle-cloud-firestore
Cengiz
Cengiz

Reputation: 302

Creating random coordinated svg circles with distance between them

I am trying to create randomly placed SVG circles, but I don't want them to be too close to each other. I am using firestore for the backend and d3.js to create circles. Each circle is placed due to its "xValue" and "yValue" in firebase, which are generated using Math.random. These values (coordinates) should be created in a special different way to avoid too close circles.

My first approach was to use Math.random again but check all existing xValues and yValues to find the distance between the circle that I am about to create, then if the distance is lower than 80, increase Math.random value 100. It doesn't work

function createRandomCoordinates() {
  
  var coordinates = [];

  getDocs(collection(db, "circles")).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      coordinates.push({ ...doc.data() });
    })
 }); 
  
   
  let randomXValue = Math.floor(Math.random()*1200);
  let randomYValue = Math.floor(Math.random()*1200);

  var distances = [];
  
  for (let i = 0; i < coordinates.length; i++) {
    var a = coordinates[i].xValue - randomXValue;
    var b = coordinates[i].yValue - randomYValue;
    var distance = Math.sqrt(a * a + b * b);
    distances.push(distance);
    
    if(distances.some((e) => e < 80)){
    return {
       randXVal: randomXValue + 100,
       randYVal: randomYValue + 100
}
   }else {
    return {
      randXVal: randomXValue,
      randYVal: randomYValue
    }
  }
}
} 
console.log(createRandomCoordinates().randXVal,createRandomCoordinates().randYVal )

Upvotes: 0

Views: 103

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598847

getDocs is an asynchronous call, since it needs to read data from the server. While the data is being read, your main code continues to run so that the user can continue using the app. Then when the data is available, your callback is invoked with that data.

In practice this means that your for (let i = 0; i < coordinates.length; i++) { loop is called before any of the coordinates.push({ ...doc.data() }) happened, so it's always looping over an empty array.

The solution is always the same: the code that need the data has to be inside the callback, or be otherwise synchronized (like through a callback or a promise).

The simplest fix is to move the code that uses the coordinates into the callback, after the loop:

function createRandomCoordinates() {
  
  return getDocs(collection(db, "circles")).then((querySnapshot) => {
    const coordinates = querySnapshot.docs.map((doc) => doc.data());

    let randomXValue = Math.floor(Math.random()*1200);
    let randomYValue = Math.floor(Math.random()*1200);

    var distances = [];
  
    for (let i = 0; i < coordinates.length; i++) {
      var a = coordinates[i].xValue - randomXValue;
      var b = coordinates[i].yValue - randomYValue;
      var distance = Math.sqrt(a * a + b * b);
      distances.push(distance);
    
      if(distances.some((e) => e < 80)){
      return {
        randXVal: randomXValue + 100,
        randYVal: randomYValue + 100
      }
    } else {
      return {
        randXVal: randomXValue,
        randYVal: randomYValue
      }
    }
  } //missing curly bracket
  }); 
}

Also see:

Upvotes: 1

Related Questions