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

let selecting = false;

let v1;

let v2;

​

function setup() {

  createCanvas(200, 200, WEBGL);

  v1 = createVector(0,0);

  v2 = createVector(0,0);

  fill(255, 0, 0);

}

​

function draw() {

  background(255);

  translate(-width/2,-height/2);

  // during selection, show inputs

  if(mouseIsPressed){

    circle(v1.x, v1.y, 10);

    circle(v2.x, v2.y, 10);

    line(v1.x, v1.y, v2.x, v2.y);

  } else {

    // render cylinder

    let heading = createVector(v2.x-v1.x, v2.y-v1.y);

    let midpoint = p5.Vector.lerp(v1, v2, 0.5);

    push();

    translate(midpoint);

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

    cylinder(20, heading.mag());

    pop();

  }

}

​

// basic two-point line selection--press v1, drag v2, release v2.

function mousePressed() {

  v1.set(mouseX, mouseY);

}

function mouseDragged(){

  v2.set(mouseX, mouseY);

}

function mouseReleased() {

  v2.set(mouseX, mouseY);

}