如何使用JavaScript以非随机方式生成范围内的数字?

时间:2015-07-23 09:23:27

标签: javascript math colors hsl

我知道如何在两个数字之间生成一个随机数。但我想要实现的是一种以非完全随机的方式在两个数字之间生成数字的方法。让我解释一下......

所以我有一个函数可以根据传入的数字生成颜色。如果该数字在0到600之间,我希望它将0到120之间的数字传递给hsl值的色调。如果数字大于600,我希望120到240之间的数字传递给hsl值的色调。我的功能看起来像这样:

getColor:function (number {
  var hue;
  var color;
  if (number <= 600) {
    hue = [A number between 0 and 120];
  } else if (number >= 600) {
    hue = [A number between 120 and 240];
  }
  color = 'hsl(' + hue + ', 100%, 80%)'
  return color;
 }

因此,传递给函数的数字越大,例如,在0到600之间,0到120之间的色调值越高。这有意义吗?

你好 - Gaweyne

2 个答案:

答案 0 :(得分:3)

简单数学:

hue = Math.floor(number * 120 / 600);

或两点:

function transpose(smin, smax, dmin, dmax) {
    var slen = smax - smin;
    var dlen = dmax - dmin;
    var ratio = dlen / slen;
    return function(num) {
      return num * ratio + smin;
    }
}

transpose(0, 600, 0, 120)(300); // 60

答案 1 :(得分:0)

首先,您应该知道number的最大值和最小值。在我的示例中,number的最大值为1200,最小值为0,因此范围介于0到1200之间。hue的范围介于0到240之间。

传递给函数的number越高,hue值就越高。

0 hue = 0 number;

120 hue = 600 number;

240 hue = 1200 number;

=&GT; 1 hue =(600/120)number =(1200/240)number

=&GT; 1 hue = 5 number

在我的示例中,(number介于0和1200之间,600为中间)hue中的1值等于number中的5值。所以:

hue = number / 5;

如果你想让hue成为一个整数,只需使用Math

hue = Math.floor(number / 5);

在我的示例中hue每增加5 number,就会增长1,number是否小于或大于600并不重要,因为number的范围{ 600的两边的{1}}是相同的(600在范围的中间)。如果这不是你想要的,600不在范围的中间,你将不得不两次进行相同的计算。

var max = [maximum value of number];
var min = [minimum value of number];

getColor:function (number {
   var hue;
   var color;
   if (number <= 600) {
      hue = Math.floor( number / ((600 - min) / 120) );
   } else if (number >= 600) {
      hue = Math.floor( number / ((max - 600) / 120) ) + 120;
   }
   color = 'hsl(' + hue + ', 100%, 80%)';
   return color;
}