It's Sapphire subject today so here's a little audio vis instead of a grid practice, as it seemed to fit a little betterer.
See the Pen Codevember Hash 2 by Rumyra (@Rumyra) on CodePen.
The biggest change I've made to the audio...
Wow I almost wrote 2018 then! It's here CODEVEMBER!! ALL THE EMOJIS
tl:dr;
I haven't written much this year, it's been pretty busy… I think I'll make it more of a focus next year, there's so much I want to learn and then hopefully write about. This year has very much been about sharing my thus far found knowledge. Which I will continue to do, but there's so many things which have taken a back seat and I need to sit and learn.
So the other day I shared a relatively crazy experience I had in Vienna last week.
Thankfully gettin my hair sorted out after I CAUGHT IT ON FIRE in Vienna (ask @csswizardry )
— Ruth John (@Rumyra) May 15, 2017
Expect totally on fire short haired Ruth 🔥
Anyway, thanks very much for everyone's concern and questions. I thought it probably deserved a little more explanation.
I set my hair on fire, well I say I it was completely by accident and totally random.
I wrote this back in December, then hopped in a campervan and trvelled round Australia and barely opened my laptop. It's probably still worth releasing tho 👉
Firstly let's go over the last few - here's the inspiration:
Today's inspiration is:
Today's is a little bit trickier as we have to create arc elements drawn in a circle that increase their outer arc with our data. But otherwise the code goes much the same as the previous days...
Before I start I want to give a big shout out to Ben (@benjaminbenben) who was helping me with some performance stuff I having trouble with. In doing so he really opened my eyes to how powerful d3 is and actually how suited a library it is to help with what we are doing here.
It’s dubbed a ‘visualisation library’, however I think it’s relationship with data has given it a reputation that makes people who haven't discovered it, assume it’s just for pie charts. That’s changing now, and don’t get me wrong it’s good for displaying data, but that’s just it it’s good with displaying and it’s good with data. So anything you want to do with the DOM or anything you want to do with data and d3 has you covered.
This is an experiement in symmetry. An effect that would be great in the final audio vis software.
See the Pen Codevember AudioVis #11 by Rumyra (@Rumyra) on CodePen.
The original idea is a function that would take whatever was in the DOM and reflect...
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.