Phew, there was a break wasn't there! Apparently it's hard to keep up when you're on the road. So I thought there's probably only one thing to do and that's try and do two codevembers for the next few days to make up for it.
Let's see how that goes 🤓
NB This one comes with a warning. The way I coded this is highly UNRECOMMENDED. Not only was it a total ball ache, it doesn’t perform well and there are work arounds. It took what felt like days and the result is not amazing. If you’re wondering, I would probably use canvas for an audio vis of this nature in future. Hashtag learning, amiright?
So today I’m going to expand a little on yesterday and take influence from this crazy gif
But in my version, I want a shape for each of the low frequencies, the mid frequencies and the high frequencies, that change depending on the level we get back from the analysis.
I'm setting a load more custom properties than the previous codevember, so I'm looping over them in the JS. Things I learnt include:
- Maths in CSS is hard, even with nice things like a
This one was a great learning experience and great experiment, even if the final result wasn't ideally what I was after at the start. I would keep using custom properties to do things like filter effects and glitch's for final VJing rather than modifying multiple DOM elements with them in the future.
AudioVis #10: Blend Modes 😎
I've actually written about using blend modes for this audio vis before. The make up of the visual itself isn't too different code wise to previous ones. I have some DOM elements, I am positioing them, I am animating them, the only extra feature I am encorporating is blend modes on the elements to see what effect that has.
It looks super nice, but with all the DOM elements I have with this one performance isn't so great. I can up it by making sure I add the
will-change property in the CSS to any elements that have any other properties that are to change.
However I think we should probably move into a better, more performant way of creating and manipulating DOM els for audio vis, don't you?