cylinder study2

/*

Generate JavaScript code for p5.js sketch: canvas is 600x600. 

A black stroked nofill box of dimension 200 is slowly rotating on

the y-axis at the center of the scene. A red line connects points 

(100,50,90) and (-100,-80,-100). Another box of dimension (6,305,6)

is blue stroked nofill and is drawn exactly where the line is drawn.

The blue box needs to align in all 3D rotations to the line. 

Also generate the Matrix4() class definition.

​

Added EasyCam for viewing and OPC sliders to move points.

Simplified Matrix4 init. Expand canvas. Adjust colors.

Corrected translation and then convert box to cylinder.

*/

​

document.oncontextmenu=()=> false;

OPC.slider('x1', 100, -110,110, 1); 

OPC.slider('y1', 50, -110,110, 1); 

OPC.slider('z1', 90, -110,110, 1); 

OPC.slider('x2', -100, -110,110, 1); 

OPC.slider('y2', -80, -110,110, 1); 

OPC.slider('z2', -100, -110,110, 1); 

​

let lineStart, lineEnd;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  createEasyCam();

}

​

class Matrix4 {

  constructor() {

    this.elements = new Float32Array(16);

    this.elements[0] = 1;

    this.elements[5] = 1;

    this.elements[10] = 1;

    this.elements[15] = 1;

  }

​

  rotate(angle, x,y,z) {

    let radians = angle * PI / 180;

    let c = cos(radians);

    let s = sin(radians);

    let len = sqrt(x * x + y * y + z * z);

    if (len === 0) {

      return;

    }

    x /= len;

    y /= len;

    z /= len;

    let t = 1 - c;

    let a00 = this.elements[0], a01 = this.elements[1], a02 = this.elements[2], a03 = this.elements[3],

        a10 = this.elements[4], a11 = this.elements[5], a12 = this.elements[6], a13 = this.elements[7],

        a20 = this.elements[8], a21 = this.elements[9], a22 = this.elements[10], a23 = this.elements[11];

    let b00 = x * x * t + c, b01 = x * y * t - z * s, b02 = x * z * t + y * s,

        b10 = y * x * t + z * s, b11 = y * y * t + c, b12 = y * z * t - x * s,

        b20 = z * x * t - y * s, b21 = z * y * t + x * s, b22 = z * z * t + c;

    this.elements[0] = a00 * b00 + a10 * b01 + a20 * b02;

    this.elements[1] = a01 * b00 + a11 * b01 + a21 * b02;

    this.elements[2] = a02 * b00 + a12 * b01 + a22 * b02;

    this.elements[3] = a03 * b00 + a13 * b01 + a23 * b02;

    this.elements[4] = a00 * b10 + a10 * b11 + a20 * b12;

    this.elements[5] = a01 * b10 + a11 * b11 + a21 * b12;

    this.elements[6] = a02 * b10 + a12 * b11 + a22 * b12;

    this.elements[7] = a03 * b10 + a13 * b11 + a23 * b12;

    this.elements[8] = a00 * b20 + a10 * b21 + a20 * b22;

    this.elements[9] = a01 * b20 + a11 * b21 + a21 * b22;

    this.elements[10] = a02 * b20 + a12 * b21 + a22 * b22;

    this.elements[11] = a03 * b20 + a13 * b21 + a23 * b22;

  }

}

​

​

​

function draw() {

  background(0);

  // Rotate the coordinate system on the y-axis

  let y = frameCount * 0.5/180;

  //rotateY(y);

  lineEnd = createVector(x1,y1,z1);

  lineStart = createVector(x2,y2,z2);

  // Compute the rotation matrix to align the blue box with the line

  let lineDir = p5.Vector.sub(lineEnd, lineStart);

  let axis = createVector(0, 1, 0).cross(lineDir);

  let angle = -acos(createVector(0, 1, 0).dot(lineDir) / lineDir.mag()) * 180 / PI;

  let rotationMatrix = new Matrix4();

  rotationMatrix.rotate(angle, axis.x, axis.y, axis.z);

  // Draw the reference box

  push();

  noFill();

  stroke(0,100,100);

  box(200);

  pop();

  // Draw the red line

  stroke(255,0,0);

  line(lineStart.x,lineStart.y,lineStart.z,  lineEnd.x,lineEnd.y,lineEnd.z);

  // Draw the blue box aligned with the line

  stroke(0,127,255);

  noFill();

  push();

  resetMatrix();

  strokeWeight(0.1);

  translate((lineEnd.x+lineStart.x)/2,(lineEnd.y+lineStart.y)/2,(lineEnd.z+lineStart.z)/2);

  applyMatrix(rotationMatrix.elements);

  cylinder(6, lineDir.mag()); //box(6,lineDir.mag(),6);

  pop();

}

​