DirectrixFocus

 
var cnt =-200;//x-value and counter for each parabola
var t=0,k = 0, p = 1,h = 0;//initial values for h,k,p, and reset counter t
function setup() {
  createCanvas(400, 400);
  background(255);
  strokeWeight(0.1);//thin lines
  fill(255, 230, 0);//setting fill for circles to be transparent
}

function draw() {
  translate(width/2,width/2)
  stroke(100+cnt/8,100+cnt/10,100);//create a gradient color 
  x1 = cnt;
  y1 = -pow((x1-h),2)/(4*p)-k
  circle(cnt,y1,2)//draw a circle for a point on the parabola
  line(cnt,y1,h,-(k+p));//draw the line to the focus
  line(cnt,y1,cnt,-(k-p));//draw the line to the directrix
  circle(cnt,-y1,2);
  line(cnt,-y1,h,(k+p)); 
  line(cnt,-y1,cnt,(k-p));
  cnt=cnt+2.5;
  if (cnt>200){//draw the next parabola
    newHPK();// new h,p,k
  }
}
function newHPK(){
h = 0
  k = k - 20;//increment k
  p = p + 2;//increment p
  cnt = -200;//reset cnt
  t = t+1;
  if (t> 15){ 
    background(255);//reset canvas
    t=0,k = 0, p = 1,h = 0;//initialize variables
  }
}