CSS3 sprite animation, issues in Safari

Together with CSS3 standard we get awesome tool for creating hardware accelerated css-only animated sprites. For now it is implemented only in webkit based browsers like Safari, Chrome or most of the mobile browsers. Paul Bakaus described it on his blog months ago, with additional approaches and performance optimization methods. Also Marek Pawlowski said a lot about this on his DevMeeting gamedev workshop. Working on my new mobile game, I've tested everything I could find all over web. And some of the examples (like that Paul's created with Doug Neiner) did not works on Safari and some mobiles (like Samsung's Dolfin on my bada Wave). I spend couple of annoying hours to figure out what happens, analyzing different use cases, different examples and documentation pages. But solution was simple as hell:

Safari and some of mobile browsers cannot animate any element with CSS3 animation if there is no '0%' and '100%' step.

That's why example from Paul's blog didn't want to work when I test them:

@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
}

Adding the last frame, with the same parameters as the first one, fixes the problem:

@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
  100% { background-position: 0px 0px; }
}

Of course I didn't want to show that Paul and other guys was wrong - for sure all of them has bigger experience and knowledge than me. And their solutions will eventually work when browsers will implement the standards (what was the point I supposed) - but I was looking for something what will work here and now.

Javascript random numbers with custom seed - part 2

Generator created in previous example was able only to create integer numbers from zero to the given maximum (2^50) using provided seed. But in most cases we need random numbers from some range, so lets modify previous example and add 'min' and 'max' arguments to the .next() method. Also, to make it more like the native Math.rand(), let's make it generating floats from 0 to 1.

var CustomRandom = function(nseed) {    
  
  var seed,    
    constant = Math.pow(2, 13)+1,    
    prime = 1987,    
//any prime number, needed for calculations, 1987 is my favorite:)  
    maximum = 1000;    
//maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot)  
    if (nseed) {    
      seed = nseed;    
    }    
    
    if (seed == null) {    
//before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB  
      
      seed = (new Date()).getTime();   
//if there is no seed, use timestamp     
    }     
    
    return {    
      next : function(min, max) {    
        seed *= constant;    
        seed += prime;    
           
      
        return min && max ? min+seed%maximum/maximum*(max-min) : seed%maximum/maximum;  
// if 'min' and 'max' are not provided, return random number between 0 & 1  
      }    
    }    
}  

Now its easy to use it in such a way:

var rng = CustomRandom(23);
//use '23' as a seed
    rng.next(); // 0.426
    rng.next(); // 0.205

In the next part I will show some GameDev related examples of using Random Number Generators with custom seeds.

Check 1st part of the "Javascript random numbers with custom seed" tutorial

Javascript random numbers with custom seed - part 1

Introduction
Any random number generator generates sequences of numbers using some initial seed. The same seed always gives the same sequence. Most popular initialization method is to provide actual timestamp as seed - it changes every second so probability of receiving same sequences is very low.
Generating pseudorandom sequences of numbers has wide variety of uses, ranging from creating random maps for games (with well constructed map generator all the game should remember is just the initial seed, not the array with list of map elements), to steganography, where you code & decode message on the sample image using the same seed (it is impossible to decode the information from the image without knowing exact number used as seed during coding it). I will create some examples in the next part of the series.

First attempt
Unfortunately, it is impossible to provide custom seed to the Javascript Math.random(). It always uses timesamp for initialization. So let us create our own generator with everything we need.

var CustomRandom = function(nseed) {

    var seed,
        constant = Math.pow(2, 13)+1,
        prime = 37,
        maximum = Math.pow(2, 50);
 
    if (nseed) {
        seed = nseed;
    }
 
    if (seed == null) {
//if there is no seed, use timestamp
        seed = (new Date()).getTime();
    } 
 
    return {
        next : function() {
            seed *= constant;
            seed += prime;
            seed %= maximum;
            
            return seed;
        }
    }
}

And now:

var rng = CustomRandom(23);
//use '23' as a seed
    rng.next(); //188476
    rng.next(); //1544183905
    rng.next(); //12651498733702

In the next parts I will extend that CustomRandom() generator with limits (min and max value) and implement some real-life use cases.

Check 2nd part of the tutorial: Javascript random numbers with custom seed