jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<h2>Step 1: convert vectors to view-from-above</h2>
<table>
  <tr>
    <td>new x vector</td>
    <td id="newxv"></td>
  </tr>
  <tr>
    <td>new y vector</td>
    <td id="newyv"></td>
  </tr>
  <tr>
    <td>new z vector</td>
    <td id="newzv"></td>
  </tr>
</table>

<h2>Step 2: map points to view-from-above plane</h2>
<table>
<thead>
  <tr>
    <td>point</td>
    <td>(x, y}</td>
  </tr>
</thead>
  <tr>
    <td>center point</td>
    <td id="center">(0, 0)</td>
  </tr>
  <tr>
    <td>x vector projection</td>
    <td id="xproj"></td>
  </tr>
  <tr>
    <td>y vector projection</td>
    <td id="yproj"></td>
  </tr>
  <tr>
    <td>z vector projection</td>
    <td id="zproj"></td>
  </tr>  
</table>

<h2>Step 3: angles and lengths of final drawing</h2>
<table>
<thead>
  <tr>
    <td>vector</td>
    <td>angle (from horizontal)</td>
    <td>length</td>
    <td>normalized length</td>
  </tr>
</thead>
  <tbody>
    <tr>
      <td>x</td>
      <td id="xangle"></td>
      <td id="xlength"></td>
      <td id="nxlength"></td>
    </tr>
    <tr>
      <td>y</td>
      <td id="yangle"></td>
      <td id="ylength"></td>
      <td id="nylength"></td>
    </tr>
    <tr>
      <td>z</td>
      <td></td>
      <td id="zlength"></td>
      <td id="nzlength"></td>
    </tr>
  </tbody>
</table>

CSS

body {
  background: #20262E;
  color: white;
  padding: 20px;
  font-family: Helvetica;
}

h2 {
  opacity: 0.4;
}

table, th, td {
  border: solid 1px white;
  border-collapse: collapse;
}

JavaScript

// https://math.stackexchange.com/questions/100439/determine-where-a-vector-will-intersect-a-plane
// https://stackoverflow.com/questions/14607640/rotating-a-vector-in-3d-space

function findAngles(xDeg, zDeg) {
	const startingVectors = {
  	x: [1,0,0],
    y: [0,-1,0],
    z: [0,0,1]
  };
  
  // step 1
  // the first goal is to rotate those starting vectors by -zDeg, -xDeg
  const newVectors = {
        x: rotateVectorX(-xDeg, rotateVectorZ(-zDeg, startingVectors.x)),// rotateVectorZ(-zDeg,rotateVectorX(-xDeg, startingVectors.x)),
  	    y: rotateVectorX(-xDeg,rotateVectorZ(-zDeg, startingVectors.y))	,
  	    z: rotateVectorX(-xDeg,rotateVectorZ(-zDeg, startingVectors.z))
  };
  
  $('td#newxv').text(JSON.stringify(newVectors.x));
  $('td#newyv').text(JSON.stringify(newVectors.y));
  $('td#newzv').text(JSON.stringify(newVectors.z));
  
  // step 2: project new vectors onto downward-pointing plane
  // vector that defines downward pointing plane is [0,0,-1]
  // https://math.stackexchange.com/questions/100439/determine-where-a-vector-will-intersect-a-plane
  // turns out, the way to project upward toward a downward-pointing plane is to just ignore the z-component of the newVectors, and use the x and ys, with 0,0 as center
  
  $('td#xproj').text(`(${newVectors.x[0]}, ${newVectors.x[1]})`);
  $('td#yproj').text(`(${newVectors.y[0]}, ${newVectors.y[1]})`);
  $('td#zproj').text(`(${newVectors.z[0]}, ${newVectors.z[1]})`);
  
  // step 3: calculate the angles and length
  const xangle = Math.atan(newVectors.x[1] / newVectors.x[0]) * 180/ Math.PI
  $('#xangle').text(xangle + '°');
  const yangle = Math.atan(newVectors.y[1] / newVectors.y[0]) * 180/ Math.PI
  $('#yangle').text(yangle + '°');
  // z is always straight up so don't bother calculating this
  // if you wanted to, i guess you would put -90°
  
  // now lengths
  const xlength = (newVectors.x[0] ** 2 + newVectors.x[1] ** 2 ) ** 0.5;
  const ylength = (newVectors.y[0] ** 2 + newVectors.y[1] ** 2 ) ** 0.5;
 ...