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>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Rubik's Cube with Algorithm Input</title>
</head>
<body>
  <div id="container"></div>
  <div id="controls" style="position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 10px; z-index: 10;">
    <input type="text" id="dataInput" style="width: 400px;" 
      value="alg=R' D' R D R' D' R D R' D' R D R' D' R D R' D' R D R' D' R D   |hover=1|speed=100|flags=showalg">
    <button id="runAlg">Run Algorithm</button>
    <div id="algDisplay" style="margin-top:10px;"></div>
  </div>
</body>
</html>

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Grid Rubik's Cube with Notation</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #controls {
      position: absolute; top: 10px; left: 10px;
      background: rgba(255,255,255,0.8); padding: 10px; z-index: 10;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="controls">
    <!-- Example algorithm:
         For a 4x4 cube, "R U r' Ff D d' Lr" rotates:
         • R: right outer layer,
         • U: up outer layer,
         • r': right inner layer counterclockwise,
         • Ff: both front outer and inner layers,
         • D: down outer,
         • d': down inner (prime),
         • Lr: left outer and left inner.
    -->
    <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>
  
  <!-- 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>
    // Change gridSize to any number: 3, 4, 7, etc.
    var gridSize = 18; // 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

    init();
    animate();

    function init() {
      // 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...