DirectrixFocus_PaperTurn

 
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(0);
  strokeWeight(0.1);//thin lines
  fill(255, 230, 0);//setting fill for circles to be transparent
}

function draw() {
  translate(width/2,width/2)
  push()//pushes rotation until pop() appears
    rotate(t)//rotate canvas
    stroke(200+cnt/8,100+cnt/10,50);//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
    }
  pop()
}
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(0);//reset canvas
    t=0,k = 0, p = 1,h = 0;//initialize variables
  }
}