javascript - Making a simple Javascript version of a gaussian distribution

Question

I am trying to draw a series of rectangles (or lines) that follow the height of a gaussian curve. I will need to tweak the distribution manually, because I want to accomplish the very specific curve attached - where it goes up to a spike and back down - reference image here Or is there an easier equation to just start small, get large, then small again?

Based on the gaussian curve function I have tried this:

var a = 10;
var b = 10;
var x = 20;
var c = 10;

for (var j=0; j< 15; j++){
r.rect(100+j*12, 10, 6, 10*j*((a * Math.E) - (Math.pow(j-b),2))/(Math.pow(c,2)))
.fill(0)
}

if the r.rect looks weird, it's from the rune.js library.

Answer 1

你的数学不正确。这是你用标准数学符号写的：

我对 rune.js 不熟悉，但是，这是纯 JS 中高斯曲线的简单实现。

var a = 100;
var b = 25;
var c = 10;

var cv = document.getElementById('c');
var ctx = cv.getContext("2d");

for (var j=0; j< 150; j++){
    var y = a/Math.pow(Math.E, (Math.pow(j-b, 2))/(2*c*c));
    ctx.rect(j*10, cv.height-y, 10, y);
    ctx.stroke();
}

<canvas id='c' height='200' width='500'></canvas>