# ImageStreamline vti-image based

**URL:** https://discourse.vtk.org/t/imagestreamline-vti-image-based/13789
**Category:** Web
**Created:** [April 25, 2024, 11:49am UTC](https://discourse.vtk.org/t/imagestreamline-vti-image-based/13789 "2024-04-25T11:49:40Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![antonskrebkov](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/a/cc9497/32.png) [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [April 25, 2024, 11:49am UTC](https://discourse.vtk.org/t/imagestreamline-vti-image-based/13789/1 "2024-04-25T11:49:40Z")

</div>

Hi everyone!

I’m looking at this [example](https://kitware.github.io/vtk-js/examples/ImageStreamline.html) as a basis for drawing streamlines based on an existing .vti image.

As far as I understand, creating the `vecSource` function is necessary for drawing streamlines and there is no way I can get it from `ImageReader` or `ImageSource`, right?

So, if creating the `vecSource` function is necessary, then we can get the `spacing` and `extent` from an existing image:

```auto
const spacing = imageSource.getSpacing()
const extent = imageSource.getExtent()

```

Then the question is, what is `dims` and how we can get it from the .vti image:

`const dims = [10, 10, 10];`

And what needs to be inserted into this triple loop instead of `0`, `9` and `0.1` values?

```auto
 let i = 0;
 for (let z = 0; z <= 9; z++) {
   for (let y = 0; y <= 9; y++) {
     for (let x = 0; x <= 9; x++) {
       newArray[i++] = 0.1 * x;
       const v = 0.1 * y;
       newArray[i++] = v * v;
       newArray[i++] = 0;
     }
   }
 }

```

And is it necessary to keep this expression at the end?

```auto
 const da = vtkDataArray.newInstance({
   numberOfComponents: 3,
   values: newArray,
 });
 da.setName('vectors');

 const cpd = id.getPointData();
 cpd.setVectors(da);

 // Update output
 outData[0] = id;

```

Regarding this piece of code:

```auto
planeSource.setOrigin(0.05, 0.05, 0.05);
planeSource.setPoint1(0.05, 0.85, 0.05);
planeSource.setPoint2(0.05, 0.05, 0.85);

```

I assume that the following entry is suitable, right?

```auto
const origin = imageSource.getOrigin()
const bds = imageSource.getBounds()

planeSource.setOrigin(origin[0], origin[1], origin[2])
planeSource.setPoint1(bds[0], bds[2], bds[4])
planeSource.setPoint2(bds[1], bds[3], bds[5])

```

Besides this, if you have any tips, please share them.

Thank you in advance!

---

<div class="post-metadata">

### Author: ![antonskrebkov](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/a/cc9497/32.png) [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [April 26, 2024, 1:19pm UTC](https://discourse.vtk.org/t/imagestreamline-vti-image-based/13789/2 "2024-04-26T13:19:30Z")

</div>

It is important to clarify that my .vti image does not have a vector array. So is it suitable option to somehow convert scalars into vectors and then obtained vector array paste into `sline.setInputConnection()`?

For example somehow like this:

```auto
const vecSource = macro.newInstance((publicAPI, model) => {
  macro.obj(publicAPI, model) // make it an object
  macro.algo(publicAPI, model, 0, 1) // mixin algorithm code 1 in, 1 out
  publicAPI.requestData = (inData, outData) => {
    // implement requestData
    if (!outData[0]) {
      const da = vtkDataArray.newInstance({
        numberOfComponents: 3,
        values: imageSource.getPointData().getScalars().getData(),
      })
      da.setName('vectors')

      imageSource.getPointData().setVectors(da)

      // Update output
      outData[0] = functionalSource
    }
  }
})()

sline.setInputConnection(vecSource.getOutputPort())

```

Does it makes sense? Or are there any better options and approaches?