Bandcamp Music Visualisations

Just a quick (and slightly belated) announcement.

The distinguished Bandcamp has recently been regaled with another round of audio-visual snacks. I’ve had a lot of fun working on them, and there will be even more in the not too distant future.

The whole Bandcamp site in fact is bursting with more and more tasty new features which you should check out. In terms of my little contribution on the music visualistions front, there are currently four new full fat flavors to feast on…

Ribbons » which uses my Papervision3D Ribbons Class and is designed for crunching riffs and hard beats.

Ribbons Visualisation

Strata » which was inspired by stream-graphs and rock formations, and flows like a charred pizza in a log-flume along an imaginary Teflon oven dish.

Strata Visualisation

Plughole » which comprises of disembodied appendages and iconography encapsulating the zeitgeist of generation stupid – mashes the aforementioned archetypes up into crumbs before offering them to the esophagus of oblivion.

Plughole Visualisation

Hypno » which was designed to bring about universal harmony and spiritual equilibrium but accidentally caused the credit crunch.

Hypno Visualisation

You can see them in action by visiting an artist’s page (such as Hot Bitch Arsenal or Pattern), hitting play and selecting a visualisation from the pop-out menu underneath the cover art.

Posted on 17 Mar 2009
10 Comments
0 Trackbacks

Meta

More Music Visualisations was posted on March 17th 2009 in the category Design / Animation, Flash, Generative, Illustration, Portfolio, Transmissions and tagged; , , , , .

You can Leave a comment.

Twitter <follow>

March 12th 2010 - 11:17am

Live - Bahrain GP practice http://bit.ly/dBcV8m #F1

Discussion

10 Responses to More Music Visualisations

Leave a Reply

  1. Tommy 11 months ago

    Great stuff, I love the new visualizations. Bandcamp looks pretty killer too.

    Reply to this comment

  2. Jesse Freeman 11 months ago

    They look awesome, congrats!

    Reply to this comment

  3. Christian 11 months ago

    Nice update. They’ve done a good job on your ribbons class.

    OffTopic: remember the DOF effect with the papersprites? I’d like you to take a look at a piece of code i made cause it’s getting my CPUs to it’s knees so that it crashes sooner or later… and i’m just adding blur to 20 sprites, but it crashes everytime, even using 2 or 3 sprites. Would it be OK if i post the code?
    Sorry for the offtopic :)

    Reply to this comment

  4. Soulwire 11 months ago

    Hey Christian,

    Yeah, feel free to post some code. Maybe the problems you’re having are because you’re not limiting the blur to a maximum amount? Also using integers helps.

    Glad you like the visualisations – I’m pretty pleased with how they turned out. It’s a great project to work on and the next batch should be good!

    Reply to this comment

  5. Christian 11 months ago

    well… here it goes:

    This is registered on ENTER_FRAME event for every PaperSprite (20 at the time, tried with 10 and 3… always the same), they float very gently and all.

    function rotationEvent(e:Event):void
    {
    	e.target.rotationY -= 0.5;
    	e.target.rotationX -= 0.5;
    	var p:Point = holder.localToGlobal(new Point(e.target.z,e.target.x));
    	//holder is container, which will be spinned on stage's ENTER_FRAME
    	e.target.filters = getBlurFilter(p.x); //X here is the representation of Z
    }
    


    Using localToGlobal taking Z intead of X, feed the next function returning the array.
    If you’re gonna try this, please save any file you’re working on… i would hate to be responsible of you losing any ongoing project xD (the “80″ division is just to get a small number, tried with Quality set to MEDIUM… same result)

    function getBlurFilter(p:int):Array
    {
    	var myFilter:BlurFilter = new BlurFilter(Math.floor(p / 80),Math.floor(p / 80),BitmapFilterQuality.HIGH);
    	var filtersArray = new Array();
    	filtersArray.push(myFilter);
    	return filtersArray;
    }
    


    Not to mention i’m not even setting the proper order (on Z value) for the sprites, which will add another step on ENTER_FRAME.

    Any hint? (i’m gonna feel so embarrassed when you solve this with 2 lines of code xD )

    Reply to this comment

  6. Soulwire 11 months ago

    Hi Christian,

    For a start, you’re creating a new BlurFilter every update, which is a bad idea for memory usage, among other things. You should reuse just one.

    Also, you can use a bitwise operator to do Math.floor() and its much faster.

    So try this:

    Register a public blur property on the PaperSprite:

    // In the PaperSprite class
    public var blur:BlurFilter = new BlurFilter(0,0,2);
    

    Target this from your enterFrame event:

    function rotationEvent(e:Event):void
    {
    	e.target.rotationY -= 0.5;
    	e.target.rotationX -= 0.5;
    	var p:Point = holder.localToGlobal(new Point(e.target.z,e.target.x));
    	e.target.blur.blurX = e.target.blurY = p.x * 0.1 < < 0;
    }
    

    I'll just explain the statement p.x * 0.1 < < 0. Multiplication is faster than division, so to divide by 2 its best to use myNumber *= 0.5 instead of myNumber /= 2.

    << 0 is performing a left bitwise shift and will return an integer, just like Math.floor() but loads faster.

    If you're still having problems, trace out the value being assigned to the blur - you probably want to limit it to a maximum, say 24, otherwise Flash will struggle to render the bitmap filter.

    Hope that helps.

    Reply to this comment

  7. Christian 11 months ago

    Ok, test results…

    Added the lines you wrote, with the obvious question: when and how to apply, so tried:
    in the set front of PaperSprite

    ...
    _front = addChild( value );
    var filterArray:Array = new Array();
    filterArray.push(blur);
    _front.filters = filterArray;
    


    no go… (i mean, no blur applied, as expected)

    added to update function in PaperSprite

    ...
    var filterArray:Array = new Array();
    filterArray.push(blur);
    _front.filters = _back.filters = filterArray;
    

    this last turned out in the well known CTRL+ENTER = CRASH :)
    tried applyFilter() method, but as _front and _back aren’t BitmapData… well you get the point.

    I mean, the idea is great, only one filter instance is continuously applied as the values of the filter are changing… just couldn’t get it done… so far.
    The values applied are from 3-4 to a maximum of 11 (i’m multiplying by .04 and bitwise shifting as told). I went on google looking for some similar situation, but AS3 posts and tuts aren’t as popular as i’d like’em to be. I’ll keep trying.

    I was writing this and your site went offline :( so now i have updates:
    Went back to my original intention: not touching your class. So i created the blurFilter and added to each paperSprite (i add them with a for loop)

    paperSprites[i].filters = new Array(blur);
    


    and in the ENTER_FRAME event i used:

    blur.blurX = blur.blurY = a; //the value from "z" position
    e.target.filters = new Array(blur);
    


    Ok, i know i’m re-registering the blur effect on each frame. I couldn’t find how to do as you told. This way had some strange behaviour: crashed on CS4 environment-player. Worked just fine on standalone player (17mb processing, 20mb swapping, 7 – 15% cpu usage)… so, i’m quite happy with it. I would love to understand some more about class/object to assign the blur as you told me. I’m happy also about not touching your class, i like how it works and “extra” effects as this one should go outside, IMHO.
    So… if you feel like it, any advise would be, as usual, very appreciated. If not :) THANKS A LOT, i wouldn’t have come this far without your guidance. Thanks, really.

    Reply to this comment

  8. Bjorn 10 months ago

    Hey man! Stumbled upon your site a while back, before I came to London, and was very impressed. Today when I followed your link on LinkedIn I put two and two together! Man, I knew you were good, but not this good! Very cool stuff. Definitely gonna pull some source code and play around with!

    Cheers
    Bjorn

    Reply to this comment

  9. kobi6810 6 months ago

    Great job.

    Where do you find all the small animated pattern you use ? personnal job or find somewhere on the net.

    Thanks.

    Reply to this comment

  10. araid 3 months ago

    Hi, I’m quite newbie in this area of AS3. I’d like to ask for some advice about how to start building an audio reactive application.

    I mean, what are the main classes where you extract sound data, such as tempo, etc? Is it enough with basic AS3 or do I need some other libraries?

    Thanks!

    Reply to this comment