# Predict Centroid points based on the average distance between adjacent Centroid points (left, right, up, and down)

Hello,

I am trying to compute an average distance (maybe Euclidean distance) between adjacent centroid points (left, right, up, and down) for all centroid points and then connect them. My goal is to predict a centroid point of the circle where a centroid point is missing.
I’m new to Javascript and Observable. Your help will be highly appreciable.

Here is my Observablehq Notebook https://observablehq.com/@1ac24a43f3551250/connect-between-centroid-points

You’ll need to publish the notebook for other folks to see it, using the big “Publish” button in the upper right corner of the notebook After you push the button, you’ll have the option to make it unlisted, if you’re not ready to release it for everyone to see.

1 Like

@mcmcclur I’m really sorry! Now I have corrected the link. Thank you so much for your response.

So as you scanned across there points you would 1st check these distance on these points?

2nd scan would compute these points

And … for the whole line.

Then you would look at the next 2nd line and check these distances.

I am not sure if you would check the diagonals.

so…

I would build an array of objects from the center points.
`center = new cv.Point(m10 / m00, m01 / m00);`
That could look something like this

``````centers =  [
{x: 492.88631548396455, y: 735.8633289798287},
{x: 305.8166012501817,  y: 735.8900421572902},
{x: 586.8836980920314,  y: 735.4609427609428},
{x: 399.00210119347787, y: 735.5012607160868},
{x: 492.87410947002604, y: 640.5096437880104},
{x: 305.82291485286436, y: 640.5259446282431},
{x: 399.03044293348995, y: 639.6068720445451},
{x: 211.99113832047408, y: 639.5925304707592},
{x: 586.0671880255634,  y: 545.1754681018051},
{x: 492.87634736628024, y: 545.2052935878439},
{x: 305.839043571284,   y: 545.2109173967096},
{x: 211.97433955914522, y: 544.4378260137977},
{x: 586.4577587711642,  y: 449.80976901146215}
]
``````

You can access this array like a 2D array like this

You need to loop of the centers and using the above formula look at the values of the point above, below, left and right and check their distance and saving the result to the centers array so that each entry looks like this.

`````` {x: 492.88631548396455, y: 735.8633289798287,
[
{top: [center_idx,distanceX,distanceY],
bottom:[center_idx,distanceX,distanceY],
left:[center_idx,distanceX,distanceY],
right:[center_idx,distanceX,distanceY]},

top: [center_idx,distanceX,distanceY],
bottom:[center_idx,distanceX,distanceY],
left:[center_idx,distanceX,distanceY],
right:[center_idx,distanceX,distanceY]},

top: [center_idx,distanceX,distanceY],
bottom:[center_idx,distanceX,distanceY],
left:[center_idx,distanceX,distanceY],
right:[center_idx,distanceX,distanceY]},

top: [center_idx,distanceX,distanceY],
bottom:[center_idx,distanceX,distanceY],
left:[center_idx,distanceX,distanceY],
right:[center_idx,distanceX,distanceY]},
]},
``````

center_idx is the index number into the centers array. This is useful as you can use the data to populate that point too because the two points have the same data. (distance from a point to b point equals b point to a point)

There could be other ways to do this. The circle.jpg in your example is very uniform as it’s on a grid.

Also you need to delete the objects you make in opencv as it needs to free up the memory used.

``````  // clean memory
src.delete();
dst_gray.delete();
dst_binary.delete();
label.delete();
stats.delete();
centroids.delete();
hierarchy.delete();
contours.delete();
``````

@joyaircel2016 Can you elaborate what your ultimate goal is? Do you want to process the data as basis for computations, or are you merely interested in drawing the lines?

Also, what is your definition of “adjacent”? You may have noticed that not all dots have a centroid. How do you want to handle these holes?

The detected centroids will never line up perfectly. What is the margin of error within which you consider centroids to be of the same row or column (assuming that you plan to apply your code to other images)?

@mootari Actually, I want to compute an average distance (row, column, and maybe diagonal) of centroid points so that I can predict a centroid point where centroid points are missing.

@hellonearthis You’re partially right. Actually, I want to compute an average distance between adjacent centroid points, and based on that I want to predict the centroid point of circles where the centroid point is missing.

I think my previous post was not clear enough. Hence, I’ve edited my query.

Putting the centers into a 2d array you could work out the min and max of each coloum and row and then use something like find-missing-elements-of-a-range to find the missing elements in the array. The missing elements could then be worked out by look at the other values in the array.

See that all the x,y values in the columns,rows are the same, so an average value could be used.

@joyaircel2016 I still have a few questions:

• Do you know the grid dimensions (total rows / columns) in advance, or do you need to derive them from each input image? Can you share more about the properties of the input images (noise, complexity, content etc) that you plan to apply this method to?
• In a previous post you mentioned that you’re famiilar with Python OpenCV. Do you need help coming up with an algorithm, or with implementing it in / translating it to JavaScript, or both?

Please share as much information as you can, because as of now the problem statement is still fairly vague.

Yes, I’m familiar with Python OpenCV but not with Javascript. I’m trying to solve this problem using JavaScript only.

Total row/columns are not fixed. Hence, I have to derive them from each input image. Images look almost the same. I have shared only one block of circles within an image but some images also contain multiple blocks of circles within images.