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

Your math is incorrect. Here is what you wrote in standard mathematical notation:

I'm not familiar with rune.js, however, here's a simple implementation of a Gaussian curve in pure 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(jb, 2))/(2*c*c)); ctx.rect(j*10, cv.height-y, 10, y); ctx.stroke(); } 

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