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); //create the canvas

  background(0); //white background

  strokeWeight(0.1);//thin lines

  fill(255, 230, 0);//setting fill for circles to be transparent

}

​

function draw() {

  translate(width/2,width/2) //translate the canvas for (0,0)middle

  push()//pushes rotation until pop() appears

    rotate(t)//rotate canvas

    stroke(200+cnt/8,100+cnt/10,50);//create a gradient color 

    x1 = cnt; //set x

    y1 = -pow((x1-h),2)/(4*p)-k//Parabola y value

    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

    //make the parabola reflection or negative:

    circle(cnt,-y1,2);

    line(cnt,-y1,h,(k+p));

    line(cnt,-y1,cnt,(k-p));

    cnt=cnt+2.5; //increase counter for x

    if (cnt>200){//draw the next parabola

      newHPK();// new h,p,k

    }

  pop()

}

function newHPK(){

  h = 0//no horizontal incrementing

  k = k - 20;//increment k

  p = p + 2;//increment p

  cnt = -200;//reset cnt

  t = t+1; //increment screen reset counter

  if (t> 15){ 

    background(0);//reset canvas

    t=0,k = 0, p = 1,h = 0;//initialize variables

  }

}