Fun-themed music visualization with P5.js

I posted about this eerie-themed music visualizer I created using P5.js a fair moment back, and as I noted there, I planned to create more visualizers. Here’s the next in that series, a fun, orange-blue theme to fit my re-launched site at daskitz.ugotsta.com.

Check out the visualizer here: ugotsta.github.io/projects/p5-daskitz.html?url=https://soundcloud.com/ugotsta/grampa-howie

As with my previous one, you can change the ?url= parameter to any SoundCloud track and it’ll play it.

And here’s an example from my recent post for DasKitz:

Still more to come

I do still have plans for more. However, I’m also working on a way to encapsulate the code to make it more extensible. Meanwhile, feel free to alter the code yourself.

Code here: https://github.com/Ugotsta/Ugotsta.github.io/blob/master/projects/p5-daskitz.html

Cheers!

Fun-themed music visualization with P5.js

MilkDrop visualization database

To this day, Winamp still has some of the most jaw-dropping music visualizations via the MilkDrop plugin. MilkDrop has now been ported to other software and systems but it’s bundled right into Winamp.

I used MilkDrop for some recent projects, I have more projects using it on the way too. But I couldn’t seem to find anything cataloging the massive list of presets.

So I’ve begun one, using YouTube for the videos. Here’s the current playlist:

One Problem

There are well past 1000 great presets for MilkDrop and I couldn’t feasibly create videos for them all manually. Moreover, it was admittedly kinda tough finding a way to record them in the first place.

Solution

So, I used AutoIt to automate the process. Here’s the script I setup for the recording process using MSI Afterburner:

https://gist.github.com/Ugotsta/57b385a44039460159c7

And here’s the script I used to seamlessly loop the videos using MLT.

https://gist.github.com/Ugotsta/3496a2706e71dd46e538

I don’t have the time to go through the details right now. But I’ll gladly follow up with some details should anyone ask.

For now, here’s a link to the site I’ll be using to house the database: http://visualize.ugotsta.com/

It’s just a blog at blogger.com, it’s also kinda hideous right now. But it’s the easiest way to setup a database like this.

Cheers! 🙂

MilkDrop visualization database

Eery-themed music visualization using P5.js

So I’ve been laboring with some music visualizations relying on the fantastic P5.js library, which is an advanced extension to the popular processing language.

Here are the latest results: http://ugotsta.github.io/projects/p5-hid-template.html

More Details

Basically, that’s just a single, self-contained HTML file with no CSS, images or other assets needed and it can provide visualization for any SoundCloud url. It currently supports two url parameters as follows:

  • url= enter any SoundCloud track url.
  • text= enter the text you’d like to appear in the visualization.

So for example, a metal track from a friend of mine:

ugotsta.github.io/projects/p5-hid-template.html?url=https://soundcloud.com/jacob-kauble/mechanized-supremecy&text=Sanctus Audio

You’ll see the ?url= references the track’s url at SoundCloud, then the &text= provides text to show in the center of the visualization.

The raw source file is part of my main GitHub repo here, accessible here: https://github.com/Ugotsta/Ugotsta.github.io/blob/master/projects/p5-hid-template.html

Of course, I’ve already put the visualization to use in some videos for my “Hidden in Darkness” project. Here’s one of them:

More to come

This is still a work in progress so there’s more to be done yet. I’m also working on a more basic template to somewhat emulate Monstercat videos.

Let me know if there’s anything in particular you’d like to see done as well, I’ll see if I can get to it.

UPDATE: 2015-07-28

The file at GitHub’s undergoing some major cleanup and revision but I’ve updated details above to reflect that.

Eery-themed music visualization using P5.js