print("from https://editor.p5js.org/kll/sketches/omvJ6Pfff ");

  print(" this https://editor.p5js.org/kll/sketches/MHyC8T2OS ");

  print("ref JAVA https://discourse.processing.org/t/pvector-rotate-use-for-3d/10958 ");

  print("test on https://editor.p5js.org/kll/sketches/BeuQw5dfM ");

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  info();

}

​

function draw() {

  background(200, 200, 0);

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  //drawingContext.setLineDash([5, 10]);

  stroke(200, 0, 0);

  line(0, 0, -50, 200, 200, 200); //__________ original

  stroke(0, 0, 200);

  dash_line(0, 0, -50, 200, 200, 200, 25, 15, 2.5, "BOX"); //"CYLINDER"); //"SPHERE"); //"LINE");

}

​

function dash_line(x1, y1, z1, x2, y2, z2, lon, loff, sw, typ) {

  let v1 = createVector(x1, y1, z1);

  let v2 = createVector(x2, y2, z2);

  let vd = p5.Vector.sub(v2, v1);

  let llong = vd.mag();

  let kn = int(llong / (lon + loff));

  let ltyp = 1;

  if (typ == null || typ == "LINE") ltyp = 1; //_____________ "LINE" default 

  if (typ == "SPHERE") ltyp = 2; //__________________________ "SPHERE"

  if (typ == "CYLINDER") ltyp = 3; //________________________ "CYLINDER"

  if (typ == "BOX") ltyp = 4; //_____________________________ "BOX"

  push();

  strokeWeight(sw)

  translate(x1, y1, z1);

  let vdon = vd.copy().setMag(lon); //_______ make line

  let vdt = vd.copy().setMag(lon + loff); //_ translate to next line

  for (let k = 0; k < kn; k++) {

    if (ltyp == 1) line(0, 0, 0, vdon.x, vdon.y, vdon.z);

    if (ltyp == 2) sphere(sw);

    if (ltyp == 3) {

      // here need a push rotate cylinder pop

      cylinder(lon, sw / 2);

    }

    if (ltyp == 4) {

      // here need a push rotate cylinder pop

      box(lon, sw / 2, sw / 2); // w h d

    }

​

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

  }

  pop();

}