# Thread: Breaking down a number

1. ## 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. Not clear at all. can u reword and detail your problem, please?

3. 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 03:18 AM.

4. bump..

5. Registered User
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. 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. Registered User
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. Registered User
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];
}
}
}```
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. i don't understand this code it goes slightly over my head, is there not away to make it fit into 1 function?

10. Registered User
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. 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.

##### 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
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.13580 seconds
• Memory Usage 2,955KB
• Queries Executed 13 (?)
Template Usage (33):
• (5)bbcode_code
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (11)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (11)postbit
• (11)postbit_onlinestatus
• (11)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (70):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• bbcode_parse_start
• postbit_imicons
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete