blocks|key|1878382|text|比方说，当你使用Math.floor(Math.random()+*+(max+-+min+%2B+1))+%2B+min;时，你实际上是在创建一个均匀的分布。要获得图表中的数据分布，您需要的是具有非零偏度的分布。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1878383|有不同的技术可以获得这些类型的分布。这是在stackoverflow上找到的测试版的example。|1878384|1878385|以下是链接中总结的示例：|1878386|unif+=+Math.random()++//+The+original+uniform+distribution.|code-block|syntax|javascript|1878387|我们可以通过以下方式将其转换为beta发行版|1878388|beta+=+sin(unif*pi/2)%5E2+//+The+standard+beta+distribution|1878389|为了得到图表中显示的偏斜度，|1878390|beta_right+=+(beta+>+0.5)+?+2*beta-1+:+2*(1-beta)-1;|1878391|您可以将值1更改为任何其他值，以使其倾斜为其他值。|1878392|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16110758/generate-random-number-with-a-non-uniform-distribution^0|8|1E|0|16|7|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|H|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|1F|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1G|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1H|8|@]|D|@]|E|$]]|$1|R|3|S|5|M|7|1I|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|1J|8|@]|D|@]|E|$]]|$1|V|3|W|5|M|7|1K|8|@]|D|@]|E|$N|O]]|$1|X|3|Y|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

Say when you use <code>Math.floor(Math.random() * (max - min + 1)) + min;</code>, you are actually creating a Uniform distribution. To get the data distribution in your chart, what you need is a distribution with non-zero skewness.

There are different techniques to get those kinds of distributions. Here is an <a href="https://stackoverflow.com/questions/16110758/generate-random-number-with-a-non-uniform-distribution">example</a> of beta distribution found on stackoverflow.

<hr>

Here is the example summarized from the link:

<pre><code>unif = Math.random() // The original uniform distribution.
</code></pre>

And we can transfer it into beta distribution by doing 

<pre><code>beta = sin(unif*pi/2)^2 // The standard beta distribution
</code></pre>

To get the skewness shown in your chart,

<pre><code>beta_right = (beta &gt; 0.5) ? 2*beta-1 : 2*(1-beta)-1;
</code></pre>

You can change the value 1 to any else to have it skew to other value.

blocks|key|1878502|text|为了好玩，这里有一个依赖于Gaussian+function的版本，正如SpiderPig对您的问题的评论中所提到的那样。高斯函数应用于1到100之间的随机数，其中钟形的高度表示最终值与N的接近程度。我将度数D解释为最终值接近N的可能性有多大，因此D对应于钟形的宽度-+D越小，偏差越小。显然，这个例子可以进一步校准。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1878503|(我复制了Ken+Fyrstenberg的canvas方法来演示该功能。)|1878504|​|1878505|function+randBias(min,+max,+N,+D)+{
++var+a+=+1,
++++++b+=+50,
++++++c+=+D;

++var+influence+=+Math.floor(Math.random()+*+(101)),
++++x+=+Math.floor(Math.random()+*+(max+-+min+%2B+1))+%2B+min;

++return+x+>+N+
+++++++++?+x+%2B+Math.floor(gauss(influence)+*+(N+-+x))+
+++++++++:+x+-+Math.floor(gauss(influence)+*+(x+-+N));

++function+gauss(x)+{
++++return+a+*+Math.exp(-(x+-+b)+*+(x+-+b)+/+(2+*+c+*+c));
++}
}

var+ctx+=+document.querySelector("canvas").getContext("2d");
ctx.fillStyle+=+"red";
ctx.fillRect(399,+0,+2,+110);
ctx.fillStyle+=+"rgba(0,0,0,0.07)";

(function+loop()+{
++for+(var+i+=+0;+i+<+5;+i%2B%2B)+{
++++ctx.fillRect(randBias(0,+600,+400,+50),+4,+2,+50);
++++ctx.fillRect(randBias(0,+600,+400,+10),+55,+2,+50);
++++ctx.fillRect(Math.random()+*+600,+115,+2,+35);
++}
++requestAnimationFrame(loop);
})();|code-block|syntax|javascript|1878506|<canvas+width=600></canvas>|1878507|1878508|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Gaussian_function^0|2L|1|2W|1|35|1|3G|1|3R|1|D|H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

Just for fun, here's a version that relies on the <a href="http://en.wikipedia.org/wiki/Gaussian_function" rel="noreferrer">Gaussian function</a>, as mentioned in SpiderPig's comment to your question. The Gaussian function is applied to a random number between 1 and 100, where the height of the bell indicates how close the final value will be to <code>N</code>. I interpreted the degree <code>D</code> to mean how likely the final value is to be close to <code>N</code>, and so <code>D</code> corresponds to the width of the bell - the smaller <code>D</code> is, the less likely is the bias. Clearly, the example could be further calibrated.

(I copied Ken Fyrstenberg's canvas method to demonstrate the function.)

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function randBias(min, max, N, D) {
 var a = 1,
 b = 50,
 c = D;

 var influence = Math.floor(Math.random() * (101)),
 x = Math.floor(Math.random() * (max - min + 1)) + min;

 return x &gt; N 
 ? x + Math.floor(gauss(influence) * (N - x)) 
 : x - Math.floor(gauss(influence) * (x - N));

 function gauss(x) {
 return a * Math.exp(-(x - b) * (x - b) / (2 * c * c));
 }
}

var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(399, 0, 2, 110);
ctx.fillStyle = "rgba(0,0,0,0.07)";

(function loop() {
 for (var i = 0; i &lt; 5; i++) {
 ctx.fillRect(randBias(0, 600, 400, 50), 4, 2, 50);
 ctx.fillRect(randBias(0, 600, 400, 10), 55, 2, 50);
 ctx.fillRect(Math.random() * 600, 115, 2, 35);
 }
 requestAnimationFrame(loop);
})();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas width=600&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>

blocks|key|1878539|text|乐趣:使用图像作为密度函数。对随机像素进行采样，直到得到黑色像素，然后取x坐标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878540|​|1878541|📷|atomic|offset|length|1878542|1878543|代码：|1878544|getPixels+=+require("get-pixels");+//+npm+install+get-pixels

getPixels("distribution.png",+function(err,+pixels)+{
++var+height,+r,+s,+width,+x,+y;
++if+(err)+{
++++return;
++}
++width+=+pixels.shape[0];
++height+=+pixels.shape[1];
++while+(pixels.get(x,+y,+0)+!==+0)+{
++++r+=+Math.random();
++++s+=+Math.random();
++++x+=+Math.floor(r+*+width);
++++y+=+Math.floor(s+*+height);
++}
++return+console.log(r);
});|code-block|syntax|javascript|1878545|输出示例：|1878546|0.7892316638026386
0.8595335511490703
0.5459279934875667
0.9044852438382804
0.35129814594984055
0.5352215224411339
0.8271261665504426
0.4871773284394294
0.8202084102667868
0.39301465335302055|1878547|根据口味进行缩放。|1878548|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|//i.stack.imgur.com/pNmFm.png|imageAlt^0|0|0|0|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@$G|18|H|19|1|1A]]|A|$]]|$1|I|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1D|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

Fun: use the image as the density function. Sample random pixels until you get a black one, then take the x co-ordinate.

<img src="//i.stack.imgur.com/pNmFm.png" alt="enter image description here">

Code:

<pre><code>getPixels = require("get-pixels"); // npm install get-pixels

getPixels("distribution.png", function(err, pixels) {
 var height, r, s, width, x, y;
 if (err) {
 return;
 }
 width = pixels.shape[0];
 height = pixels.shape[1];
 while (pixels.get(x, y, 0) !== 0) {
 r = Math.random();
 s = Math.random();
 x = Math.floor(r * width);
 y = Math.floor(s * height);
 }
 return console.log(r);
});
</code></pre>

Example output:

<pre><code>0.7892316638026386
0.8595335511490703
0.5459279934875667
0.9044852438382804
0.35129814594984055
0.5352215224411339
0.8271261665504426
0.4871773284394294
0.8202084102667868
0.39301465335302055
</code></pre>

Scale to taste.

Say, if I wanted to generate an unbiased random number between <code>min</code> and <code>max</code>, I'd do:

<pre><code>var rand = function(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
};
</code></pre>

But what if I want to generate a random number between <code>min</code> and <code>max</code> but more biased towards a value <code>N</code> between <code>min</code> and <code>max</code> to a degree <code>D</code>? It's best to illustrate it with a probability curve:

<img src="//i.stack.imgur.com/P8k6N.png" alt="enter image description here">

How to generate random numbers biased towards one value in a range?

比方说，如果我想在min和max之间生成一个无偏的随机数，我会这样做：var rand = function(min, max) {    return Math.floor(Math.random() * (max - min + 1)) + min;};但是，如果我想在min和max之间生成一个随机数，但更偏向于m...

问如何生成偏向某一范围内某一值的随机数？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何生成偏向某一范围内某一值的随机数？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何生成偏向某一范围内某一值的随机数？
EN