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

//add arrows, tick marks, labels to axes

//make camera settings interactive

//add a TNB-frame

​

//possible variations:

//different curves

//build curve by piecing together cylinders, then

//add material & lighting 

//(e.g. to improve depth perception of a trefoil knot)

​

//PARAMETER VALUES

const tStart = 0; //lower bound on parameter interval

const tEnd = 7 * Math.PI; //upper bound on parameter interval

const tStep = 0.01; //parameter step size for particle

let t = tStart; //initialize parameter to start value

​

//CURVE

function x(t) {

  return 50 * sin(t);

}

​

function y(t) {

  return -25 * t / (2 * PI);

}

​

function z(t) {

  return 50 * cos(t);

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

}

​

function draw() {

  background(229, 255, 234, 125);

  camera(100, -100, 200, 0, 0, 0, 0, 1, 0);

  //AXES

  stroke(0);

  strokeWeight(2);

  beginShape(LINES);

  //positive x-axis

  vertex(0, 0, 0);

  vertex(100, 0, 0);

  //negative y-axis

  vertex(0, 0, 0);

  vertex(0, -100, 0);

  //positive z-axis

  vertex(0, 0, 0);

  vertex(0, 0, 100);

  endShape();

  //CURVE

  noFill();

  stroke(232, 51, 232);

  strokeWeight(2);

  beginShape();

  for(let i = tStart; i < tEnd; i += 10 * tStep) {

    vertex(x(i), y(i), z(i));

  }

  endShape();

  //PARTICLE

  stroke(32, 110, 245);

  strokeWeight(15);

  point(x(t), y(t), z(t));

  if (t < tEnd) {t += tStep;}

  else {t = tStart;}

}