createCanvas(600, 400);

  translate(width/2,height/2);

  background(255,255,255);

  line(-width/2,0,width/2,0);

 // line(0,-height/2,0,height/2);

  plot(-1.5,1.5,f,1000);

}

​

function draw() {

​

}

function f(x){

  return -exp(-x*x);

}

​

function plot(a,b,f,n){

  for(let i=1;i<=n;i++){

    line(100*(a+((b-a)*(i-1))/n),100*f(a+((b-a)*(i-1))/n),100*(a+((b-a)*i)/n),100*f(a+((b-a)*i)/n));

  }

  stroke(0,0,255,50);

  for(let i=0;i<=n;i++){

    if(100*(a+((b-a)*(i-1))/n) <=-45){

      stroke(0,0,255,50);

    }

    else if(100*(a+((b-a)*(i-1))/n) <=0){

            stroke(100,50,220,50);

    }

    else if(100*(a+((b-a)*(i-1))/n) <=45){

            stroke(150,100,200,50);

    }

    else{

      stroke(100,150,180,50);

    }

    line(100*(a+((b-a)*(i-1))/n),0,100*(a+((b-a)*(i-1))/n),100*f(a+((b-a)*(i-1))/n));

  }

  let p=createP();

  p.position(width/2+100,140);

  p.style('font-size','10px');

  katex.render("f_X(x)",p.elt);

  let q1=createP();

  q1.position(width/2,192);

  q1.style('font-size','10px');

  katex.render("Q_{\\frac{1}{2}}",q1.elt);

  stroke('black');

  strokeWeight(3);

  point(0,0);

  let q2=createP();

  q2.position(width/2-55,192);

  q2.style('font-size','10px');

  katex.render("Q_{\\frac{1}{4}}",q2.elt);

  stroke('black');

  strokeWeight(3);

  point(-45,0);

  let q3=createP();

  q3.position(width/2+45,192);

  q3.style('font-size','10px');

  katex.render("Q_{\\frac{3}{4}}",q3.elt);

  stroke('black');

  strokeWeight(3);

  point(45,0);

  let pp1=createP();

  pp1.position(width/2-80,150);

  pp1.style('font-size','10px');

  katex.render("\\frac{1}{4}",pp1.elt);

    let pp2=createP();

  pp2.position(width/2-30,150);

  pp2.style('font-size','10px');

  katex.render("\\frac{1}{4}",pp2.elt);

    let pp3=createP();

  pp3.position(width/2+20,150);

  pp3.style('font-size','10px');

  katex.render("\\frac{1}{4}",pp3.elt);

    let pp4=createP();

  pp4.position(width/2+60,150);

  pp4.style('font-size','10px');

  katex.render("\\frac{1}{4}",pp4.elt);

}