​

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(200, 80, 50);

​

  //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();

​

  //cylinder

  drawCylinder(point1, point2);

​

}

​

function draw() {}

​

function drawCylinder(startPoint, endPoint) {

  push();

  //height of cylinder is distance between startPoint and endPoint

  var h = sqrt((((startPoint.x - endPoint.x) ** 2) +

    ((startPoint.y - endPoint.y) ** 2) +

    ((startPoint.z - endPoint.z) ** 2)))

​

  //translate to midpoint

  var c = createVector(((startPoint.x + endPoint.x) / 2),

    ((startPoint.y + endPoint.y) / 2),

    ((startPoint.z + endPoint.z) / 2))

​

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

  // fill(0);

  // sphere(4);

​

  //first rotation

  p1 = c;

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

  p3 = endPoint;

​

  //distance 1

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

    (p2.y - p1.y) ** 2);

  //print(a);

  //distance 2

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

    (p3.y - p1.y) ** 2);

  //print(b);

  //distance 3

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

    (p3.y - p2.y) ** 2);

  //print(c);

​

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

​

  //second rotation

  p1 = c;

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

  p3 = endPoint;

​

  //distance 1

  var a = sqrt((p2.x - p1.x) ** 2 +

    (p2.y - p1.y) ** 2);

  //  print(a);

  //distance 2

  var b = sqrt((p3.x - p1.x) ** 2 +

    (p3.y - p1.y) ** 2);

  //  print(b);

  //distance 3

  var c = sqrt((p3.x - p2.x) ** 2 +

    (p3.y - p2.y) ** 2 +

    (p3.z - p2.z) ** 2);

  //  print(c);

​

  var xrot = acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));

  //    print(xrot);

​

  //draw

  rotateZ(-zrot);

  rotateX(xrot);

​

  fill(0, 150, 0);

  cylinder(2, h,5,1,false,false);

​

  pop();

}