// const dt = 0.01;

let tindx = 0;

​

const c = 120, a = 50;

const dr = 0.5;

let u = [], v = [];

​

let tcs = [];

const maxtcslen = 180;

const maxtcsize = 2;

​

let rotx;

​

var tracer;

let xp, yp, zp;

​

let values;

​

function preload() {

  values = loadTable('pendata.csv', 'csv');

}

​

function setup() {

  createCanvas(500, 500, WEBGL);

  rotx = createSlider(0, PI, PI/4, PI/16);

  tracer = createGraphics(width, height, WEBGL);

  for (let r = 0; r < values.getRowCount(); r++) {

    t[r] = values.get(r, 0);

    u[r] = values.get(r, 1);

    v[r] = values.get(r, 2);

  }

  let time = t[0];

  let th1 = u[0];

  let th2 = v[0];

  xp = (c + a * cos(th2)) * sin(th1);

  yp = (c + a * cos(th2)) * cos(th1);

  zp = a * sin(th2);

  background(150);

}

​

function draw() {

  background(140);

​

  rotateX(rotx.value());

  noStroke();

  ambientLight(90, 90, 0);

  directionalLight(50, 50, 0, 0, height/2, 0);

  let time = t[tindx];

  let th1 = u[tindx];

  let th2 = v[tindx];

  tindx++;

  // rotateX(time);

  let x = (c + dr + (a + dr) * cos(th2)) * sin(th1);

  let y = (c + dr + (a + dr) * cos(th2)) * cos(th1);

  let z = (a + dr) * sin(th2);

  if(frameCount == 1) {

    beginShape();

  }

  else if(frameCount == 500) {

    endShape();

  }

  strokeWeight(3);

  stroke(50, 50);

  // tracer.point(x2, y2);

  noFill();

  vertex(x, y, z);

  translate(x, y, z);

  translate(-x, -y, -z);

  // image(tracer, -width/2, -height/2, 0);

  xp = x;

  yp = y;

  zp = z;

  // t += dt;

}