www.webdeveloper.com
Results 1 to 11 of 11

Thread: Breaking down a number

  1. #1
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71

    Breaking down a number

    I would like to know how i can break a number down using 3 images.

    i have 3 images, which simbolise 5k, 50k and 500k...

    I would like a number to be broken down using these images..

    for example

    1,260,000

    would be 2x the 500k image + 5x the 50k image and 2x the 5k image.

    however i am relativly new to JS and havn't a clue...

    Thank you in advance

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Not clear at all. can u reword and detail your problem, please?

  3. #3
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71
    Ok i do apoligise i intended on making it sound as simple as possible.. ok i'll try and simplify it.. And explain..

    I play a MMORPG which basically you play for universal domination, you build fleets and so on, the fleets have a power rating based on what kind of units you build, this power rating is a number which grows very fast and becomes large very quickly.
    The makers of the game devised a way of showing this "power rating" in an easy to understand way...

    They split the "power rating" into 3 groups, 500k, 50k & 5k

    This is an example

    As you can see, the size of the fleet is 1.6M which the small blue/purple coloured blocks represent... the brightest being 500k, then 50k being the medium is brightness then the least brightest only representing 5k....

    Basically i wish to recreate this for a "power rating" calculator i have devised, and i wish the results to be shown as they are on the actual game, i have the 3 images and basically i need to know, how to have the number broken up into these blocks...
    Last edited by DistantUK; 09-29-2006 at 04:18 AM.

  4. #4
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71
    bump..

  5. #5
    Join Date
    Sep 2006
    Location
    Home of the Buckeyes - Columbus, Ohio
    Posts
    54

    Since you're getting no help...

    I think I understand what you want to do. Basically, you want to define a set of unit measures (500000, 50000, and 5000 in this case). You want to determine, programmatically, how many of these units are needed to represent a larger number you will also supply (that will be variable).

    Its like a basic pocket change problem in grade school: What is the fewest number of quarters, dimes, and nickels needed to make up 65 cents?

    Let's figure this out. How many whole quarters fit in 65? The answer is 2. (2 quarters = 50 cents.) Now how many whole dimes fit in the remaining 15 cents? The answer is 1. (1 dime = 10 cents.) Finally, how many whole nickels fit in the remaining 5 cents? 1. So our answer to this problem is 2 quarters, 1 dime, and 1 nickel.

    We can follow this basic logic to create a script that does the task for us.

    Code:
    var units = new Array(50, 10, 5); /*quarter, dime, nickel */
    var amount = 65; /*65 cents */
    var unitCount = new Array(); 
    for(var i = 0; i<unitCount.length; i++){ 
        unitCount[i] = 0;
    }
    for(var i = 0; i<units.length; i++){
        while(amount >= units[i]){
            unitCount[i]++;
            amount -= units[i];
        }
    }
    var remainder = amount;
    Now, replacing the "cents" values with "images":

    Code:
    var units = new Array(500000, 50000, 5000);
    var amount = 1200000;
    var unitCount = new Array();
    for(var i = 0; i<unitCount.length; i++){
        unitCount[i] = 0;
    }
    for(var i = 0; i<units.length; i++){
        while(amount >= units[i]){
            unitCount[i]++;
            amount -= units[i];
        }
    }
    var remainder = amount;
    The variable names are pretty much straighforward. 'units' holds the different units you would like to fill your amount with. 'amount' hold your target value. The resulting array, 'unitCount', contains the number of each respective unit that is necessary in "filling in" your target amount.

    For example, there must be unitCount[0] units[0], unitCount[1] units[1], and unitCount[2] units[2] to reach 1260000. (Read, "there must be 2 500,000 images, 5 50,000 images, and 2 5,000 images ...")

    Any value can be plugged in to 'amount'. Also, any values and any number of values can be stored in the 'units' array, as long as the values are ordered in a decending manner. If there is a remainder, it will be found in 'remainder'.

    I haven't tested this code, I just jotted it down. It should be fine, barring a syntax mistake. I'll leave it to you to create your own function for this script.

    Hope that helps.

    Doug

  6. #6
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71
    Thanks doug, thats basically what I wanted, unfortunatly that code doesn't work, i firstly tried it using the "var amount = 1200000;" but nothing happened so I actually changed the value to the value i wish to be sorted, however I still get nothing..

    Also i need to know how i would use images to replace the "units"

    Thank you

  7. #7
    Join Date
    Sep 2006
    Location
    Home of the Buckeyes - Columbus, Ohio
    Posts
    54
    its 4:17 am where i am...ill look at the code tomorrow when i wake up.

    Doug

  8. #8
    Join Date
    Sep 2006
    Location
    Home of the Buckeyes - Columbus, Ohio
    Posts
    54

    Working code...

    Code:
    	
    function SetImages(amount){
        var units = new Array(500000, 50000, 5000);
        var unitCount = CalcUnits(units, amount);
        var imgSrc =  new Array("images/whateverthepathtoyour500000imageis.png", "images/whateverthepathtoyour50000imageis.png", "images/whateverthepathtoyour5000imageis.png");
        CreateImages(unitCount, imgSrc);
    }
    
    function CalcUnits(units, amount){
        var unitCount = new Array(units.length);
        for(var i = 0; i<unitCount.length; i++){
            unitCount[i] = 0;
        }
        for(var i = 0; i<units.length; i++){
            while(amount >= units[i]){
                unitCount[i]++;
                amount -= units[i];
            }
        }
        return unitCount;
    }
    
    function CreateImages(unitCount, imgSrc){
        var i;
        for(i = 0; i < unitCount.length; i++){
            for(var j = 0; j < unitCount[i]; j++){
                var newImg = new Image();
                newImg.src = imgSrc[i];
                document.getElementById("whateverElementYouWantToAddTheImagesTo").appendChild(newImg);
            }
        }
    }
    This code is actually tested in FF, but it should be fine in any browser.

    I don't know anything about your application, so I'm not sure what the best way to add images to your page would be. The code I provided will add however many images are neccessary for each image "unit" to the element "whateverElement...".

    Hopefully you understand more of what is going on now.

    Doug

  9. #9
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71
    i don't understand this code it goes slightly over my head, is there not away to make it fit into 1 function?

  10. #10
    Join Date
    Sep 2006
    Location
    Home of the Buckeyes - Columbus, Ohio
    Posts
    54
    You only need to actully call the one method to get the script to work...SetImages(). You must pass this method an amount to 'break down', though. To see the code work, set an onclick attribute to call SetImages and pass 1260000. For example:
    Code:
    <a href="#" onclick="SetImages(1260000); return false;">click here</a>
    Then set the image paths in the imgSrc array to some real images. Finally, create a containing element that the images will be populated too. Make sure to give this containing element an ID and set the value in document.getElementById() to this ID. (so you dont use my generic placeholder "whateverElementYouWantToAddTheImagesTo"). For example:
    Code:
    <div id="ContDiv"></div>
    <!-- change "whateverElementYouWantToAddTheImagesTo" to "ContDiv" -->
    This is fairly simple code, and to simplify it even more would not be a good thing. If you're still confused about what is going on, you can ask more specific questions and I'll try to help. If it is still a complete mystery to you, I suggest finding some intro to javascript reading material.

    Doug

  11. #11
    Join Date
    Jun 2006
    Location
    England, UK
    Posts
    71
    nope i got it, sorry i was half asleep when i sent the last post and not in a good mood, thanks for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles