Scale The Canvas?

[Kailokk]

So I'm currently trying to create an audio visualiser using the library. I have run into an issue where i have a certain set of audio samples (say an array of 256 floats) and i want to draw them on a canvas. While i can do this simply with a for loop like this:

ftxui::Component Oscilloscope(float**& bufferPointer)
{
	return Renderer([&]
		{
			auto my_Canvas = canvas([&](Canvas& c)
				{
						for (int x = 0; x < FRAMES_PER_BUFFER; x++)
						{
							float leftChn = (*bufferPointer)[x] * 20;
							float rightChn = (*bufferPointer)[x + 1] * 20;
							int comb = (int)(leftChn + rightChn) + 50;
							c.DrawPointLine(x-1, previous.yAxis, x, comb);
							previous.yAxis = comb;
						}
				});
			return my_Canvas | flex;
		});
}

I run into the problem where the sample array size is bigger than the screen/canvas, or visa versa, part of the visualisation is chopped off.

Is there a way with in FTXUI to dynamically scale whats drawn on a canvas based on the terminal window size? or am I going to have to manually interpolate the data myself to scale it?
I've figured out (I think) how to scale the canvas to the screen size, using flex, but this doesn't fix my problem.

Thanks to anyone who takes the time to read, and thanks to the creator/s, this has been a great first foray into C++ for me.

[ArthurSonzogni]

Hello,
Thanks for using FTXUI!

I haven't tested it, but from my mind, I would have tried to scale it manually:

V1 (basic)

ftxui::Component Oscilloscope(float**& bufferPointer) {
  return Renderer([&] {
    auto my_Canvas = canvas([&](Canvas& c) {
      if (c.width() == 0)
        return;
      auto sample_y = [&](int x_not_scaled) {
        float x = x_not_scalled * FRAMES_PER_BUFFER / c.width();
        return (*bufferPointer)[std::floor(x)];
      };
      int y = sampled_y(0) * 20;
      for (int x = 0; x < c.width() - 1; x++) {
        float y_next = sample_y(x) * 20;
        c.DrawPointLine(x - 1, y, x, y_next);
        y = y_next;
      }
    });
    return my_Canvas | flex;
  });
}

V2 (linear interpolation).

ftxui::Component Oscilloscope(float**& bufferPointer) {
  return Renderer([&] {
    auto my_Canvas = canvas([&](Canvas& c) {
      if (c.width() == 0)
        return;
      auto sample_y = [&](int x_not_scaled) {
        float x = x_not_scalled * FRAMES_PER_BUFFER / c.width();
        int x1 = std::floor(x);
        int x2 = std::min(x1 + 1, FRAMES_PER_BUFFER - 1);
        float y1 = (*bufferPointer)[x1];
        float y2 = (*bufferPointer)[x2];
        return static_cast<int>((x - x1) * y2 + (x2 - x) * y1);
      };
      int y = sampled_y(0) * 20;
      for (int x = 0; x < c.width() - 1; x++) {
        float y_next = sample_y(x) * 20;
        c.DrawPointLine(x - 1, y, x, y_next);
        y = y_next;
      }
    });
    return my_Canvas | flex;
  });
}

[Kailokk]

A linear interpolation was exactly what the doctor ordered! Thanks for that @ArthurSonzogni, solved a real headscratcher. I had to adjust the code a teeny bit, to get the inputs to register (the buffer ranges from 1 to -1 so i had to multiply earlier to avoid truncation with the cast) but it worked pretty much out the gate. attached below for completeness.

Thanks for your time!

ftxui::Component Oscilloscope(float**& bufferPointer)
{
return Renderer([&]
	{
		auto my_Canvas = canvas([&](Canvas& c)
			{
				if (c.width() == 0)
					return;

				auto sample_y = [&](int x_not_scaled)
				{
					float x = x_not_scaled * FRAMES_PER_BUFFER / c.width();
					int x1 = std::floor(x);
					int x2 = std::min(x1 + 1, FRAMES_PER_BUFFER - 1);
					float y1 = (*bufferPointer)[x1] * 30;
					float y2 = (*bufferPointer)[x2] * 30;
					return static_cast<int>((x - x1) * y2 + (x2 - x) * y1) + (c.height() / 2);
				};

				int previousY = sample_y(0);
				for (int x = 1; x < c.width() - 1; x++)
				{
					float nextY = sample_y(x);
					c.DrawPointLine(x - 1, previousY, x, nextY);
					previousY = nextY;
				}
			});
		return my_Canvas | flex;
	});
}