How to disconnect multiple polylines rendered in one Mark?

[nextlevelshit]

Regarding the documentation from https://stardustjs.github.io/documentation/marks#stardustmarkpolyline, I am missing a feature to decide if a polyline should be closed or not.

function createPolylinesMark(stroke: any): Stardust.Mark {
  const polyline = Stardust.mark.polyline();
  const mark = Stardust.mark
    .create(polyline, this.matrix.context)
    .attr('p', p => [p.x, p.y])
    .attr('width', stroke.width)
    .attr('color', p => Stardust.colorFromHTML(p.color));

  return mark;
}

Given is a set of points (eg. {x: 1234, y: 7890}, ...) which will be injected while rendering the polyline(s):

const points = [
  { x: 120, y: 35 },
  { /* and many more of those */ }
];

const polylines = createPolylinesMark({ width: 1 });
polylines.data(points).render();

Looking at the definition of a polyline from MDN, a polyline should not be closed by default:

The SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.

Do you have any suggestions how to complete this task of rendering a non-closed polyline? I can imagine to built it by my own with Stardust.mark.line(), but I am sure, you had already something in mind. I'd appreciate any help or advice.

[nextlevelshit]

I think, I've figured it out:

While generating multiple polylines "inside" one specific mark and putting all points at once into polylines.data(points).render();, I am missing the point, that stardustjs cannot interpret everything correctly, when I am merging all points in the same time.

The exact code, that I had was more like this:

this.graphs.forEach(
  graph => {
    const splines = [];

    this.curves.splines(graph.points).forEach(
      spline => {
        splines.push(...spline);
      }
    );

    graph.polylines.data(splines).render();
  }
);

And changed it into:

this.graphs.forEach(
  graph => {
    const splines = [];

    this.curves.splines(graph.points).forEach(
      spline => {
        graph.polylines.data(this.curves.nurbs(spline, graph.stroke.colors)).render();
      }
    );
  }
);

Recommendation: Rendering multiple polylines with Stardust.Mark.data() requires to call Stardust.Mark.data().render() for each polyline separately.

---

@donghaoren I did not test to call .data() and .render() separatly. Would it cause performance improvements or is it irrelevant?

[donghaoren]

In terms of open/closed polyline: Closed splines is not supported yet, it's always open.
To render multiple lines you may use the instance function (see this example: https://stardustjs.github.io/examples/index-chart/).

Stardust tries to update the GPU buffers and shaders only when needed. If you update the .data() and then call .render() at each frame, it's going to update the GPU buffers at each frame, which could be slow depending on how many points are there. A general rule is if you can parametrize the mark, then you won't need to call .data() every frame, so you'll get better performance. What I mean by parametrize is that you can define variables or scales for data mapping. See this example: https://stardustjs.github.io/examples/index-chart/, where we adjust the y scale of the line, using:

let rerender = () => {
  indexScale.domain([
    d3.min(ranges, (x, i) => x[0] / data[refIdx][names[i]]),
    d3.max(ranges, (x, i) => x[1] / data[refIdx][names[i]])
  ]);
  ...
};

If you update the mark this way, Stardust is not going to compute all data mapping and update the GPU buffers again. It just need to update two WebGL uniforms (i.e., the start / end of the domain of the indexScale). That's way more efficient.

[nextlevelshit]

Ok, thanks for your support. I do understand, why using .data() evokes But to be honest, I am not getting the point:

Do I need to know each position of every single point at every single moment in advance? Or is it enough to have functions generating the positions of each point?

Imagine I am having an arry of point objects. Each point holds information about x and y coordinates, all pre-compiled positions for one "loop" and the current animation step:

graph.points.map((point) => {
  if (point.flag) {
    return point;
  } else {
    const tick = point.tick++ % point.precompiled.length;
    const next = point.precompiled[tick];

    return {
      ...point,
      x: next.x,
      y: next.y
    };
  }
})

A graph holds inside points this list. Some points are flaged and should not be moved anyway. An animation loop inside point.precompiled is a distored circle and is devided in several parts. The tick variable stores the current position inside this loop. It is increased each frame update.

Till now I was calculating that data each frame update, but it looks inefficient. So, do you have any idea how to use .instance() and .scale() for this task? I will try it by myself, but I would appreciate some help. Maybe I am asking for the wrong stuff or the solution is to trivial.

[donghaoren]

Stardust has a "mark specification" language that allows you to do some computation in the GPU.

Here is a very simple example, that draws a sin(x) curve:

<!DOCTYPE html>
<meta charset="utf-8" />
<canvas id="main-canvas"></canvas>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script
  src="https://stardustjs.github.io/stardust/v0.2.4/stardust.bundle.js"
  type="text/javascript"
></script>
<script type="text/javascript">
  var canvas = document.getElementById("main-canvas");
  var width = 960;
  var height = 500;
  var platform = Stardust.platform("webgl-2d", canvas, width, height);

  // A line mark that draws f(x) = A * sin(k * x + phi) + B
  var compiled = Stardust.mark.compile(`
    import { Line } from P2D;
    mark SineLine(
      x: float,
      x_n: float, // x_n is automatically set as the x of the next point
      A: float = 100, // Uniform parameters
      B: float = 250,
      k: float = 0.01,
      phi: float = 0,
      width: float = 1,
      color: Color = [0, 0, 0, 1]
    ) {
      Line(
        Vector2(x, A * sin(k * x + phi) + B),
        Vector2(x_n, A * sin(k * x_n + phi) + B),
        width,
        color
      );
    }
  `);
  var marks = Stardust.mark.create(compiled.SineLine, platform);

  var xArray = [];
  for (var i = 0; i <= 960; i++) {
    xArray.push(i);
  }

  marks.attr("x", d => d);
  marks.data(xArray);

  const t0 = new Date().getTime();
  function render() {
    const seconds = (new Date().getTime() - t0) / 1000;
    // Here setting A and k will not result in an update to the GPU buffers
    // it's only going to update a single shader uniform
    marks.attr("A", Math.cos(seconds) * 100);
    marks.attr("k", Math.cos(2 * seconds) * 0.05 + 0.01);
    marks.render();
  }

  setInterval(render, 10);
</script>

[donghaoren]

In addition, the polyline mark is pretty complex in Stardust, you can find its implementation here:

stardust/packages/stardust-core/src/mark/marks/marks.ts

Line 127 in 545c2e3

export function polyline() {

It's written using Stardust's mark specification language.

The polyline mark is good when you have lines wider than a few pixels, it can render the joints between the line segments better.

[donghaoren]

Here's a similar example showing how to use .instance:

<!DOCTYPE html>
<meta charset="utf-8" />
<canvas id="main-canvas"></canvas>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script
  src="https://stardustjs.github.io/stardust/v0.2.4/stardust.bundle.js"
  type="text/javascript"
></script>
<script type="text/javascript">
  var canvas = document.getElementById("main-canvas");
  var width = 960;
  var height = 500;
  var platform = Stardust.platform("webgl-2d", canvas, width, height);

  // A line mark that draws f(x) = A * sin(k * x + phi) + B
  var compiled = Stardust.mark.compile(`
    import { Line } from P2D;
    mark SineLine(
      x: float,
      x_n: float, // x_n is automatically set as the x of the next point
      A: float = 100, // Uniform parameters
      B: float = 250,
      k: float = 0.01,
      phi: float = 0,
      width: float = 1,
      color: Color = [0, 0, 0, 1]
    ) {
      Line(
        Vector2(x, A * sin(k * x + phi) + B),
        Vector2(x_n, A * sin(k * x_n + phi) + B),
        width,
        color
      );
    }
  `);
  var marks = Stardust.mark.create(compiled.SineLine, platform);

  var xArray = [];
  for (var i = 0; i <= 960; i++) {
    xArray.push(i);
  }

  marks.attr("x", d => d);
  marks.instance(
    i => xArray, // Return the data array that corresonds to instance i
    i => ({
      // the parameter values for instance i
      B: i * 100,
      k: i / 50
    })
  );
  marks.data([1, 2, 3, 4]);

  const t0 = new Date().getTime();
  function render() {
    const seconds = (new Date().getTime() - t0) / 1000;
    marks.attr("A", Math.cos(seconds) * 50);
    marks.attr("phi", seconds);
    marks.render();
  }

  setInterval(render, 10);
</script>