[feature request] Particle shapes about vizceral

[baransu]

This should be supper easy because particle is just png image so providing optional object property to vizceral like this:

shapes: {
  squared: squaredParticleUrl
  ...
}

and then inside connection, optional shape: "squared" with fallback to default particle if something bad happen. It can be useful but I don't know if it's aligning with project ideology.

/cc: @jrsquared

[jrsquared]

Yep, something like that would be great. It's definitely been an ask for custom particle shapes that I would be happy to review a PR for. It gets a little interesting on what you map the shapes to; do you have it be overridable by connection? Overridable by metric name? Overridable by some other metadata? @tavor999, if you put together a proposal, i would be happy to review!

[ryanash999]

Thanks for the fast response. As I mentioned we are using a pretty cookie cutter implementation based on the example app provided. I am not sure if I am well suited to provide a larger proposal for how this should/could be implemented. Our ask would be simply that we can define metrics (normal/warning/danger) by particle per connection. I can't think of a scenario where we would want to override it completely for a given connection. Maybe within the metadata we could define custom metrics which map to the particle color and shape (image).

[aSqrd-eSqrd]

Not to be a wet blank, but it is a bit messier than just adding a new PNG. I added a custom particle shape to my setup, an arrow head, to make it clearer which way the particles were flowing.

Unfortunately, it exposed an issue that is more complicated than the arrow head is beneficial... to me at least. What it boils down to is that the particle, being an image, is a fixed orientation. So if a connection is a perfectly level horizontal line and the traffic was flowing from left-to-right my arrow head particle was perfect. The arrow pointed in the direction of the flow. If the traffic flow was from right-to-left the arrow head is pointed the wrong direction... it is just an image after all.

Depending on your particle "shape" the issue can be more complicated when you add in the angle of a connection. For example, a connection at a rising 45-degree angle from left-to-right the arrow head is still pointing to the right, not at 45-degrees.

At any rate, now I get why the particle PNG is a circle. It looks correct regardless of direction of travel or angle of the path. When you use a particle image with a natural "orientation" like an arrow head you then see issue. I speculate getting WebGL to constantly be rotating the PNG to keep it oriented in a particular direction, even if just on a connection by connection basis, would require a tracking a fair amount of additional "parameters." If someone knows please comment.

BUT for a text it might work just fine out of the box. Because you would want the constant orientation that comes with the image so that the text/letter is readable.

The real key to attribute to look out for even with text is if the traffic is moving in any direction other than left-to-right.

If you want to try it out it out for yourself, copy the attached file into vizceral/src/base and rename it to particleD.png. You might have to rebuild the Vizceral library (npm run-script build) if you are using the vizceral with vizceral-react, and/or vizceral-example.

The image is a 512x512 pixels compared to the 256x256 of the circle,
arrow head png

I also went in and just for testing (it isn't reliable) I add 'this.setParticleSize(nextFreeParticleIndex, 15);' as the last line in of launchParticles in connnectionView.js. Otherwise, the arrows are still rendered at the same size as the circles and are indistinguishable.

Note: it was important to get the alpha channel/transparency set right along with the main color so that the particle coloring still works. Look at the particleD.psd to help sort it out.

Well, that's my experience. Good luck and please keep us informed of anything you learn.

[jrsquared]

Yeah, it would definitely be more difficult if the images are directional. Thank you @aSqrd-eSqrd!