Baron Knoxburry » tutorial http://b-knox.com Just another WordPress weblog Wed, 28 Jul 2010 23:41:40 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 April Fools’ Pranks with Javascript and jQuery http://b-knox.com/127/april-fools-pranks-with-javascript-and-jquery/ http://b-knox.com/127/april-fools-pranks-with-javascript-and-jquery/#comments Wed, 31 Mar 2010 20:06:13 +0000 b-knox http://b-knox.com/?p=127 Tomorrow is April Fools’ Day and I thought, “This year, Imma gonna do-a sumptin!”  Who am I going to prank?  Battle of the Bits of course!  I don’t think those noobs even know I have this blog.  :/

So… to get started…  we need to detect that it is indeed April 1st, the day of April Fools’.  This can be done with some simple javascript —

  1. var today = new Date();
  2. if (today.getMonth()+‘.’+today.getDate()==‘3.1′)  {
  3. /*  put your pranks in HERE!!  :D  */
  4. }

At first glance this looks screwy. We create a Date() object and get today’s month and day. But April 1st != 3.1 – it should equal 4.1 right? Silly javascript! Month values are stored [0..11] instead of one through twelve. I thought maybe the day would be messed up too as it is stored [0..31] but it works correctly. I tested this code by setting my operating systems clock ahead to 4/1. The neat thing about using javascript for the date check is that it uses the visitors’ system clock rather than the servers.

Let’s add a prank : Sound

And for my first prank I will add a sound to every link click. This sound happens to be my own voice exclaiming *KLINK*. Here I add some jQuery, using the .live() method on all anchor tags.

  1. $(document).ready(function(){
  2. $(‘a’).live(‘click’,
  3. function(event) {
  4. event.preventDefault();
  5. $(‘#footer’).before(‘<embed src="/klink.wav" hidden="true" autostart="true"/>’);
  6. if (!$(this).hasClass(‘updateAjaxContent’)&amp;&amp;!$(this).hasClass(’speakerPopout’))
  7. window.setTimeout(‘window.location="’+$(this).attr(‘href’)+‘"’,500);
  8. }
  9. );
  10. });

This code is placed inside the date check so it will only run on April Foools’ Day. First, we prevent the default event from the click. Then we insert a hidden <embed> tag that autoplays our sound.  The visitor’s browser should know what to do, automajikally throwing a Windows Media or Quicktime player into the page depending on browser settings.  If you don’t have a #footer, make sure to change that to a place that exists on your page.  Finally, I run a check on the link’s classes to make sure they don’t already have javascript functionality.  If they do, the sound just plays.  If they don’t, we give the browser a half second to play the sound and then move on to the next page.

Another prank : Color

Want to really confuse your visitors? Let’s shift the colors of your layout randomly! Once again I use some jQuery, embed the following code inside the $(document).ready() which is inside the date check.

  1. function dec2hex(a) {
  2.       a = parseInt(a).toString(16);
  3.       return a.length&lt;2?"0"+a:a;
  4.     }
  5.  
  6.     var swatch, r, g, b, color;
  7.  
  8.     randomColor();
  9.  
  10.     function randomColor()  {
  11.       swatch = Math.floor(Math.random()*5);
  12.       r = dec2hex(Math.floor(Math.random()*256));
  13.       g = dec2hex(Math.floor(Math.random()*256));
  14.       b = dec2hex(Math.floor(Math.random()*256));
  15.       color = ‘#’+r+g+b;
  16.       switch (swatch) {
  17.         case 0:
  18.           $(‘boxLink:hover’).css(‘background-color’,color);
  19.           $(‘body’).animate({color:color},2500,function(){randomColor()});
  20.           break;
  21.         case 1:
  22.           $(‘.boxLink’).css(‘color’,color);
  23.           $(‘a’).animate({color:color},12500,function(){randomColor()});
  24.           break;
  25.         case 2:
  26.           $(‘.logo1′).animate({color:color},3500,function(){randomColor()});
  27.           break;
  28.         case 3:
  29.           $(‘.logo0′).animate({color:color},1500,function(){randomColor()});
  30.           break;
  31.         case 4:
  32.           $(‘html’).css(‘background-color’,color);
  33.           $(‘body’).css(‘background-color’,color);
  34.           $(‘boxLink:hover’).animate({color:color},4500,function(){randomColor()});
  35.           break;
  36.       }
  37.     }

I removed over half of the elements I am affecting with the randomly generated colors to make this easier to understand. The variable ’swatch’ is used to identify which color is being affected in the layout. dec2hex() helps convert the random values to a hex color value. I’m using the callback feature of the .animate() function to keep the colors fluxing (though I don’t see any color fading to another color {a bug?!?!}). If you call randomColor() directly from inside itself the browser will hang or you’ll get a recursive script error.

View Demo Here

Get Source Here

Tested in Firefox and Chrome. I saved a BotB render page to share the effects. I only replaced the links in the main menu and disabled the April Fools check in jqueryAprilFools.js so you can see the prank in actions always!

I hope somebody learns something. :D

]]> http://b-knox.com/127/april-fools-pranks-with-javascript-and-jquery/feed/ 1 LSDJ Kick Drum on Pulse, Wave and/or Noise Channels http://b-knox.com/43/lsdj-kick-drum-on-pulse-wave-andor-noise-channels/ http://b-knox.com/43/lsdj-kick-drum-on-pulse-wave-andor-noise-channels/#comments Tue, 16 Mar 2010 01:34:03 +0000 b-knox http://b-knox.com/?p=43 The LSDJ manual comes with an example for the pulse wave kick drum. My variation is on the right. I often use F1 on the volume envelope for a quick kick but if I want a long boom I use F3 to F6.  I keep the sweep envelope the same (and remember this sweep effect only works on the PU1 channel).  C-5 seems to be a happy trigger for the kick’s sweep.

But reserving a pulse channel for the kick can be restrictive to your harmonies.  Sure, you can fit notes between the kicks but sometimes that just won’t do. Let’s explore some more!

The wave channel features built-in sample banks known as ‘kits’.  You can use two kits simultaneously and they come out software mixed. For the most part, the samples have shite quality and I prefer to use this channel for a growly synth bass. For kicks, try doubling the 808 kick and the 909 or Linndrum kicks. Having the bass line play in between the kicks can make for funky syncopations!

Download audio file (lsdj-kit-n-synth-groove.mp3)
lsdj kit n synth groove.mp3

Googling the net, I stumbled upon an old 8bc thread where Ikuma explained his method for synthesizing a kick drum (pictured below). Personally, I had a hard time getting it loud enough and keeping it bassy. If you want to use this method you should compensate the volume in the rest of your instruments.  I tried triggering this with all the octaves and C-8 seemed to have the most punch.

Last, but not least, the noise channel.  I played around a lot with this but I’m thinking there might be a better way (either that or the NES’s 2A03 is superior in my ears).  C-3 seems to be the best pitch but, again, the kick sounds rather flat, kind of quiet and lacking punch.  If you try out C-5 with this same instrument LSDJ plays back a textured snare-like sound which, incidentally, is a bit louder.  So I tried layering the noise and wave kicks and it seemed to work for volume compensation. With this particular ‘combination method’ we have freed up our two pulse channels but used up the two remaining.

Download audio file (lsdj-kick-samples.mp3)
lsdj kick samples.mp3

Pulse bent bass drum kick wins out in my book but that won’t keep me from trying new things!

]]> http://b-knox.com/43/lsdj-kick-drum-on-pulse-wave-andor-noise-channels/feed/ 2