将数组大小调整为指定长度并均匀分配索引值

Question

I am very bad at math, so forgive me if this is super obvious, I did do research and couldn't find anything matching what I need.

I'm trying to make my audio analyser responsive in width. This has proven to be very difficult, as the frequency array has a fixed size.

By calculating the width of each bar, and against the width of the canvas, I can easily find out how many bars could fit inside it.

So let's say the canvas is 20 pixels wide, and each bar is 4 pixels wide (including space between). That would mean 5 bars could fit inside the canvas. So using this information, we could create a function that resizes the frequency array length to 5, and evenly distributes frequencies into those 5 indexes.

This way no frequency range is left out, and the analyser can be resized to any width, and still fill the space.

function resize(array, integer) {
    ...
    return result;
}

array = [1, 2, 3, 4, 5... 100] // Array that goes from 1 to 100 (100 indexes)

resize(array, 10) // [1, 10, 20, 30, 40, 50, 60, 70, 80, 90]

Here's the original array displayed on the canvas (the dotted bars are the ones that are outside of the canvas)

Now I want to resize the array so that the bars fit in the canvas like this (20 bars in this example)

I really hope I explained myself well here, this was very difficult to explain

Answer 1

This solution works. Now. With returning the nth value factor of the original array.

 function arrayResize(array, integer) { var factor = array.length / integer; return Array.apply(null, { length: integer }).map(function (_, i) { return array[Math.floor(i * factor)]; }); } var array = Array.apply(null, { length: 100 }).map(function (_, i) { return Math.floor(i / 10); }); document.write('<pre>' + JSON.stringify(array, 0, 4) + '</pre>'); document.write('<pre>' + JSON.stringify(arrayResize(array, 5), 0, 4) + '</pre>'); document.write('<pre>' + JSON.stringify(arrayResize(array, 10), 0, 4) + '</pre>'); document.write('<pre>' + JSON.stringify(arrayResize(array, 20), 0, 4) + '</pre>');