Rumyra's Head

Codevember Number Fifteen

Super Sun

Today's inspiration is:

The Super Sun

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...

Full Article

Codevember Number Thirteen and Fourteen

Part Three: d3.js

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.

Full Article

Codevember Number Nine And Ten

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 🤓

AudioVis #9

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.

Full Article

Codevember Number Eight

Part Two: Random Cool New Features

So this next section I did ponder for a while. I could take you straight on to a much better way of creating visuals within the DOM, but before I do that I want to introduce some new features we have in simple CSS that can really help our visuals later down the track. Our inspiration for this set is a little tumblr called Archery: Into the Continuum. Here I want to take inspiration from some of these random gifs, not exactly replicate them.

So first up, this gif:

Custom Properties

Or JavaScript all up in your CSS

And the much talked about CSS Custom properties. ✨💥💜 We can really use these to our advantage when doing audio vis work as we can reference them directly in our JavaScript and basically update our CSS in realtime.

Full Article

Codevember Number Five

Today sees the last in our Bridget Riley series. We'll move on to something different tomorrow…

Today is Bridget Riley's Static 4:

Bridget Riley : Static 4

Full Article

Codevember Number Four

We're in it for the long haul - so we're still using the same technique. Stick with me - come next week, I'll be looking at some different, new shiny things and the week after the same. Over the next month we shall learn some great audio vis techniques together. These ones aren't bad btw - they may just not be 'wow' juuuussstt yet 🙃

This is my inspiration for today’s pen: Bridget Riley's Quiver 3.

Bridget Riley : Quiver 3

I really like this one, although it took a few tricks to get the triangles looking and positioned right. And I even didn't replicate the curved edges particularly. Later on in this series I'm going to explore different techniques and hopefully find better ways of creating shapes like these (SVGs anyone?).

Full Article

Codevember Number Three

This is my inspiration for today’s pen: Bridget Riley's Dilated Centres.

Bridget Riley : Dilated Centers

You may not be able to tell but the the circles aren’t quite concentric. The lovely Lotte Jackson wrote a post just over a month ago, about cicada, which reminded me about this piece. It used prime numbers and border radius’ to create a great ‘blobby’ effect on some images she was displaying on a website. It was a totally awesome technique, and I really wanted to try it out. What a great pen to do so with.

Full Article