let vC, vR, mP;

let angl;

let reset;

let f;

​

let points = [];

let pComp = false;

​

function setup() {

  createCanvas(800, 500, WEBGL);

  frameRate(30);

  push();

  translate(0,0,0);

  f = 0.03;

  angl = PI/2;

  vC = createVector(0, 0);

  vR = createVector(0, 0);

  mp = createVector(0, 0, 0);

  pop();

}

​

function draw() {

  background(255);

  translate(vC.x, vC.y, 0);

  rotateY(frameCount * 0.0008);

  orbitControl();

​

  // orbitControl(1, 1, 0.1, vC.x, vC.y, 0);

​

  // Draw coordinates

  push();

    smooth();

    translate(vC.x, vC.y, 0);

    fill(255, 255, 255);

    vR.x = sin(angl) * r;

    vR.y = cos(angl) * r;

    text("O", 0, 0, 0);

    stroke('red');

    line(-width, 0, 0, width, 0, 0); // x

    stroke('blue');

    line(0, -height, 0, 0, height, 0); // y

    stroke('green');

    line(0, 0, -2000, 0, 0, 2000); // z

  pop();

  push();

    stroke('black');

    line(0, 0, 0, vR.x, vR.y, 0);

    circle(vR.x, vR.y, 3);

    mp.x = vR.x;

    mp.y = vR.y;

    mp.z += f*r;

    points.push([vR.x, mp.y, mp.z]);

  pop();

  // Draw the spiral

  push();

    stroke('gray');

    beginShape(POINTS);

    for(let i = 0; i < points.length; i+=1) {

      vertex(points[i][0], points[i][1], points[i][2]);

    }

    endShape();

  pop();

  // Draw the cosine

  push();

    stroke('blue');

    translate(2*r, 0, 0);

    rotateY(PI/2);

    beginShape(POINTS);

    for(let i = 0; i < points.length; i++) {

      vertex(-points[i][2], points[i][1]);

    }

    endShape();

  pop();

  // Draw the sine

  push();

    stroke('red');

    strokeWeight(1);

    translate(0, 2*r, 0);

    rotateX(HALF_PI);

    beginShape(POINTS);

    for(let i = 0; i < points.length; i++) {

      vertex(points[i][0], points[i][2]);

    }

    endShape();

  pop();

  push();

    line(vR.x, vR.y, 0, mp.x, mp.y, mp.z);

    line(mp.x, mp.y, mp.z, 2*r, mp.y, mp.z);

    line(mp.x, mp.y, mp.z, mp.x, 2*r, mp.z);

    fill('black');

    point(mp.x, mp.y, mp.z);

    noFill()

    circle(0, 0, 2*r);

  pop();

  // sine plane

  push();

    translate(2*r, 0, 0);

    rotateY(PI/2);

    //fill('lightgray');

    plane(r * 3 * TWO_PI, 2*r);

  pop();

  // cosine plane

  push();

    translate(0, 2*r, 0);

    rotateX(PI/2);

    //fill('lightgray');

    plane(2*r, r * 3 * TWO_PI);

  pop();

  angl+=f;

  if (angl>7*TWO_PI) {

    angl=PI/2;

    mp = createVector(0,0,0);

    points = [];

  }

}

​

function drawPoint(x, y, z) {

  push();

  translate(x, y, z);

  pop();

}