Hi there!

The 3D primitive cylinder function draws a cylinder from its midpoint. I am trying to write a function that will enable me to draw a cylinder between two specified points.

My approach so far has been to find the length and midpoint of the line that connects the two points. So I now have a cylinder at the correct position, and I need to rotate it so the ends meet the target start and end points. I’m not sure how to proceed. I’m guessing I need to find an angle for X rotation and an angle for Y rotation, but how do I go about this? Can someone point me in the right direction?

```
function setup() {
createCanvas(500, 500, WEBGL);
noStroke();
}
function draw() {
background(220);
//point 1 for reference
push();
fill(0,0,255);
translate(30,30,30);
sphere(3);
pop();
//point 2
push();
fill(255,0,0);
translate(60,60,60);
sphere(3);
pop();
//cylinder
drawCylinder(createVector(30,30,30), createVector(60,60,60));
}
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))
//marker
translate(c.x,c.y,c.z);
fill(0);
sphere(4);
//find rotation angles?
//draw the cylinder
fill(0,150,0);
cylinder(3,h);
pop();
}
```

Any pointers will be greatly appreciated, I’m out of my depth with the maths/ geometry here.