How could be the best way of implementing an fft chart?

Questions
,
1

Hello everyone,

I’m trying to set up an interactive cascading spectrum chart, but it hasn’t been such a trivial thing for me. Here’s a picture of the goal I’d like to achieve:

image
image1606×544 121 KB

or
image
image774×698 75.5 KB

It’s an fft graph, I have all these points already. Do you have any tips or any examples that I could follow?

I apologize that I don’t have any examples online yet to bring here, but as I go along I’ll add a fiddle here. I’ve tried using graphics-specific libraries, but mostly they work either with points only or with surface graphics.

Any help, guidance, examples will be a matter of great gratitude.

Best Regards,
Matheus

2

I have already something done in BabylonJS…
If you want you can have a look here: https://playground.babylonjs.com/#S7U8U8#1

Any additional help will be a pleasure.

3

Did you consider using boxgeometries positioned and scaled to the data points?
I think this will also help if you want to use raycasting to highlight individual data, as in the example image.

1 Like
4

I think that the solution is along on this way (bars scaled to look like what the example shows)… As the amount of data is huge in a single lane, it would make it easier to fill in the colors, and I could just use this technique of raycasting.

5

Hi!
Based on your Babylon.js example and that Three.js instancing example: three.js examples

There is an option with the using of InstancedMesh.

Example: https://codepen.io/prisoner849/full/GRWXwwz
Picture:

изображение
изображение967×839 183 KB

PS It’s just an option, not the ultimate solution.

5 Likes
6

Very good option by the way! Thanks…

I’ve seen that it’s not so trivial to make a gradient on the other axis (Y). Someway to have this effect: according to the value…
image image

Let’s suppose the highest is 100, so its bar would have from blue to red…
And if it’s 2, it would just like blue.

I searched a bit more and the solution I found is to use shaders, do you know if it’s the best way of doing that?

7

With some minor modifications to the material, you can have the desired colouring effect.

Example: https://codepen.io/prisoner849/full/rNyqMJJ
Picture:

изображение
изображение968×860 129 KB

2 Likes
8

Thank you, @prisoner849 .

I just realized I need to study more about these topics. Do you have any recommendations for what to study to help me get there to the solution I need? Could it be the famous shaders?

Would it be possible to color it in the other direction? For example, the coolest spots would be blue, and the hottest is a composite of all the other colors in a gradient. The base would always be blue on all bars, and on the larger ones, they would have more than one color.

Instead of:

image
image1182×628 61 KB

Color it in this direction:

image
image1182×628 83.8 KB

Thanks again!

9

I updated the codepen, now shaders take bars’ height in count to make those bars gradiental.
Picture:

изображение
изображение959×851 224 KB

1 Like
10

Hey, I don’t know what is the best way of asking that, it’s something related to this topic, should I open a new one, or can I ask it here?

Well, I am already here, so I will enjoy asking:slight_smile:

Like in the example above, how could I tell which line a mesh is on? I tried setting a name based on its position on the for loop, but somehow it didn’t work:

let o = new THREE.InstancedMesh(g, m, rows * cols);

    let dummy = new THREE.Object3D();

    let mat4 = new THREE.Matrix4();

    for (let y = 0; y < rows; y++) {

        legends.z.push(fft[(rows - 1) - y].date)

        for (let x = 0; x < cols; x++) {

            dummy.position.set(0, 0, (rows - 1) / 2 - y).multiplyScalar(20);

            dummy.position.set(-(cols - 1) / 2 + x, 0, dummy.position.z)

            dummy.position.set(dummy.position.x, dummy.position.y, dummy.position.z).multiplyScalar(0.243);

            let hData = fft[y].data[x].a

            biggest= hData > biggest ? hData : biggest;

            biggest = parseFloat(biggest).toFixed(2);

            h = biggest * factor;

            dummy.scale.set(0.25, hData * factor, 0.25);

            dummy.updateMatrix();

            o.setMatrixAt(y * cols + x, dummy.matrix);

        }

        o.name = 'chart'

        o.countZ = y

    }

    scene.add(o);

What I’m looking for is when I click on the date it turns red and the full line of meshes turns red too as shown in the image below:

image

Thanks in advance, and if it would be better to open a new topic, please just let me know. :smiley: