Activate your free membership today | Log-in

Tuesday, May 19th, 2009

Locking onto beat; More visualizations of music

Category: Canvas, Showcase

<>p>"darkimmortal" has created another really nice visualization of music that uses Canvas and SoundManager2 to do its work.

Do yourself a favour, and hit play to see the funk

The example uses two canvases, one to do the logic wave work, and then it is copied into the main canvas that you see ctxR.drawImage( ctxL.canvas, 0, 0 );.

Here's some of the fun:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function render(event){
  3.         var now = new Date().getTime();
  4.         ctxL.clearRect( 0, 0, 200, 100 );
  5.         var cdex = ~~((now/100)%21);
  6.         var colors = [_calone[cdex], _caltwo[cdex], 'rgb('+~~(24+(_vis||[0,0])[1]/19+34*Math.cos(now/8192+(_vis||[0,0])[0]/92))+','+~~(16+20*Math.cos(2+now/7192+(_vis||[0,0])[1]/71))+','+~~(32+24*Math.cos(4+now/5192+(_vis||[0,0])[0]/87))+')'];
  7.         for( var j=0; j<colors .length; j++ ){
  8.                 ctxL.beginPath();
  9.                 ctxL.moveTo( 250,50 );
  10.                 ctxL.fillStyle = colors[j];
  11.                 var ii;
  12.                 for( var i=0; i&lt;128; i+=3 ){
  13.                         ii = Math.abs(i-64);
  14.                         // Wave equation from Dynamic Hypnoglow
  15.                         // Optimised and made epic by Darkimmortal
  16.                         ctxL.lineTo( ii*4-32, 32+(64+ii/2)*(.1+.2*Math.cos(j+(now/352)+i/31))+(i&64)*1/(68-ii)+16*Math.sin( (now+(_vis||[0,0])[0]/1337 )/( (788-j*287)%1337 ) - ii*(.07+j/43+(_vis||[0,0])[1]/1973-(_vis||[0,0])[0]/1837) ) );
  17.                         // End of wave equation.
  18.                 }
  19.                 ctxL.closePath();
  20.                 ctxL.fill();
  21.         }
  22.  
  23.         ctxR.clearRect( 0, 0, 200, 100 );
  24.         ctxR.drawImage( ctxL.canvas, 0, 0 );
  25.         ctxR.globalCompositeOperation = 'lighter';
  26.         if(_bright){
  27.                 _bright2 ++;
  28.         }
  29.         if(_bright2> 3){
  30.                 _bright = false;
  31.                 _bright2=0;
  32.         }
  33.         ctxL.globalCompositeOperation = _bright ? 'lighter' : 'copy';
  34.        
  35.         for( var i=0; i&lt;6; i++ ){
  36.                 ctxL.drawImage(ctxL.canvas, 0, 0, 200>>i, 100>>i, 0, 0, 100>>i, 50>>i)
  37.                 ctxR.drawImage(ctxL.canvas, 0, 0, 100>>i,  50>>i, 0, 0, 200, 100);
  38.         }
  39.         _overlay.style.backgroundPosition = ~~((_vis[_axis]/2.5) % 600 ) +'px '+ (_firefox + (_aim> 2800 ? 10 : (_aim <500 ? -10 : 0))) +'px';
  40.        
  41.         if(_vis[_axis] <_aim){
  42.                 _vis[_axis]+= 20;
  43.         }
  44.         if(_vis[_axis]> _aim){
  45.                 _vis[_axis]-= 20;
  46.         }
  47.        
  48.         _fpsb ++;
  49.         if(_fpsc + 1000 <now){
  50.                 _fpsc = now;
  51.                 _fps = _fpsb;
  52.                 _fpsb = 0;
  53.         }       
  54. }
  55.  

Related Content:

Posted by Dion Almaer at 7:31 am
16 Comments

++---
2.5 rating from 36 votes

16 Comments »

Comments feed TrackBack URI

FYI the visuals are ripped off ( no other words considering the lack of proper credits although I contacted DarkImmortal a few weeks/months ago about that ) from the 20 lines “Dynamic Hypnoglow” effect I wrote in January 2008

Comment by p01 — May 19, 2009

Amazing :)

I never thought that this would be possible in the WEB in the near future.

Btw why does it say i should watch it on FF3.5 ? It works fine in Chrome 2

Comment by unrealnet — May 19, 2009

JavaScript is open source by essence but it doesn’t exempt developers from such simple things as IPR and mere courtesy.

uneralnet: I developed the visuals in Opera 9.5 and Firefox 3.0, one year and half ago.

Comment by p01 — May 19, 2009

Not crediting the properly gives the Open Web a bad name ;(

Comment by rasmusfl0e — May 19, 2009

Yeah, lets bring the demo scene to JS and Canvas. :) Then it will be a challenge with performance again as back in the old Amiga days.

Comment by Spocke — May 19, 2009

I knew this looked familiar……

Comment by TNO — May 19, 2009

Credits added.

Also lol at the rating

Comment by Darkimmortal — May 19, 2009

Also credits were there until recently when I decided no one really cared about it.

Did I know it would get posted publicly? No.

Anyway hope there’s no hard feelings :)

Comment by Darkimmortal — May 19, 2009

Whether it would get posted more publicly than on your 20+ millions hits image hosting service and in blog comments or not is irrelevant. It’s a simple matter of respect.

Anyhow, thanks for making it right.

Comment by p01 — May 19, 2009

@p01

great stuff, that is amazing!

Comment by driverdave — May 19, 2009

D:

Comment by Darkimmortal — May 19, 2009

Although it is cool, Darkimmortal got it shown on here by moaning in another topic about how it was “better news” than http://ajaxian.com/archives/crap-i-missed-it-doesnt-miss-your-file-upload which I’d say myself was much more interesting to the masses.

Again, lack of respect.

Comment by youngestlinton — May 19, 2009

No, everything I do gets ignored.

Comment by Darkimmortal — May 19, 2009

Also it may be news to you that this has been up for over 3 months.

Comment by Darkimmortal — May 19, 2009

bitch bitch bitch

LOL

Comment by ajaxery — May 19, 2009

So leasson learned is that “nagging works”, right…?
.
Just kidding ;)
.
I think DarkImmortal deserved the space here. And I also think his works is AWESOME…!
GREAT work!
And respect to Dion for posting about this, it really did deserve the space it was given here … ;)

Comment by ThomasHansen — May 19, 2009

Leave a comment

You must be logged in to post a comment.