[UX / Global Setting] Canvas background options

Created by: S4K4YUME

Introduction

Currently the visualizations are hovering in an empty canvas. Because no other elements are present in the view, the visualizations lack a frame of reference. Putting an unobtrusive grid in the background, which moves and scales (perhaps adding grid resolution) along with the visualizations might 'ground' the elements more, giving a better experience for the user. This also allows for better analysis of the trees due to having local references to distances directly at hand, on the background next to the visualization.

Implementation

We could obviously do it as a CSS element on the web-page.

OR

If we would want to do it in openGL, perhaps because we want it to be interactive (not sure how well we could do that with CSS), then; With my current knowledge of how openGL works, I would think achieving this is easiest with a big quad covering the canvas, and having a dedicated shader with a small, tileable texture. If we would want to have some space to move around in, moving the grid, I think it could be possible by either:

• Modifying/updating UV coordinates on the shader, or
• Have a pretty big quad that allows for some movement before we reach its edges

Suggestion

This is perhaps more design for later on, but I would prefer it to have a modern feel. Below here is an example that is bad in the sense of color/gradient use, but was the best I could quickly find that at least incorporates a modern feel.

What I would like to avoid: