cylinder study

document.oncontextmenu=()=> false;

​

// create vectors for the two end points

let p1, p2;

​

function setup() {

  createCanvas(1600, 900, WEBGL);

  createEasyCam();

  p1 = createVector(0, 50, 0);

  p2 = createVector(100, 20, 100);

  rectMode(CENTER);

}

​

let masterY=0;

function draw() {

  background(0);

  rotateY(masterY);masterY+=0.005;

  stroke(0,50,50);

  box(200,200,200);

  // draw a line between the two points for reference

  stroke(255,0,0);

  line(p1.x,p1.y,p1.z, p2.x,p2.y,p2.z);

  // calculate the angle and distance between the two points

  let v = createVector(p2.x-p1.x, p2.y-p1.y, p2.z-p1.z);

  //let angle = p1.angleBetween(p2);

  let dist1 = p1.dist(p2);

  //Calculate the angle between the line and each axis

  let angleX = atan2(v.z, v.y); // angle with y-z plane

  let angleY = atan2(v.x, v.z); // angle with x-z plane

  let angleZ = atan2(v.y, v.x); // angle with x-y plane

  // draw a cylinder between the two points

  noStroke();

  stroke(0,0,127);

  fill(255,0,0);

​

  // translate to the midpoint of the line

  translate((p1.x+p2.x)/2, (p1.y+p2.y)/2, (p1.z+p2.z)/2);

  //rotate(PI/2);

​

  // rotate to align with the line

  //rotate(angle, p1.cross(p2));

  //rotate(head.heading() + PI/2.0);

  // Rotate according to the angles

  rotateZ(angleZ);

  rotateY(angleY);

  rotateX(angleX);

​

  noFill();

​

  box(5,dist1,5);   //cylinders are extruded along the y-axis

  // draw the cylinder with the same length as the distance

  //cylinder(15, dist1);

}