CodeVinci - Snippets

CodeVinci Snippet - README.md

CodeVinci Snippets

The snippet below can be loaded into https://amoshydra.github.io/CodeVinci

threejs-procedural-player.tsx

// @from: https://gist.githubusercontent.com/amoshydra/beee25fce3fc0d17be4bc2b146a08660/raw/0dc4861cb0e0905db7b002acb8590b418ced34c1/Vector-quadrant-to-direction-map.tsx
document.body.insertAdjacentHTML("beforeend", `
  <div id="hand">
    <div id="origin"></div>
    <div id="marker"></div>
  </div>
  <div id="output"></div>
  <style>
    :root {
      color-scheme: dark;
      font-family: sans-serif;
      width: 100%;
      height: 100%;
      touch-action: none;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: ew-resize;
    }
    #hand {
      width: min(40vh, 40vw);
      transform-origin: 0% 0%;
      translate: 50% 0%;
      rotate: calc((-1 * var(--rotation, 0deg)) + 90deg);
      height: 2px;
      background-color: red;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #origin {
      content: "";
      background: green;
      width: 8px;
      height: 8px;
      display: block;
      position: relative;
      translate: -50% 0;
      border-radius: 99rem;
    }
    #marker {
      content: "";
      background: green;
      width: 24px;
      height: 24px;
      display: block;
      position: relative;
      translate: 25% 0%;
      border-radius: 99rem;
    }
    #output {
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.2);
    }
  </style>
`);

const hand = document.getElementById("hand");
const origin = document.getElementById("origin");
const marker = document.getElementById("marker");
const output = document.getElementById("output");

let rotation = 0;
let touched = false;

function updateOutput() {
  const directionMap = ["front", "left", "back", "right"];
  const directionIndex = ((rotation + 45) / 90 | 0) % 4;
  output.innerHTML = `
    <div>
      <div>${rotation.toFixed(2)}</div>
      <div>${directionIndex}</div>
      <div>${directionMap[directionIndex]}</div>
    </div>
  `;
}
updateOutput();


window.addEventListener("pointerdown", () => {
  touched = true;
});
window.addEventListener("pointerup", () => {
  touched = false;
});
window.addEventListener("pointermove", (e) => {
  if (!touched) return;
  rotation -= e.movementX / 4;
  rotation = (360 + rotation) % 360;
  hand.style.setProperty("--rotation", `${rotation}deg`);
  updateOutput();
});

Vector-quadrant-to-direction-map.tsx

document.body.insertAdjacentHTML("beforeend", `
  <div id="hand">
    <div id="origin"></div>
    <div id="marker"></div>
  </div>
  <div id="output"></div>
  <style>
    :root {
      color-scheme: dark;
      font-family: sans-serif;
      width: 100%;
      height: 100%;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: ew-resize;
    }
    #hand {
      width: min(40vh, 40vw);
      transform-origin: 0% 0%;
      translate: 50% 0%;
      rotate: calc((-1 * var(--rotation, 0deg)) + 90deg);
      height: 2px;
      background-color: red;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #origin {
      content: "";
      background: green;
      width: 8px;
      height: 8px;
      display: block;
      position: relative;
      translate: -50% 0;
      border-radius: 99rem;
    }
    #marker {
      content: "";
      background: green;
      width: 24px;
      height: 24px;
      display: block;
      position: relative;
      translate: 25% 0%;
      border-radius: 99rem;
    }
    #output {
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.2);
    }
  </style>
`);

const hand = document.getElementById("hand");
const origin = document.getElementById("origin");
const marker = document.getElementById("marker");
const output = document.getElementById("output");

let rotation = 0;
let touched = false;

function updateOutput() {
  const directionMap = ["front", "left", "back", "right"];
  const directionIndex = ((rotation + 45) / 90 | 0) % 4;
  output.innerHTML = `
    <div>
      <div>${rotation.toFixed(2)}</div>
      <div>${directionIndex}</div>
      <div>${directionMap[directionIndex]}</div>
    </div>
  `;
}
updateOutput();


window.addEventListener("pointerdown", () => {
  touched = true;
});
window.addEventListener("pointerup", () => {
  touched = false;
});
window.addEventListener("pointermove", (e) => {
  if (!touched) return;
  rotation -= e.movementX / 4;
  rotation = (360 + rotation) % 360;
  hand.style.setProperty("--rotation", `${rotation}deg`);
  updateOutput();
});