// https://discourse.processing.org/t/webgl-cylinder-between-two-points/13806/2

​

var point1;

var point2;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  background(220);

  noStroke();

  ambientLight(150);

  pointLight(250, 250, 250, 50, 50, 400);

​

  point1 = createVector(-100, 0, 30);

  point2 = createVector(0, 0, 50);

​

}

​

function draw_Points() {

  //point 1

  push();

  fill(0, 0, 255);

  translate(point1.x, point1.y, point1.z);

  sphere(5);

  pop();

​

  //point 2

  push();

  fill(255, 0, 0);

  translate(point2.x, point2.y, point2.z);

  sphere(5);

  pop();

​

}

​

function draw() {

  background(200, 200, 0);

  point1.set(mouseX - width / 2, mouseY - height / 2, 80);

  draw_Cylinder();

  draw_Points();

}

​

function draw_Cylinder() {

  push();

  //height of cylinder is distance between startPoint and endPoint

  var h = sqrt((((point1.x - point2.x) ** 2) +

    ((point1.y - point2.y) ** 2) +

    ((point1.z - point2.z) ** 2)))

​

  //translate to midpoint

  var c = createVector(((point1.x + point2.x) / 2),

    ((point1.y + point2.y) / 2),

    ((point1.z + point2.z) / 2))

​

  translate(c.x, c.y, c.z);

  fill(0);

  sphere(4);

​

  //first rotation

  var p1 = c;

  var p2 = createVector(c.x, c.y + (h * 0.5), c.z);

  var p3 = point2;

​

  //distance 1

  var d1 = sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);

  //distance 2

  var d2 = sqrt((p3.x - p1.x) ** 2 + (p3.y - p1.y) ** 2);

  //distance 3

  var d3 = sqrt((p3.x - p2.x) ** 2 + (p3.y - p2.y) ** 2);

  var ang1 = (d1 ** 2 + d2 ** 2 - d3 ** 2) / (2 * d1 * d2);

  var zrot = acos(ang1);

​

  //second rotation

  p1 = c;

  p2 = createVector(point2.x, point2.y, c.z);

  p3 = point2;

​

  //distance 1

  var da = sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);

  //distance 2

  var db = sqrt((p3.x - p1.x) ** 2 + (p3.y - p1.y) ** 2);

  //distance 3

  var dc = sqrt((p3.x - p2.x) ** 2 + (p3.y - p2.y) ** 2 + (p3.z - p2.z) ** 2);

  var ang2 = (da ** 2 + db ** 2 - dc ** 2) / (2 * da * db);

  var xrot = acos(ang2);

​

  print("p1 "+point1.x+","+point1.y+","+point1.z+" p2 "+point2.x+","+point2.y+","+point2.z+" da "+nf(da,0,1)+" db "+nf(db,0,1)+" dc "+nf(dc,0,1)+" ang1 "+nf(ang1,0,2)+" ang2 "+nf(ang2,0,2)+" xrot "+nf(xrot,0,1) );

​

  //draw

  rotateZ(-zrot);

  rotateX(xrot);

  fill(0, 150, 0);

  cylinder(3, h);

  pop();

}