bowditchhyperbolicparaboloid

let n=12
let s=0.6
let a,b;
function setup(){
  createCanvas(windowWidth,windowHeight,WEBGL);
  angleMode(DEGREES);
    normalMaterial()
  a=random(n-5,n)
  b=random(n-5,n)
}

function draw(){
 
  background(0)
  orbitControl()
  t=frameCount 
  rotateY(t/5)
  rotateZ(t)
  scale(4,5,3)
  x=0;y=0;z=0;
  strokeWeight(5)
  stroke(100,0,0)
  for(let i=-n;i<=n;i=i+s){
    for(let j=-n;j<=n;j=j+s){
      stroke(i*200/n,j*200/n,200)
      x1=i
      y1=j
      z1=x*x-y*y
      if(dist(x,y,x1,y1)<5&&i!==-n){
        drawLine(x,y,z,x1,y1,z1)
      } 
      x=x1;
      y=y1;
      z=z1;
    }
  }
  x=0;y=0;z=0;
  for(let i=-n;i<=n;i=i+s){
    for(let j=-n;j<=n;j=j+s){
      stroke(j*200/n,i*200/n,200)
      x1=j
      y1=i
      z1=x*x-y*y
      if(dist(x,y,x1,y1)<5&&i!==-n){
        drawLine(x,y,z,x1,y1,z1)
      } 
      x=x1;
      y=y1;
      z=z1;
    }
  }
noStroke()
  for(let i=-n*4;i<n*4;i++){
    push()
    xs=a*sin( a* (t/3-i*3)-b)
    ys=b*cos(t/3 -i*3+a )
    zs=xs*xs-ys*ys;
    translate(xs,ys,zs)
    sphere(1,12,12)
    pop()

  }
  
}

function drawLine(x1, y1, z1, x2,y2, z2){
  beginShape();
  vertex(x1,y1,z1);
  vertex(x2,y2,z2);  
  endShape();
}

function axes(){
  strokeWeight(1)
  stroke(255)
  drawLine(0,0,500,0,0,-500)
  drawLine(500,0,0,-500,0,0)
  drawLine(0,500,0,0,-500,0)
}

function keyPressed(){
  a=random(n-2,n)
  b=random(n-2,n)
}