ChatGPT Rubic Cube n x n Algorithm Runner

2012-01-05 ~

by Umair Rafiq

HTML

<script src="https://cdn.jsdelivr.net/gh/paulmasson/threejs-with-controls@r121/build/three.min.js"></script>
<!DOCTYPE html>
  <div id="container"></div>
  <div id="controls">
    <div>
      <!-- Existing algorithm input -->
      <input type="text" id="dataInput" style="width: 400px;" 
        value="alg=R U r' Ff D d' Lr|speed=600|flags=showalg">
      <button id="runAlg">Run Algorithm</button>
      <div id="algDisplay" style="margin-top:10px;"></div>
    </div>
    <hr>
    <div id="videoContainer">
      <div>
        <button id="startWebcam">Start Webcam</button>
        <button id="captureFace">Capture Face</button>
      </div>
      <video id="webcam" autoplay playsinline style="display:none;"></video>
      <!-- Hidden canvas for processing -->
      <canvas id="captureCanvas" style="display:none;"></canvas>
    </div>
  </div>

CSS

body { margin: 0; overflow: hidden; }
    #controls {
      position: absolute; top: 10px; left: 10px;
      background: rgba(255,255,255,0.9); padding: 10px; z-index: 10;
      font-family: sans-serif;
    }
    #videoContainer {
      margin-top:10px;
    }

JavaScript

<!-- External resources -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/controls/OrbitControls.js"></script>
  <script>
    /***** Cube Setup & Move Code *****/
    // Change gridSize to any number: 3, 4, 7, etc.
    var gridSize = 4; // Example: 4x4x4 cube

    var scene, camera, renderer, controls;
    var rubiksGroup;
    var cubes = [];
    var rotating = false;
    var globalOffset; // computed based on gridSize
    var cubeSize = 1, gap = 0.05; // cube dimensions

    initCube();
    animate();

    function initCube() {
      // Set up scene and camera
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x202020);
      
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(gridSize * 2, gridSize * 2, gridSize * 2);
      camera.lookAt(0, 0, 0);
      
      // Create renderer and append to container
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById('container').appendChild(renderer.domElement);
      
      // Set up OrbitControls
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      
      // Create Rubik's Cube group
      rubiksGroup = new THREE.Group();
      scene.add(rubiksGroup);
      
      // Compute globalOffset so that the cube is centered.
      globalOffset = (gridSize - 1) * (cubeSize + gap) / 2;
      
      // Build the gridSize x gridSize x gridSize Rubik's Cube.
      for (var x = 0; x < gridSize; x++) {
        for (var y = 0; y < gridSize; y++) {
          for (var z = 0; z < gridSize; z++) {
            var geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            var materials = createCubeMaterials(x, y, z, gridSize);
            var...