a3VonG/gridexample.html

## gridexample.html
<!DOCTYPE html>
<html>
  <body>
    <script
      type="text/javascript"
      src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"
    ></script>
    <script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
    <script type="text/javascript">
      // create image data
      function createGridData(dimensions) {
        const imageData = vtk.Common.DataModel.vtkImageData.newInstance();
        imageData.setDimensions(dimensions);
        const values = new Uint16Array(
          dimensions[0] * dimensions[1] * dimensions[2]
        );
        let ctr = 0;
        for (let i = 0; i < dimensions[0]; i++) {
          for (let j = 0; j < dimensions[1]; j++) {
            for (let k = 0; k < dimensions[2]; k++) {
              if (i % 2 === 0 && j % 2 === 0) {
                values[ctr] = 10;
              }
              if (i % 2 === 1 && j % 2 === 1) {
                values[ctr] = 10;
              }

              ctr = ctr + 1;
            }
          }
        }
        const dataArray = vtk.Common.Core.vtkDataArray.newInstance({
          numberOfComponents: 1,
          values,
        });
        imageData.getPointData().setScalars(dataArray);

        imageData.computeTransforms();
        return imageData;
      }
      // setup grid as image data
      const dimensions = [10, 10, 1];
      const imageData = createGridData(dimensions);

      var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
      var imageSliceActor = vtk.Rendering.Core.vtkImageSlice.newInstance();
      imageSliceActor.getProperty().setColorLevel(9);
      imageSliceActor.getProperty().setColorWindow(2);
      imageSliceActor.getProperty().setInterpolationTypeToNearest();
      imageSliceActor.getProperty().setOpacity(1);

      var imageMapper = vtk.Rendering.Core.vtkImageMapper.newInstance();

      imageSliceActor.setMapper(imageMapper);
      imageMapper.setInputData(imageData);
      imageMapper.setSliceAtFocalPoint(true);
      imageMapper.setSlicingMode(5);

      // Grid as polydata
      function createSquareZ(location) {
        const flooredCoordinate = [
          Math.floor(location[0]),
          Math.floor(location[1]),
        ];
        console.log(`floored coordinate ${flooredCoordinate}`);
        contour = [
          [flooredCoordinate[0], flooredCoordinate[1], location[2]],
          [flooredCoordinate[0] + 1, flooredCoordinate[1], location[2]],
          [flooredCoordinate[0] + 1, flooredCoordinate[1] + 1, location[2]],
          [flooredCoordinate[0], flooredCoordinate[1] + 1, location[2]],
          [flooredCoordinate[0], flooredCoordinate[1], location[2]],
        ];
        // create polydata
        const dataset = vtk.Common.DataModel.vtkPolyData.newInstance();

        const pointss = new Float32Array(contour.length * 3);
        const edges = new Float32Array(contour.length + 1);
        edges[0] = contour.length + 1;

        for (let i = 0; i < contour.length; i++) {
          const pt = contour[i];
          pointss[i * 3 + 0] = pt[0];
          pointss[i * 3 + 1] = pt[1];
          pointss[i * 3 + 2] = pt[2];
          edges[i + 1] = i;
        }
        // edges[edges.length - 1] = edges[1];
        dataset.getPoints().setData(pointss, 3);
        dataset.getLines().setData(edges, 1);
        return dataset;
      }

      var renderer = fullScreenRenderer.getRenderer();
      renderer.addActor(imageSliceActor);
      for (let i = 0; i < dimensions[0]; i++) {
        for (let j = 0; j < dimensions[1]; j++) {
          // Not necessary to convert the voxel to world coordinates as in this example the mapping is one on one.
          square = createSquareZ([i, j, 0]);
          // render the squares
          squareMapper = vtk.Rendering.Core.vtkMapper.newInstance();
          squareActor = vtk.Rendering.Core.vtkActor.newInstance();
          squareActor.setMapper(squareMapper);
          squareActor.getProperty().setColor([1, 0, 0]);
          squareMapper.setInputData(square);
          renderer.addActor(squareActor);
        }
      }

      // render setup
      renderer.resetCamera();

      var renderWindow = fullScreenRenderer.getRenderWindow();

      const iStyle = vtk.Interaction.Style.vtkInteractorStyleImage.newInstance();
      iStyle.setInteractionMode("IMAGE_SLICING");
      renderWindow.getInteractor().setInteractorStyle(iStyle);
      renderWindow.render();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<script
	type="text/javascript"
	src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"
	></script>
	<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
	<script type="text/javascript">
	// create image data
	function createGridData(dimensions) {
	const imageData = vtk.Common.DataModel.vtkImageData.newInstance();
	imageData.setDimensions(dimensions);
	const values = new Uint16Array(
	dimensions[0] * dimensions[1] * dimensions[2]
	);
	let ctr = 0;
	for (let i = 0; i < dimensions[0]; i++) {
	for (let j = 0; j < dimensions[1]; j++) {
	for (let k = 0; k < dimensions[2]; k++) {
	if (i % 2 === 0 && j % 2 === 0) {
	values[ctr] = 10;
	}
	if (i % 2 === 1 && j % 2 === 1) {
	values[ctr] = 10;
	}

	ctr = ctr + 1;
	}
	}
	}
	const dataArray = vtk.Common.Core.vtkDataArray.newInstance({
	numberOfComponents: 1,
	values,
	});
	imageData.getPointData().setScalars(dataArray);

	imageData.computeTransforms();
	return imageData;
	}
	// setup grid as image data
	const dimensions = [10, 10, 1];
	const imageData = createGridData(dimensions);

	var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
	var imageSliceActor = vtk.Rendering.Core.vtkImageSlice.newInstance();
	imageSliceActor.getProperty().setColorLevel(9);
	imageSliceActor.getProperty().setColorWindow(2);
	imageSliceActor.getProperty().setInterpolationTypeToNearest();
	imageSliceActor.getProperty().setOpacity(1);

	var imageMapper = vtk.Rendering.Core.vtkImageMapper.newInstance();

	imageSliceActor.setMapper(imageMapper);
	imageMapper.setInputData(imageData);
	imageMapper.setSliceAtFocalPoint(true);
	imageMapper.setSlicingMode(5);

	// Grid as polydata
	function createSquareZ(location) {
	const flooredCoordinate = [
	Math.floor(location[0]),
	Math.floor(location[1]),
	];
	console.log(`floored coordinate ${flooredCoordinate}`);
	contour = [
	[flooredCoordinate[0], flooredCoordinate[1], location[2]],
	[flooredCoordinate[0] + 1, flooredCoordinate[1], location[2]],
	[flooredCoordinate[0] + 1, flooredCoordinate[1] + 1, location[2]],
	[flooredCoordinate[0], flooredCoordinate[1] + 1, location[2]],
	[flooredCoordinate[0], flooredCoordinate[1], location[2]],
	];
	// create polydata
	const dataset = vtk.Common.DataModel.vtkPolyData.newInstance();

	const pointss = new Float32Array(contour.length * 3);
	const edges = new Float32Array(contour.length + 1);
	edges[0] = contour.length + 1;

	for (let i = 0; i < contour.length; i++) {
	const pt = contour[i];
	pointss[i * 3 + 0] = pt[0];
	pointss[i * 3 + 1] = pt[1];
	pointss[i * 3 + 2] = pt[2];
	edges[i + 1] = i;
	}
	// edges[edges.length - 1] = edges[1];
	dataset.getPoints().setData(pointss, 3);
	dataset.getLines().setData(edges, 1);
	return dataset;
	}

	var renderer = fullScreenRenderer.getRenderer();
	renderer.addActor(imageSliceActor);
	for (let i = 0; i < dimensions[0]; i++) {
	for (let j = 0; j < dimensions[1]; j++) {
	// Not necessary to convert the voxel to world coordinates as in this example the mapping is one on one.
	square = createSquareZ([i, j, 0]);
	// render the squares
	squareMapper = vtk.Rendering.Core.vtkMapper.newInstance();
	squareActor = vtk.Rendering.Core.vtkActor.newInstance();
	squareActor.setMapper(squareMapper);
	squareActor.getProperty().setColor([1, 0, 0]);
	squareMapper.setInputData(square);
	renderer.addActor(squareActor);
	}
	}

	// render setup
	renderer.resetCamera();

	var renderWindow = fullScreenRenderer.getRenderWindow();

	const iStyle = vtk.Interaction.Style.vtkInteractorStyleImage.newInstance();
	iStyle.setInteractionMode("IMAGE_SLICING");
	renderWindow.getInteractor().setInteractorStyle(iStyle);
	renderWindow.render();
	</script>
	</body>
	</html>