# changing the PointSource model

**URL:** https://discourse.vtk.org/t/changing-the-pointsource-model/10586
**Category:** Support
**Created:** [February 1, 2023, 6:52pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586 "2023-02-01T18:52:36Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 1, 2023, 6:52pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/1 "2023-02-01T18:52:36Z")

</div>

Hi, this is my first day with vtk-js-master. The random spherical point cloud demo works fine for me with 10000 points, it looks like a snowball. As a first step I have modified the index.js in the vtk-js-master/Sources/Filters/Sources/PointSource/ to try it with my own point clouds loaded from a file. When I rerun the point cloud demo through the index.html in the vtk-js-master/dist folder, it still displays the snowball, my modification of vtk-js-master/Sources/Filters/Sources/PointSource/index.js had no effect.  
It looks like that the demo is still running the original demo code. Do I need to “recompile” or set something for my change in vtk-js-master/Sources/Filters/Sources/PointSource/index.js to take any effect? I am not getting any error message when looking at my modification with Chrome Tools/Console .

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [February 2, 2023, 3:53pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/2 "2023-02-02T15:53:16Z")

</div>

The PointSource is not what you should be changing. The thing you aim to do is create your own reader that will grab the data you have and build a vtkPolyData which will then be rendered with the vtkMapper/vtkActor/vtkRenderer/vtkRenderWindow.

In either case, if you rely ES6, you will have to build and therefore “compile” your JS code.

HTH

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 2, 2023, 5:17pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/3 "2023-02-02T17:17:06Z")

</div>

Many thanks, Sebastien. Will try to follow that route. Would you be able to improvise such a vtkPolyData just with 3 points in it ? I could not find any example and your help would save me some time of unsuccessful experimentation.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [February 3, 2023, 12:50am UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/4 "2023-02-03T00:50:35Z")

</div>

> [@Manually Create PolyData in vtk.js](https://discourse.vtk.org/t/manually-create-polydata-in-vtk-js/885/7):
>
> Relative to this topic ‘Create polydata in vtk.js’, I am struggling with coding a polyData from a JSON file that represents continents. Easy to read with d3.js, I cannot create a vtk.vtkAppendPolyData correctly. Any help would be appreciated. d3.queue() .defer(d3.json, "https://unpkg.com/world-atlas@1/world/50m.json") .awaitAll(function(error, data) { if (error) throw error; console.log('continents ---\> Read'); console.log('################### finis…

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 3, 2023, 10:58am UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/5 "2023-02-03T10:58:11Z")

</div>

Thanks again, this was really helpful.  
Now I see how vtkPolyData can be built on some examples.  
The original demo in /vtk-js-master/Sources/Filters/Sources/PointSource/index.js  
appears to be just doing that, i.e. creating an example vertex(point) set for ‘pd’ vtkPolyData . In this the code lines allocates points :

const points = macro.newTypedArray(pointDataType, numPts \* 3);  
pd.getPoints().setData(points, 3);

and the code at the bottom of my note appears to define the ‘pd’ vtkPolyData .

And yet, the slight change in the points did not change the appearance of the point cloud. The points should now be on a disk in 3D space. Would be grateful for a hint as to the reasons of that when I retry running /vtk-js-master/dist/index,html via the code bits:

* * *

var body = vtk.Filters.Sources.vtkPointSource.newInstance({numberOfPoints : 10000});  
…  
actor.setMapper(mapper);  
mapper.setInputConnection(body.getOutputPort());

* * *

My slightly modified /vtk-js-master/Sources/Filters/Sources/PointSource/index.js for the point set was, in which I removed the randomization of ‘theta’, should have resulted in a disk of points, not a sphere of points, was as follows:

* * *

const pd = vtkPolyData.newInstance();

```
// hand create a point cloud
const numPts = model.numberOfPoints;

// Points
const points = macro.newTypedArray(pointDataType, numPts * 3);
pd.getPoints().setData(points, 3);

// Cells
const verts = new Uint32Array(numPts + 1);
pd.getVerts().setData(verts, 1);

let cosphi;
let sinphi;
let rho;
let radius;
let theta;
for (let i = 0; i < numPts; i++) {
  cosphi = 1 - 2.0 * vtkMath.random();
  sinphi = Math.sqrt(1 - cosphi * cosphi);
  rho = model.radius * vtkMath.random() ** 0.33333333;
  radius = rho * sinphi;
  theta = 2.0 * Math.PI ;// * vtkMath.random();
  points[i * 3] = model.center[0] + radius * Math.cos(theta);
  points[i * 3 + 1] = model.center[1] + radius * Math.sin(theta);
  points[i * 3 + 2] = model.center[2] + rho * cosphi;
}

// Generate point connectivity
//
verts[0] = numPts;
for (let i = 0; i < numPts; i++) {
  verts[i + 1] = i;
}

// Update output

outData[0] = pd;

```

```auto

The browser does not display a modified point set.
```

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 3, 2023, 11:06am UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/6 "2023-02-03T11:06:09Z")

</div>

Thanks, this was really helpful. I can see now how to define a vtkPolyData object. The demo index.js in PoinSource in fact was creating the ‘pd’ vtkPolyData and yet the slight modification of that code by making ‘theta’ constant (not randomized) did not result in the sphere of random points to become a disk, the modified demo still displays a ball of points. I am sure that the answer to this is trivial, but I do not know that. The ‘pd’ vtkPolyData is now redefined and yet it does not show up in the browser. Why?

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [February 3, 2023, 4:49pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/7 "2023-02-03T16:49:12Z")

</div>

Did you build your code? Are you using your code rather than the official release code base?

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 3, 2023, 6:25pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/8 "2023-02-03T18:25:57Z")

</div>

My question was only about the code in the /vtk-js-master as distributed on github. The only modification is on the line

theta = 2.0 \* Math.PI ;// \* vtkMath.random();

and i expected that this way the code would build a vtkPolyData with random points on a disk in 3D space. Thanks.  
.

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 3, 2023, 8:31pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/9 "2023-02-03T20:31:27Z")

</div>

I suspect I am misunderstanding what ‘build’ means here. I am new to vtk.js, and in my former JS programming I always thought, and experienced it, that the JS code was interpreted and compiled/optimized at runtime… may be this is not the case for the ‘index.js’ that I modified above on one line? Would be grateful for any clarification… do the vtkPolyData models need to be pre-built before they are used? If so, how is that done?

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [February 3, 2023, 8:40pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/10 "2023-02-03T20:40:20Z")

</div>

Indeed here the code needs to be transpiled and bundled.

Assuming you clone the repo and edited that source file, you can test the example live by running

```bash
cd vtk-js
npm install
npm run build
npm run example -- PointSource

```

---

<div class="post-metadata">

### Author: ![sandy](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/2bfe46/32.png) [@sandy](https://discourse.vtk.org/u/sandy)
#### Post date: [February 3, 2023, 8:44pm UTC](https://discourse.vtk.org/t/changing-the-pointsource-model/10586/11 "2023-02-03T20:44:26Z")

</div>

Ah, great ! I suspected it was something simple that I was missing… that is why I was getting nowhere … thanks for your clarification, Sebastien !