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.

Advertisements
Eery-themed music visualization using P5.js

One thought on “Eery-themed music visualization using P5.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s