# Find centroid points on circle

**URL:** https://talk.observablehq.com/t/find-centroid-points-on-circle/5878
**Category:** Help
**Created:** [November 29, 2021, 3:44pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878 "2021-11-29T15:44:39Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [November 29, 2021, 3:44pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/1 "2021-11-29T15:44:39Z")

</div>

Hi,

I am trying to find centroid points on circles/blobs using OpenCV.JS on the Observablehq. Here is my notebook [https://observablehq.com/d/efc0f36193ef7067](https://observablehq.com/d/efc0f36193ef7067)

My goal is to display centroid points on each circle/blob and save the coordinated points as a CSV file.

I found a few references, but I am unable to implement them in the Observablehq. Your help will be highly appreciable.

**References:**

1. [how to find the centre of multiple objects in a image - OpenCV Q&A Forum](https://answers.opencv.org/question/82614/how-to-find-the-centre-of-multiple-objects-in-a-image/)

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 29, 2021, 6:32pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/2 "2021-11-29T18:32:04Z")

</div>

I cannot open the notebook link. Is your notebook still private?

---

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [November 29, 2021, 6:34pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/3 "2021-11-29T18:34:32Z")

</div>

@mootari Now you should be able to open the link. I published it now.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 29, 2021, 6:42pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/4 "2021-11-29T18:42:42Z")

</div>

Note that you can also publish a notebook as “unlisted”. That way it will be accessible to anyone who has the link, but won’t be listed publicly on your profile or in the global list of recently published notebooks.  
Very handy if you’re still working on a notebook but want to show it someone else. 🙂

And instead of forking the OpenCV notebook, I recommend just importing `cv` into your own notebook:

```auto
import {cv} from "@mootari/opencv-js"

```

You can read more about imports here:

> **[Introduction to Imports](https://observablehq.com/@observablehq/introduction-to-imports)**
>
> Observable lets you quickly reuse code by importing named cells from other notebooks. Example of Importing a Function Let’s say you saw my notebook of color scales used to visualize quantitative data. That notebook defines a \\\`ramp\\\` function that...

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 29, 2021, 6:51pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/5 "2021-11-29T18:51:32Z")

</div>

> [@joyaircel2016](#):
>
> My goal is to display centroid points on each circle/blob and save the coordinated points as a CSV file.

Would the Watershed method work for you, as described in this OpenCV.js tutorial?  
[https://docs.opencv.org/4.5.4/d7/d1c/tutorial\_js\_watershed.html](https://docs.opencv.org/4.5.4/d7/d1c/tutorial_js_watershed.html)

Also, are you required to use OpenCV? As far as I’m aware there should be more specialized JS libraries out there, that are likely easier to use.

---

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [November 29, 2021, 7:03pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/6 "2021-11-29T19:03:29Z")

</div>

> [@mootari](#):
>
> Watershed

@mootari I need to find centroid coordinate points for all the circles. I think the Watershed link you shared is not computing centroid coordinate points. I’m much familiar with Python OpenCV. So, I decided to use OpenCV.JS. It will be fine for me if you want to use any other libraries.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 29, 2021, 8:03pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/7 "2021-11-29T20:03:25Z")

</div>

@joyaircel2016 I’ve added an example for centroids here:

> **[Hello, OpenCV.js!](https://observablehq.com/@mootari/opencv-js#cell-351)**
>
> This notebook demonstrates how to load OpenCV.js within Observable, and how to handle files and runtime errors. To get started, import with: Context / discussion: OpenCV.JS on Observablehq Examples Threshold Code adapted from OpenCV.js Tutorials -...

---

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [November 29, 2021, 9:09pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/8 "2021-11-29T21:09:44Z")

</div>

@mootari It worked! You’re awesome! Thank you so so much!

---

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [December 9, 2021, 3:53pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/9 "2021-12-09T15:53:33Z")

</div>

@mootari Could you please tell me how can I define `center` as a global variable? Also is it possible to get `X` and `Y` coordinates separately? Something like below  
`const {centerX, CenterY} = new cv.Point(m10 / m00, m01 / m00);`

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [December 9, 2021, 9:33pm UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/10 "2021-12-09T21:33:05Z")

</div>

> [@joyaircel2016](#):
>
> Also is it possible to get `X` and `Y` coordinates separately?

These kinds of questions are best answered by the OpenCV API docs. E.g., if you look at the reference for [`cv::Point`](https://docs.opencv.org/4.5.4/db/d4e/classcv_1_1Point__.html), you’ll see `x` and `y` listed under public attributes.

> [@joyaircel2016](#):
>
> Could you please tell me how can I define `center` as a global variable?

Be sure to name your cell, then collect the x/y values into an array that you return:

```auto
centers = {
  // ... Skipping over getting the image data and contours. ...

  const coordinates = [];
  for(let i = 0; i < contours.size(); i++) {
    const {m00, m01, m10} = cv.moments(contours.get(i));
    if(m00 === 0) continue;
    const {x, y} = new cv.Point(m10 / m00, m01 / m00);
    coordinates.push({x, y});
    // Or, if you prefer an array of arrays:
    //coordinates.push([x, y]);
  };

  // ... remember to call .delete() on any cv objects before returning, to avoid memory leaks. ...
  
  return coordinates;
}

```

---

<div class="post-metadata">

### Author: ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)
#### Post date: [December 14, 2021, 2:13am UTC](https://talk.observablehq.com/t/find-centroid-points-on-circle/5878/11 "2021-12-14T02:13:23Z")

</div>

Thanks! Issue solved.
