ChatGPT Rubic Cube 4x4 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>4x4x4 Rubik's Cube with Custom 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">
    <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>
  
  <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>
    var scene, camera, renderer, controls;
    var rubiksGroup;
    var cubes = [];
    var rotating = false;
    var globalOffset; // computed based on total layers
    // For our cube, we use these constants:
    var cubeSize = 1, gap = 0.05;
    var total = 4; // 4 x 4 x 4

    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(8, 8, 8);
      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);
      
      //...