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

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

Breakout using multiple JavaScript engines

Check it out here: http://www.jsbreakouts.org/

Through that project, you can play and learn to code the classic videogame Breakout, using a variety of different JavaScript engines.

Incidentally, I had the same idea to experiment cross-engine and already have a bunch of matrix effect clones across several engines. I’ve posted about the first in a small article, Experimenting with the Matrix code effect.

Hopefully we’ll see more cross-engine experiments to help others learn various engines and practices. 🙂

Link