I have seen many places using Math.floor() and Math.random()
like below
$('a.random-color').hover(function() { //mouseover
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({
'color': col,
'paddingLeft': '20px'
},1000);
},function() { //mouseout
$(this).animate({
'color': original,
'paddingLeft': '0'
},500);
});
});
Why used Math.floor() and Math.random()?
Math.random will give you a floating point number between 0 (inclusive) and 1 (exclusive).
Multiplying that by 256 will give you a number in the range 0 (inclusive) through 256 (exclusive), but still floating point.
Taking the floor of that number will give you an integer between 0 and 255 (both inclusive).
It's the integer from 0 to 255 that you need to construct RGB values like rgb(72,25,183).
It seems a random color is desired - one with each component random between 0 and 255.
Math.random() returns a random number on [0,1) (ie it may be exactly zero or up to but not including one).
Multiplying that random value by 256 gives a random number on the range [0,256) (ie it may be 255.99, but never 256). Almost there, but not quite.
Math.floor() rounds the number downwards to the nearest whole integer, making the result an integer on [0,255] as desired.
Math.floor will give a whole number and gets rid of the decimals.
Math.random returns a number between 0 and 1 and therefore will produce decimal numbers when multiplied with 256. Thats why you want to use floor to get rid of the decimals otherwise the rgb values won't work.
The Math.floor() is to drop the decimal portion of the Number. It is the opposite of Math.ceil().
You can also double the invert bitwise operator (~~) to achieve the same as Math.floor() (though of course the floor() method is much more readable to most).
~~(Math.random() * 256)
Math.random returns value between 0 and 1. You are multiplying it with 256 so it will return some float value between 0 and 256. math.floor will omit fraction value from it.
~~Number is only the Math.floor() for positive numbers. For negative numbers, it is the Math.ceil().
For positive numbers you can use:
Math.floor(x) == ~~(x)
Math.round(x) == ~~(x + 0.5)
Math.ceil(x) == ~~(x + 1)
For negative numbers you can use:
Math.ceil(x) == ~~(x)
Math.round(x) == ~~(x - 0.5)
Math.floor(x) == ~~(x - 1)
Related
What JavaScript formula can I use to truncate a number to the nearest 50.
Example. I wanted 498 > 450
I have tried
Math.round (498, 50 )
And
Math.ceil(498, 50)
But am not getting. Please help
This may be a mixup of terminology, mixing terms like "nearest" and "truncate", neither of which quite describes what the example demonstrates.
The example you give always rounds down, never up, to the nearest custom value (in this case 50). To do that you can just subtract the result of % 50. For example:
const val = 498;
console.log(val - val % 50);
Even make it a re-usable function:
const Nearest = (val, num) => val - val % num;
console.log(Nearest(498, 50));
Divide by 50, do the operation, multiply by 50.
console.log(Math.floor(498 / 50) * 50);
console.log(Math.ceil(498 / 50) * 50);
console.log(Math.round(498 / 50) * 50);
console.log(Math.trunc(498 / 50) * 50);
You divide your number by 50, take the ceiling of that number and then multiply it by 50.
Math.ceil(value / 50) * 50;
A quick sidenote: truncate has a whole other meaning for numbers in Javascript: Math.trunc on MDN
Edit:
If you want other rounding semantics than ceil you can of course use floor (always goes to lowest multiple of 50):
Math.floor(451 / 50) * 50; // => 450
You divide by the multiple and round and then multiply by the multiple. If you want the lower bound, you use floor instead of round. If you want the upper bound, you use ceil instead of round. Look at these examples:
let x = 498;
let y = Math.round(498/50)*50;
console.log(y);
y = Math.floor(498/50)*50;
console.log(y);
y = Math.ceil(498/50)*50;
console.log(y);
To do what you want, the Remainder operator is your best friend. This will give you whatever is left over after dividing the number by the nearest number.
If your goal is to always round down, the following function would work. Just take your original number, find the remainder, and remove the remainder:
function roundDownToNearest(num, nearest){
return num - (num % nearest);
}
console.log(roundDownToNearest(498, 50))
If you always want to round up, you round down, then add the nearest amount:
function roundUpToNearest(num, nearest){
return num - (num % nearest) + nearest;
}
console.log(roundUpToNearest(498, 50))
If you want to get to the closest of the two, you could do the following. Find your remainder, then see if it's greater or less than half of your nearest value. If it's greater, round up. If less, round down.
function roundToNearest(num, nearest){
if(num % nearest > nearest / 2){
return roundUpToNearest(num, nearest);
} else {
return roundDownToNearest(num, nearest);
}
}
console.log(roundToNearest(498, 50))
console.log(roundToNearest(458, 50))
I've rounding the number into 2 decimal places:
function round(num, decimals)
{
var factor = Math.pow(10, decimals);
return Math.round(num * factor) / factor;
} round(-5.255, 2);
-5.25
function round(num, decimals)
{
var factor = Math.pow(10, decimals);
return Math.round(num * factor) / factor;
} round(5.255, 2);
5.26
But I've observed that it is giving different result when it is positive or negative.
Why is this happening and How can this be corrected?
From the documentation:
If the fractional portion of number is 0.5 or greater, the argument is rounded to the next higher integer.
So when the fraction is exactly 0.5, it rounds up. For a negative number, this means it rounds closer to 0, for a positive number it rounds away from 0. So -0.5 rounds to 0, while 0.5 rounds to 1.
If you want symmetric rounding, you can get the number's absolute value, round that, then convert it back to the original sign:
function symmetricRound(num) {
return Math.sign(num) * Math.round(Math.abs(num));
}
Math.sign is an EcmaScript 6 addition. If you're on an older browser, use the polyfill from the documentation.
Why:
If i remembrer my maths courses (quite long ago...), 0,1,2,3&4 round to the nearest smaller value, 5,6,7,8,&9 round to the nearest greater value. 5.26 is greater than 5.255. So is -5.25 greater than -5.255.
How:
If you really need to have a behavior that is the same in absolute value, why not round the absolute value, then apply a "-1" factor if original value is <0?
Let's say I have the number 2062 and the multiplier is 0.75
What is the JavaScript formula to find which number that, when multiplied by 0.75, will come the closest to 2062?
PS: The closest here means either equal (==) or very close, but below the target number, and not very close but above.
You are looking for x in x * 0.75 = 2062. So solving for x that should be x = 2062 / 0.75. To ensure that the number is the closest whole number less than or equal to x, you can use Math.floor:
Math.floor(2062 / 0.75) = 2749
function findFactor(a, b) {
return Math.floor(a / parseFloat(b));
}
findFactor(2062, 0.75) -> 2749
https://jsfiddle.net/0s8cr5gd/
I found on stackoverflow this color generator :
Math.random()*0xFFFFFF<<0
It works fine. The only problem is that I'd like to generate random colors, but only of different shades of grey.
I have no idea how I could achieve something like this.
var value = Math.random() * 0xFF | 0;
var grayscale = (value << 16) | (value << 8) | value;
var color = '#' + grayscale.toString(16);
color will be a random grayscale hex color value, appropriate for using in eg element.style properties.
Note: there are several ways to coerce the random floating-point number to an integer. Bitwise OR (x | 0) will usually be the fastest, as far as I know; the floor function (Math.floor(x)) is approximately the same speed, but only truncates for positive numbers (you'd have to use Math.ceil(x) for negative numbers). Bitwise operators won't work as expected for numbers that require more than 32 bits to represent, but Math.random() * 0xFF will always be in the range [0,255).
If you want to use RGB, rgb grays can be created by supplying the same number in all three arguments i.e. rgb(255,255,255) (the number must be between 0 and 255).
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
var randomNumberString = String(getRandomInt(0,255));
var color = "rgb(" + randomNumberString + "," + randomNumberString + "," + randomNumberString + ")";
perc = 15/30;
//result=Math.round(perc*100)/100 //returns 28.45
$('#counter').text(perc);
$('#total').text(count);
returns back 0.5% which is suppose to be 50.00%... how do I fix this? :S
You do realize that word percent quite literally translates into "per cent" or "per 100" since cent is the latin root that's used everywhere meaning "100" or "one-hundredth".
Century (100 years)
US Cent (100th of a dollar)
Centurion (Those who commanded 100 soldiers)
Centipede (creature with 100 legs)
So 50% becomes 50 per cent becomes 50 per 100
And, since in mathematical terms, the word per means divide (miles per hour == mph == m/h) then we can distill 50% down to:
50/100
Which, surprisingly enough, is represented as the decimal number .5
15/30 = 0.5
if you want to have percent number you have to multiply it by 100.
I am a low rep user so here goes. http://en.wikipedia.org/wiki/Percentage
Treat the % sign as a constant equal to 0.01. Thus, when working with a number like 50%, treat it as 50 * 0.01 or 0.5.
0.5 = n % // I want to know what 0.5 is as a percent
0.5 / % = n * % / % // Divide both sides by the constant
0.5 / % = n // Remove the excess
0.5 / 0.01 = n // Replace the constant
50 = n // You have your answer
Just multiply by 100.