How to do 3d plots?

[AnarchistHoneybun]

I came across this library on pinterest, where there's a gif of multiple things made with this and one of them's a 3d plot (square plane that gets peaks as the mouse moves over it). I can't find how it's made in the actual repo code. Any guidance would be appreciated, thanks in advance!

[ArthurSonzogni]

Here is the associated code:
https://github.com/ArthurSonzogni/FTXUI/blob/68fc9b12127bd540c8ebfd6ef70f722604e5a0cd/examples/component/canvas_animated.cpp#L159C1-L189C6

Below is a “tour” of the snippet, line-by-line, so you can see how the little 3-D mesh that follows the mouse is produced. The code is one of the FTXUI Canvas demos, but the ideas are transferable to any immediate-mode GUI.

---

Below is a “tour” of the snippet, line-by-line, so you can see how the little 3-D mesh that follows the mouse is produced. The code is one of the FTXUI Canvas demos, but the ideas are transferable to any immediate-mode GUI.

---

1. Renderer wrapper

auto renderer_plot_3 = Renderer([&] {

Renderer is an FTXUI helper that repeatedly calls the lambda to repaint the widget.
The [&] capture lets the body use outside variables (mouse_x, mouse_y, etc.) by reference.

---

2. A drawing surface

auto c = Canvas(100, 100);
c.DrawText(0, 0, "A 2D gaussian plot");

Canvas is a tiny pixel buffer rendered later as Unicode‐Braille (high-density) characters.
Here we choose 100 × 100 “pixels” and add a title.

---

3. Grid size

int size = 15;

We will sample a 15 × 15 lattice.
Logical grid coordinates are (x,y) with x,y ∈ [0 … 14].

---

4. Convert mouse screen-space → grid-space

// mouse_x = 5mx + 3*my
// mouse_y =         -5my + 90
float my = (mouse_y - 90) / -5.f;
float mx = (mouse_x - 3 * my) / 5.f;

Later, every grid point is projected to screen with
screen_x = 5*x + 3*y
screen_y = 90 - 5*y - 5*z.

Assuming the plane height z = 0, the two lines in the comment are those equations with z dropped.
Solving them gives the inverse mapping:

what we know	what we want	formula
mouse_y	my	my = (mouse_y - 90) / -5
mouse_x	mx	mx = (mouse_x - 3·my) / 5

So mx,my is the grid cell the cursor currently hovers over.

---

5. Height (z) field – a 2-D Gaussian “bump”

std::vector<std::vector<float>> ys(size, std::vector<float>(size));
...
ys[y][x] = -1.5 + 3.0 * std::exp(-0.2f * (dx*dx + dy*dy));

• dx = x - mx, dy = y - my ⇒ distance from the cursor-controlled center
• exp(-0.2 * r²) gives a bell-curve that decays radially
• Scaled by +3.0 and shifted down by −1.5 so the mesh normally sits below the plane and only pops above where the bump is.

Result: a smooth hill that rises under the mouse.

---

6. Draw the mesh (two nested loops)

For every interior edge we draw a tiny line segment in screen space.

if (x != 0) { … }   // horizontal edge   (from (x-1,y) → (x,y))
if (y != 0) { … }   // vertical   edge   (from (x,y-1) → (x,y))

Projection used in both calls

screen_x = 5 * x + 3 * y
screen_y = 90 - 5 * y - 5 * z          // z = ys[y][x]

• 5*x slants the grid to the right,
• 3*y adds a second slant ⇒ isometric look,
• -5*z lifts points upward as their height increases.

Because each edge is rendered twice (once per loop direction) all adjacent quads are connected, giving the retina-style wireframe.

---

7. Why it “moves”

Every frame the lambda:

1. Reads the current global mouse_x, mouse_y.
2. Recomputes mx,my and new heights.
3. Repaints the whole lattice.

So as the pointer travels, the Gaussian’s peak follows, and the projection math makes the hill appear to rise out of a flat square.

---

TL;DR

• Build a fixed 15 × 15 grid.
• Invert the simple isometric projection to map the cursor into grid coordinates.
• Evaluate a Gaussian centred at that point to get per-cell heights.
• Project those 3-D points back to 2-D (screen_x, screen_y) and connect neighbours.
• Redraw every frame → an interactive “living” 3-D plot.

Change the constants (size, the 5/3 projection coefficients, the Gaussian parameters) and you get different shapes, densities, or viewing angles.