pouët.net

Hello there. I am trying to create a simple rythm-game web-app, and for that I would like to have some beautiful music visualisation in the background.

I was thinking about the kaleidoscope-like effects that frequently get used in music players, and also are very similar to elements of some demoscene demos.

An example of the type of visuals I'm trying to recreate.

However, I was unable to find any kind of tutorial or hints as to how something like this is created. I can clearly see that the visualisation uses one segment and repeats it in a circular fashion. But as to how the shapes/colors of this segment are created in relationship with the music, I have no clue.
It seems that, at least in this specific example, low frequencies change the overall lighting of the whole segment, but as to how higher frequency/amplitudes are influencing it exactly, I cannot see clearly.

Also, I know how to draw lines, shapes and simple gradients, but how are these organic-esque color flows created?

I would be very grateful for anyone who could shed some light on this issue.

Thanks,

~Qqwy

I don't think the visuals relate too much to the music in this particular case - if you want them to respond, you can just take the FFT of the music and wire some parameters to certain frequency ranges.

I don't think there's a big secret to the colors; basically layers of f(sin(t)) or f(sin(t), segment % 2). The rest is experimentation until you get something that fits. Sync can be hard-coded or taken from FFT/"peak" data that is more or less interpolated. :)

laziest way would be drawing some prefab textures in a circular fashion and animate the offset on beat or do some colorcycling on beat. personally i find kaleidoscopic picture fugly and 2d tunnels are much more ossom!

That's because they aren't.