I need to render N
items that are x
pixels wide with N-1
spaces y
pixels wide between them.
I need to calculate how many items will fir on the screen. What I'm doing is rendering an array of amplitudes as columns. This is my test produce without spaces:
I first calculate how many items will fit, then resample the original array to get exactly the number of values that will fit on the screen. This is the same with 5 pixels per column, you can see that the original array has been resampled:
The formula I use now is no_items = Math.floor(canvasWidth/(barWidth+spaceWidth))
:
/**
* Recalculates waveform data for given width of canvas
* @param {number} canvasWidth Image width in pixels
* @param {number} barWidth Width of waveform bars
* @param {number} spaceWidth Width of spaces between bars
* @returns {Uint8Array} recalculated bytes
*/
recalculateForWidth(canvasWidth, barWidth, spaceWidth) {
const no_items = Math.floor(canvasWidth/(barWidth+spaceWidth))
const result = new Uint8Array(no_items);
// Resampling code follows
...
return result;
}
But that clearly assumes one extra space at the end of the data - it simply calculates with item width being bar width+ space width.
I want to render bars without space at the end, so how do I calculate how many will fit with spaces but without space at the end?
Your total width will be:
barWidth(NumberBars) + spaceWidth(NumberBars - 1) = TotalWidth
which expands to:
barWidth(NumberBars) + (spaceWidth)(NumberBars) - spaceWidth = TotalWidth
add spaceWidth to both sides:
barWidth(NumberBars) + spaceWidth(NumberBars) = TotalWidth + spaceWidth
Factor left side:
NumberBars(barWidth + spaceWidth) = TotalWidth + spaceWidth
and divide:
NumberBars = (TotalWidth + spaceWidth) / (barWidth + spaceWidth)