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,f,1000,c=-0.2,d=0.2,sf=150,shade=true);

}

​

function draw() {

​

}

function f(x){

  return exp(-x*x);

}

​

function plot(a,b,f,n,c=0,d=0,sf=100,shade=false){

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

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

  }

  stroke(0,0,255,10);

  if(shade){

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

      line(sf*(c+((d-c)*(i-1))/n),0,sf*(c+((d-c)*(i-1))/n),-sf*f(c+(d-c)/2));

    }

  }

  let p=createP();

    let p1=createP();

    let p2=createP();

      let p3=createP();

   p.position(sf*c+width/2+sf*(d-c)/2,height/2-5);

     p1.position(sf*c+width/2-10,height/2-5);

     p2.position(sf*d+width/2-10,height/2-5);

     p3.position(sf*c+width/2+sf*(d-c)/2,height/2-sf*f(c+(d-c)/2)-20);

  // p.style('color','brown');

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

    p1.style('font-size','8px');

    p2.style('font-size','8px');

      p3.style('font-size','8px');

    katex.render("x_0",p.elt);

    katex.render("x_0-\\frac{\\varepsilon}{2}",p1.elt);

    katex.render("x_0+\\frac{\\varepsilon}{2}",p2.elt);

      katex.render("(x_0,f_X(x_0))",p3.elt);

    stroke('black');

    strokeWeight(3);

    point(sf*c,0)

   point(sf*d,0)

  point(sf*(c+(d-c)/2),0)

  point(sf*(c+(d-c)/2),-sf*f(sf*(c+(d-c)/2)))

​

}