How can I get rounded numbers from calculations that returns digits after the decimal point? And all the numbers together will be the number that is divided from.


I am currently working on an JavaScript tilebased-game with sprite animations.

Some walk/run sprites are less or more.

Let's say I have 3 walk sprites for walking down.

1: Look down

2: walkanimation sprite

3: walkanimation sprite

The distance between each tile, let's say, is 16 pixels.

16 pixels divided by 3 sprites is 5.33333.

So if the player walks down, each animationsprite wil move 5.3333 pixels down. That will end up that the player is at 15.999 pixels when the walk animation is done.

That will become not nice if the player walks down many times.

So I want to dynamically get the steps length which end up at the number that is divided from.

In this example:

16 / 3

Will return:

1/3: 6

1/3: 5

1/3: 5

Total: 16 pixels walked

  • \$\begingroup\$ (temporary walk distance > 5 ) initiates a sub animation and (temporary walk distance >16) restarts the walking animation \$\endgroup\$ Dec 7, 2013 at 20:34

3 Answers 3


It sounds like what you're after is a version of the Bresenham Algorithm for line-drawing: in effect, you're drawing a line that goes, e.g., 3 'sprixels' (that is, sprite-pixels) in one direction, and 16 pixels in the other, and you need to know what spans of pixels correspond to which sprixel.

If you don't care about evenly distributing 'long' and 'short' steps, then there's a very straightforward naive algorithm:

int spriteSteps[spriteCount];
int minSteps = totalSteps/spriteCount;
int extraSteps = totalSteps % spriteCount;
for ( i = 0; i < spriteCount; i++ ) {
    if ( i >= extraSteps )
        spriteSteps[i] = minSteps;
        spriteSteps[i] = minSteps+1;

This will fill the spriteSteps[] array with the appropriate number of pixels for each sprite.

If you do want to distribute long and short steps as evenly as possible across your full set of sprites, then you should look at the Bresenham algorithm mentioned above, specifically span versions of it; it's not substantially more complicated than what I just gave. In effect, an accumulated error is used to determine when to flip from one span to the next.

Note that both of these algorithms have one major advantage: they both use nothing but integer arithmetic. In general, there's no reason to go to float for an algorithm like this, and many excellent reasons to avoid it.

  • \$\begingroup\$ Thanks for your help! I did copy your (pseudo?) code, and tried to convert it to javascript with some editing(to prevent floats). And this works! Link: jsfiddle.net/MzEmt \$\endgroup\$
    – Ismail
    Dec 13, 2013 at 22:22

I'm not sure what you're asking, but what's wrong with division & the modulus? The modulus ("%" in javascript) returns the remainder of a division.

 16 % 3 = 1 
 26 % 3 = 2
 33 % 3 = 0.
  • \$\begingroup\$ for 3 sprites I need to calculate the steplength for each sprite, with 15 pixels I can give each sprite 5pixels steplength but for 16 pixels i can't give them 5,3333 steplength it will reduce the performance and will output anti aliased pixels. With an algorithm or something like that I need to get the output for 16pixels with 3 steps: 6,5,5 so the first step is 6px, second 5px,third 5px \$\endgroup\$
    – Ismail
    Dec 13, 2013 at 14:15
  • \$\begingroup\$ if you're looking for code: *var steplength = (pixelLength/numofSprites + ( \$\endgroup\$
    – grassBlade
    Dec 13, 2013 at 16:38
  • \$\begingroup\$ sorry about that; had to run off for a while.. Are you looking for code? And if so, how general should the function be? \$\endgroup\$
    – grassBlade
    Dec 13, 2013 at 17:18
  • \$\begingroup\$ yes I am looking for code/algorithm to bring up an solution to my problem. The main thing is that I want it to return the steplength for each sprite, other things are not necessary - thanks:)! \$\endgroup\$
    – Ismail
    Dec 13, 2013 at 18:21

Sorry for adding the code as another answer, but I'm more used to vbulletin boards & their markup codes than this markdown system.

jsFiddle Code, as well as below

numofSprites = 8;
stepLength = [];
function doit(pixelLength){
var remainder = pixelLength % numofSprites;
for (i = 0; i < 3; i++){
    var extraStep = 0;
    if (remainder != 0) {
                extraStep =  1

    stepLength[i] = (Math.floor(pixelLength/numofSprites) +  extraStep);
    alert(' pixelLength = ' + pixelLength + ' step'+i+ ' =' + stepLength[i])

  • \$\begingroup\$ Thanks for all your time and help, but stil this doesn't work on more sprites. Example: jsfiddle.net/ZTu5R \$\endgroup\$
    – Ismail
    Dec 13, 2013 at 20:17
  • \$\begingroup\$ that was what I meant by 'general' \$\endgroup\$
    – grassBlade
    Dec 13, 2013 at 21:12
  • \$\begingroup\$ get rid of the switch code and replace it with this (I hate this markdownfor (i = 0; i < numofSprites; i++){ var extraStep = 0; if (remainder != 0) { extraStep = 1 remainder--; } \$\endgroup\$
    – grassBlade
    Dec 13, 2013 at 21:13
  • \$\begingroup\$ Update the script. Click on the jsfiddle link, edit the script and click update. Copy the link and give it. Thanks :) \$\endgroup\$
    – Ismail
    Dec 13, 2013 at 21:46
  • \$\begingroup\$ done (I think, still getting used to this board & fiddle...always worked inhouse or on vbulletins). You're welcome :) \$\endgroup\$
    – grassBlade
    Dec 13, 2013 at 22:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .