Breaking down a number

@DistantUKSep 28.2006

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

to post a comment

JavaScript

10 Comments(s) _↴

@KorSep 28.2006 — #Not clear at all. can u reword and detail your problem, please?

@DistantUKauthorSep 29.2006 — #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

[URL=http://distantuk.pwp.blueyonder.co.uk/hyps.gif]This is an example[/URL]

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...

@DistantUKauthorSep 29.2006 — #bump..

@crushmeguySep 29.2006 — #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;
 [/CODE]

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;
 [/CODE]

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

@DistantUKauthorSep 30.2006 — #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

@crushmeguySep 30.2006 — #its 4:17 am where i am...ill look at the code tomorrow when i wake up.

Doug

@crushmeguySep 30.2006 — #

[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);
 }
 }
 }
 [/CODE]

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

@DistantUKauthorOct 01.2006 — #i don't understand this code it goes slightly over my head, is there not away to make it fit into 1 function?

@crushmeguyOct 01.2006 — #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>
 [/CODE]

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" -->
 [/CODE]

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

@DistantUKauthorOct 01.2006 — #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.

Also in #JavaScript _↴

Deleting objects how to create transparent dom element HELP! Seasonal Background Code

Success!

Help @DistantUK spread the word by sharing this article on Twitter...

Tweet This

Breaking down a number

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Breaking down a number

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴