const tau = 2 * Math.PI;

​

//PARAMETER VALUES

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

const tEnd = 4; //upper bound on parameter interval

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

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

​

//CURVE

const curveStep = 0.01; //step size for curve

const r = 200;

​

function x(t) {

  return r * sin(tau * t);

}

​

function y(t) {

  return -20 * t;

}

​

function z(t) {

  return r * cos(tau * t);

}

​

//CAMERA

​

/*

I put this together quickly. Just needed something that would gradually

change the camera position at first, and then speed it up.

*/

​

const stop = 2;

​

function speedUp(t) {

  return 40 * t ** 4;

}

​

function cx(t) {

  if (t < stop) {

    return speedUp(t);

  }

  else {

    return speedUp(stop);

  }

}

​

function cy(t) {

  if (t < stop) {

    return speedUp(t) - 1000;

  }

  else {

    return speedUp(stop) - 1000;

  }

}

​

function cz(t) {

  if (t < stop) {

    return speedUp(t);

  }

  else {

    return speedUp(stop);

  }

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  camera(0, -400, 0, 0, 0, 0, 0, 0, 1);

}

​

function draw() {

  background(229, 255, 234, 125);

  camera(cx(t), cy(t), cz(t), 0, 0, 0, 1, 0, 0);

  //CURVE

  noFill();

  stroke(0);

  strokeWeight(6);

​

  beginShape();

  for(let i = tStart; i < tEnd; i += curveStep) {

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

  }

  endShape();

  //PARTICLE

  stroke(32, 110, 245);

  strokeWeight(30);

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

  //INTEGERS

  stroke(217, 17, 217);

  for (let n = 0; n <= 4; n++) {

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

  }

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

  else {t = tStart;}

}