createCanvas(800, 300);

  background(255,255,255);

  circle(width/2-200,height/2,200);

  fill(0,0,255,50);

  circle(width/2-200,height/2,100);

  strokeWeight(3);

  point(width/2-200,height/2);

  strokeWeight(1);

  line(width/2-200,height/2,width/2-200+50*cos(0),height/2+50*sin(0));

  let p=createP();

  let pp=createP();

  p.position(width/2-200+30*cos(0),height/2+30*sin(0)-10);

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

  pp.position(width/2-200+25*cos(PI/4)+1,height/2+25*sin(PI/4)-10);

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

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

  katex.render("(a,b)",pp.elt);

  strokeWeight(3);

  point(width/2-200+25*cos(PI/4),height/2+25*sin(PI/4));

  translate(600,150);

  strokeWeight(1);

  line(-150,0,150,0);

  line(0,120,0,-120);

  plot(-2,1.9,f,1000);

}

​

function draw() {

}

​

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

  stroke('green');

  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));

  }

  strokeWeight(2);

  stroke('black');

  point(0,-100);

  point(100,0);

  let p=createP();

  let pp=createP();

  p.position(600-30,150-100);

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

  pp.position(650,150);

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

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

  katex.render("x",pp.elt);

}

​

function f(x){

  if(x<0){

    return 0;

  }  

  else if(x>=0 && x<1){

    return x*x;

  }else{return 1}

}