While scouting the forums i found this gem of a problem.
Personally i love tinkering with music, i spent probably 3 4 months playing around with the Audio Plugin in C2.
And even though i made a pretty good amount of examples available in the old scirra arcade and even procured a few from more Advanced users, the question still remains:
How Do We Make a Responsive Close to Accurate Beat Detection Audio Visualiser? - (Without Complicated "Custom Plugins"?)
The answer "Variables and order of runtime reading".
In this tutorial we will follow the official Audio Analyser Effect for Creating the Visualizer bars and give same FFT size and Smooth.
If you don't have the patience to read further, it's ok, you can find the download link at the bottom of the page.
First we need to add 1 TiledBackground Object, we set its size to 1px by 1px in the animation editor and give it a greenish color similar to the color Construct Logo has on the triangle accent, or give it a random color you like.
Now drop it outside the layout and add Destroy Outside Layout behavior on it, so it gets destroy'd on start of layout, without consuming 1 extra event on it.
On the TiledBackground Object we add 2 Variables and We name them "BinNr" and "OldBeatNr".
We also need to set the TiledBackground object width to 16px and height to 150px and set the origin point to bottom.
Additionally we need 1 music file -download / or use one of your choosing - and of course the Audio Plugin
Moving to the event sheet
Now im skipping the official guidance that checks the browser if supports audio analyser effects, and or if is on mobile or desktop, that you can add yourself if you want to.
We create a new event and Add 2 conditions to it
System expression : Compare two variables
Add local variable under this event and call it Gain and give it a value of '3' will use it to increase the height of the bars. You can use a local variable in the event sheet or a global variable is not that important.
Create a subevent under The infinity condition and add the condition bellow on it
Create a subevent under the for each TiledBackground and add the following condition
compare two variables:
Now lets talk a bit about the (Audio.AnalyserFreqBinAt("music",0,Self.binNR) The frequencybinAT gives you the value of the selected Visual bar in the SampleRate for that specific bar, we have a number of 43 visual bars, each we assigned a incremental number we could'v used IID but is easier to just have a array like numeration in case we have other objects in the way that might cause the IID to jump one number or 2.
"music" we call the tag of the song, the 0 is the order of the audio expressions we are using in the order we are placing them, so for example if we place analyser effect then distortion effect Analyser will be 0 and distortion 1 and so on.
the self.BinNr is as i said above the value of the sample-rate for that visual bar, it might have another explanation but this is how i understand them - im a big simpleton.
we add a 2nd blank subevent under infinity check by right click and add blank subevent
on condition rule we leave empty
on action we add the following
Lets talk a bit what the OldBeatNr does for us now. What we are doing is each tick we are saving the OldBeatNr to a the current tick FrequencyBinValue of each Visual bar, and then we compare it again to the next tick Value when the runtime will read the event sheet again from top to bottom, that's why this method kind of works. If we drag the Set OldBeatNr above the set Height condition it wont work, because the value will not be true or in this case the OldBeatNr will be equal with the current value and it will not give us a True Condition, also it will not give us the delay and responsiveness of the effect we are looking for, since it will apply the same effect the "Overall Volume" as the Official Tutorial does.
Back to the event sheet
Now we create a new event and call the condition
If you followed properly everything in the tutorial you should have your event sheet looking something like bellow
And if we play the Test Preview we should have a individual Responsive Visual bars that act with a delay. And while is a bit skewed in reaction that is because a good beat detection visualiser with this approach is direct influenced by the fft size and also the samplerate the audio file has, if we load a 16000 MHz sample rate file it will not be as accurate, if we load decrease the FFT size it will aso be very jagged and flashy since will calculate less samples from the samples rate, if your running this on a desktop give the audio analyser a FFT size of 2^12 or 4096 and enjoy the awesome bar dance. We also have to keep in mind the smoothness ads a bit more slowness to the bar movement or increases the movement, a value of 1 will stop the bars movement, a value of 0 will make them move to fast, now all this little things can be adjusted as you want your results to be, but my recommendation would be to always keep a 0.5,0.6,0.7 smoothness level, and a 512 FFT size for desktop and a 64-128 FFT size for mobiles, The higher the FFT size the more samples the analyser will have to calculate and the more CPU usage will use. Now if all worked well, You should see Something like bellow.
If you don't see them react as the gif then don't worry there are 2 files ready made at the bottom of the page.
ViewportBottom(0)- this number is the number of the layer the object will spawn on. If your implementing this on a multilayered project make sure the visual bars are spawning on the layer that they can show as you want.
For more tutorial and examples like this leave a comment bellow! Enjoy the music!
"Givez Naw" -
- download C3 file;
- download C2 file.