​

//possible improvements: 

//change coordinates (e.g. for right-hand orientation and custom scale)

//add arrows, tick marks, and labels to axes

//include zoom functionality and make it interactive

//include instructions for how to interact

//maybe add material, lighting

​

//PARAMETER VALUES

//Currently, for the paraboloid, u = r, v = theta in polar coordinates

​

const uStart = 0; //lower bound

const uEnd = 50; //upper bound

const uNum = 25; //number of subdivisions of parameter interval

const uStep = (uEnd - uStart) / uNum; //step size

​

const vStart = 0; //lower bound

const vEnd = 2 * Math.PI; //upper bound

const vNum = 25; //number of subdivisions of parameter interval

const vStep = (vEnd - vStart) / vNum; //step size

​

//SURFACE r(u, v) = (x(u, v), y(u, v), z(u, v))

function x(u, v) {

  return u * sin(v);

}

​

function y(u, v) {

  return -0.05 * sq(u);

}

​

function z(u, v) {

  return u * cos(v);

}

​

//QUAD VERTICES

//surface made up of many quads,

//with vertices r(u0, v0), r(u1, v0), r(u1, v1), and r(u0, v1)

let u0, v0, u1, v1;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  camera(162, -179, 220, 0, 0, 0, 0, 1, 0);

}

​

function draw() {

  background(229, 255, 234, 125);

  stroke(0);

  strokeWeight(2);

  //AXES

  beginShape(LINES);

  //positive x-axis

  vertex(0, 0, 0);

  vertex(150, 0, 0);

  //negative y-axis

  vertex(0, 0, 0);

  vertex(0, -150, 0);

  //positive z-axis

  vertex(0, 0, 0);

  vertex(0, 0, 150);

  endShape();

  //SURFACE

  stroke(217, 17, 217);

  fill(255, 213, 184);

  for (let i = 0; i < uNum; i++) {

    for (let j = 0; j < vNum; j++) {

      u0 = uStart + i * uStep;

      u1 = uStart + (i + 1) * uStep;

      v0 = vStart + j * vStep;

      v1 = vStart + (j + 1) * vStep;

​

      quad(

        x(u0, v0), y(u0, v0), z(u0, v0),

        x(u1, v0), y(u1, v0), z(u1, v0),

        x(u1, v1), y(u1, v1), z(u1, v1),

        x(u0, v1), y(u0, v1), z(u0, v1)

      );

    }

  }

}

​

function mouseDragged() {

  camera(mouseX - width / 2, mouseY - height / 2, 220, 0, 0, 0, 0, 1, 0);

}