Directional Logic

directional-logic.markdown

Directional Logic

A Pen by OIiver Mayor on CodePen.

License.

index.html

<h1>Directional Logic</h1>
<p>Results will display in this page, but open the console for more info.</p>
<hr />
<h2>Point revolution around the origin</h2>
<h3>For rotating directional offsets</h3>

<label>x:</label>
<input id="x" type="text" name="x" value="1" />
<br />
<label>y:</label>
<input id="y" type="text" name="y" value="0" /></input>
<br />
<button onClick="showLeftRotation()">Left</button>
<button onClick="showRightRotation()">Right</button>
<button onClick="showAftRotation()">Opposite</button>
<p><em>Note: Behavior will be weird for non-integer  input points.</em></p>
<h3>Results</h3>
<div id="log">
</div>
<hr />
<h2>Square in direction</h2>
<div>
  [todo]
</div>

lattice-rotations.markdown

lattice rotations

A Pen by OIiver Mayor on CodePen.

License.

script.js

function rotatePoint(x, y, theta) {
  // Rotates a point with integer coordinates
  // (x,y) around the origin by angle theta
  var destx = Math.round(x * Math.cos(theta) - y * Math.sin(theta));
  var desty = Math.round(x * Math.sin(theta) + y * Math.cos(theta));
  // multiply the vector [x, y] by matrix
  // | cos(theta) -sin(theta)
  // | sin(theta) cos(theta)
  return {
    x: destx,
    y: desty
  };
}

function rotateClockwise(x, y, turns = 0.25) {
  return rotatePoint(x, y, -Math.PI * 2 * turns);
}

function rotateCounterclockwise(x, y, turns = 0.25) {
  return rotatePoint(x, y, Math.PI * 2 * turns);
}

function rotateOpposite(x, y) {
  return rotateClockwise(x, y, 0.5);
}

function getDestination(x0, y0, dX, dY, turns, rotation) {
  var grad = rotation(dX, dY, turns);
  return {
    x: x0 + grad.X,
    y: y0 + grad.Y
  };
}

function getStarboard(x0, y0, dX, dY) {
  // returns the square starboard of the
  // current square given the direction (dX, dY)
  // starboard is the direction to the right
  // (clockwise) of the current direction
  return getDestination(x0, y0, dX, dY, 0.25, rotateCounterclockwise);
}

function getPort(x0, y0, dX, dY) {
  // returns the square port of the
  // current square given the direction (dX, dY)
  // port is the direction to the left
  // (counterclockwise) of the current direction
  return getDestination(x0, y0, dX, dY, 0.25, rotateClockwise);
}

function getAft(x0, y0, dX, dY) {
  // returns the square aft of the
  // current square given the direction (dX, dY)
  // aft is the direction behind
  return getDestination(x0, y0, dX, dY, 0.25);
}

// below is just for testing in Codepen
function showRotation(x0, y0, x, y, label) {
  var log = document.getElementById("log");

  var msg =
    "<p>Point (" +
    x0 +
    "," +
    y0 +
    ") " +
    label +
    " => " +
    "(" +
    x +
    "," +
    y +
    ")</p>";
  console.log(msg);
  log.innerHTML += msg;
}

function showRightRotation() {
  var xField = document.getElementById("x");
  var yField = document.getElementById("y");
  var x = xField.value;
  var y = yField.value;
  var destPoint = rotateClockwise(x, y);
  console.log(x, y, " ", destPoint.x, destPoint.y);
  showRotation(x, y, destPoint.x, destPoint.y, "rotated right (clockwise) ");
}

function showLeftRotation() {
  var xField = document.getElementById("x");
  var yField = document.getElementById("y");
  var x = xField.value;
  var y = yField.value;
  var destPoint = rotateCounterclockwise(x, y);
  console.log(x, y, " ", destPoint.x, destPoint.y);
  showRotation(
    x,
    y,
    destPoint.x,
    destPoint.y,
    "rotated left (counterclockwise) "
  );
}

function showAftRotation() {
  var xField = document.getElementById("x");
  var yField = document.getElementById("y");
  var x = xField.value;
  var y = yField.value;
  var destPoint = rotateCounterclockwise(x, y, 0.5);
  console.log(x, y, " ", destPoint.x, destPoint.y);
  showRotation(
    x,
    y,
    destPoint.x,
    destPoint.y,
    "rotated opposite (counterclockwise) "
  );
}

// todo: add testing section for functionality
// that returns squares

style.css

* {
  /* divine justice */
    font-family:
    "Chalkboard",
    "Comic Sans";
}

body {
  /* horrible misuse of solarized */
  background-color: #d33682;
  color: #2aa198;
  /* divine justice */
}

input {
  /* horrible misuse of solarized */
  background-color: #268bd2;
  color: #b58900;
  font-size: 16pt;
  padding-left: 1.0em;
}

button {
  /* horrible misuse of solarized */
  background-color: #b58900;
  color: #268bd2;
  /* divine justice */
  font-size: 12pt;
}