☰

Bouncy Shaded Cube Final Release

Spawns multiple bouncy 3D objects with shape selection, corrected collision, and a settings UI.

// ==UserScript==
// @name         Bouncy Shaded Cube Final Release
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  Spawns multiple bouncy 3D objects with shape selection, corrected collision, and a settings UI.
// @author       alisteveman12
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @require      https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js
// @run-at       document-idle
// @icon       data:image/jpeg;base64,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
// ==/UserScript==

(function( ) {
    'use strict';

    // Check if THREE is loaded. If not, wait and check again.
    if (typeof window.THREE === 'undefined') {
        window.setTimeout(arguments.callee, 100);
        return;
    }

    // --- Configuration (Stored in GM_values) ---
    const DEFAULT_SETTINGS = {
        SHAPE: 'Cube', // New setting
        CUBE_SIZE: 50,
        SPEED: 2,
        BOUNCE_HEIGHT: 10,
        BOUNCE_SPEED: 0.05,
        MAX_CUBES: 10,
        COLLISION_ENABLED: true,
        CUBE_COLOR: 0x00ff00 // Default green color
    };

    let settings = {};

    // --- Global State Variables ---
    let cubeIsRunning = false;
    let animationFrameId = null;
    let canvas = null;
    let renderer = null;
    let scene = null;
    let camera = null;
    let cubes = [];
    let cubeButton = null;
    let spawnMoreButton = null;
    let deleteCubeButton = null;
    let settingsButton = null;
    let settingsPanel = null;

    let width = window.innerWidth;
    let height = window.innerHeight;

    // --- Cube Class (to manage multiple cubes) ---
    class BouncyCube {
        constructor(color) {
            let geometry;
            const size = settings.CUBE_SIZE;

            switch (settings.SHAPE) {
                case 'Sphere':
                    geometry = new THREE.SphereGeometry(size / 2, 32, 32);
                    break;
                case 'Tetrahedron':
                    geometry = new THREE.TetrahedronGeometry(size / 2);
                    break;
                case 'Custom':
                    // --- Placeholder for Custom Model Loading ---
                    console.warn("Custom Model selected, but not yet implemented. Defaulting to Cube.");
                    geometry = new THREE.BoxGeometry(size, size, size);
                    break;
                case 'Cube':
                default:
                    geometry = new THREE.BoxGeometry(size, size, size);
                    break;
            }

            this.geometry = geometry;
            const objectColor = color || Math.random() * 0xffffff;
            this.material = new THREE.MeshPhongMaterial({ color: objectColor, shininess: 30 });
            this.mesh = new THREE.Mesh(this.geometry, this.material);
            scene.add(this.mesh);

            // Initial random position and velocity
            this.cubeX = Math.random() * width;
            this.cubeY = Math.random() * height;
            this.velocityX = (Math.random() > 0.5 ? 1 : -1) * (settings.SPEED + Math.random() * 1);
            this.velocityY = (Math.random() > 0.5 ? 1 : -1) * (settings.SPEED + Math.random() * 1);
            this.timeOffset = Math.random() * 100;

            // Set initial world position
            const worldPos = screenToWorld(this.cubeX, this.cubeY);
            this.mesh.position.x = worldPos.x;
            this.mesh.position.y = worldPos.y;
        }

        update() {
            // 1. Update position based on screen coordinates
            this.cubeX += this.velocityX;
            this.cubeY += this.velocityY;
            this.timeOffset += settings.BOUNCE_SPEED;

            // 2. Collision detection (on screen edges)
            const halfSize = settings.CUBE_SIZE / 2;
            if (this.cubeX + halfSize > width || this.cubeX - halfSize < 0) {
                this.velocityX = -this.velocityX;
                this.cubeX = Math.max(halfSize, Math.min(width - halfSize, this.cubeX));
            }

            if (this.cubeY + halfSize > height || this.cubeY - halfSize < 0) {
                this.velocityY = -this.velocityY;
                this.cubeY = Math.max(halfSize, Math.min(height - halfSize, this.cubeY));
            }

            // 3. Convert screen position to world position for rendering
            const worldPos = screenToWorld(this.cubeX, this.cubeY);
            this.mesh.position.x = worldPos.x;
            this.mesh.position.y = worldPos.y;

            // 4. "Bounce" effect (up and down along the Z-axis)
            this.mesh.position.z = Math.sin(this.timeOffset) * settings.BOUNCE_HEIGHT;

            // 5. Rotation for visual interest
            this.mesh.rotation.x += 0.01;
            this.mesh.rotation.y += 0.01;
        }

        dispose() {
            scene.remove(this.mesh);
            this.geometry.dispose();
            this.material.dispose();
        }
    }

    // --- Utility Functions ---

    function loadSettings() {
        settings = GM_getValue('bouncyCubeSettings', DEFAULT_SETTINGS);
        // Ensure all default keys exist in case of new settings
        settings = { ...DEFAULT_SETTINGS, ...settings };
    }

    function saveSettings() {
        GM_setValue('bouncyCubeSettings', settings);
    }

    // Function to convert screen coordinates to Three.js world coordinates
    function screenToWorld(x, y) {
        const vector = new THREE.Vector3();
        vector.set(
            (x / width) * 2 - 1,
            -(y / height) * 2 + 1,
            0.5
        );
        vector.unproject(camera);
        const dir = vector.sub(camera.position).normalize();
        const distance = -camera.position.z / dir.z;
        const pos = camera.position.clone().add(dir.multiplyScalar(distance));
        return pos;
    }

    function onWindowResize() {
        if (!cubeIsRunning) return;

        width = window.innerWidth;
        height = window.innerHeight;

        // Update canvas size
        canvas.width = width;
        canvas.height = height;

        // Update camera aspect ratio
        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        // Update renderer size
        renderer.setSize(width, height);
    }

    function checkCollisions() {
        if (!settings.COLLISION_ENABLED) return;

        for (let i = 0; i < cubes.length; i++) {
            for (let j = i + 1; j < cubes.length; j++) {
                const cubeA = cubes[i];
                const cubeB = cubes[j];

                const dx = cubeA.cubeX - cubeB.cubeX;
                const dy = cubeA.cubeY - cubeB.cubeY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const minDistance = settings.CUBE_SIZE;

                if (distance < minDistance) {
                    // Collision detected
                    const angle = Math.atan2(dy, dx);
                    const sin = Math.sin(angle);
                    const cos = Math.cos(angle);

                    // Rotate velocities to the collision axis
                    const vA = { x: cubeA.velocityX, y: cubeA.velocityY };
                    const vB = { x: cubeB.velocityX, y: cubeB.velocityY };

                    const uA = {
                        x: vA.x * cos + vA.y * sin,
                        y: vA.y * cos - vA.x * sin
                    };
                    const uB = {
                        x: vB.x * cos + vB.y * sin,
                        y: vB.y * cos - vB.x * sin
                    };

                    // Swap x velocities (perfect elastic collision)
                    const vFinalA = { x: uB.x, y: uA.y };
                    const vFinalB = { x: uA.x, y: uB.y };

                    // Rotate back to original coordinate system
                    cubeA.velocityX = vFinalA.x * cos - vFinalA.y * sin;
                    cubeA.velocityY = vFinalA.y * cos + vFinalA.x * sin;

                    cubeB.velocityX = vFinalB.x * cos - vFinalB.y * sin;
                    cubeB.velocityY = vFinalB.y * cos + vFinalB.x * sin;

                    // Separation to prevent sticking (crucial fix)
                    const overlap = minDistance - distance;
                    const separationX = overlap * cos;
                    const separationY = overlap * sin;

                    // Move both cubes apart by half the overlap
                    cubeA.cubeX += separationX * 0.5;
                    cubeA.cubeY += separationY * 0.5;
                    cubeB.cubeX -= separationX * 0.5;
                    cubeB.cubeY -= separationY * 0.5;
                }
            }
        }
    }

    function animate() {
        animationFrameId = requestAnimationFrame(animate);

        // Update all cubes
        cubes.forEach(cube => cube.update());

        // Check for collisions
        checkCollisions();

        // Render the scene
        renderer.render(scene, camera);
    }

    function updateButtonVisibility() {
        const hasCubes = cubes.length > 0;

        if (spawnMoreButton) {
            spawnMoreButton.style.display = hasCubes ? 'block' : 'none';
            spawnMoreButton.textContent = `Spawn More (${cubes.length}/${settings.MAX_CUBES})`;
        }

        if (deleteCubeButton) {
            deleteCubeButton.style.display = hasCubes ? 'block' : 'none';
            deleteCubeButton.textContent = `Delete (${cubes.length})`;
        }

        if (settingsButton) {
            settingsButton.style.display = hasCubes ? 'block' : 'none';
            // Also hide the settings panel if the button is hidden
            if (!hasCubes && settingsPanel) {
                settingsPanel.style.display = 'none';
            }
        }

        // Update main toggle button text
        cubeButton.textContent = hasCubes ? 'Stop Objects' : 'Start Objects';
    }

    function spawnCube() {
        if (cubes.length >= settings.MAX_CUBES) {
            alert(`Maximum number of objects (${settings.MAX_CUBES}) reached!`);
            return;
        }
        cubes.push(new BouncyCube(settings.CUBE_COLOR));
        updateButtonVisibility();
    }

    function deleteCube() {
        if (cubes.length === 0) {
            return;
        }
        // Remove the last spawned cube
        const cubeToRemove = cubes.pop();
        cubeToRemove.dispose();

        updateButtonVisibility();

        // If all cubes are gone, stop the whole animation
        if (cubes.length === 0) {
            stopCube();
        }
    }

    // --- Main Control Functions ---

    function startCube() {
        if (cubeIsRunning) return;

        // 1. Setup Canvas
        canvas = document.createElement('canvas');
        canvas.id = 'bouncy-cube-canvas';
        canvas.style.cssText = 'position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999;';
        document.body.appendChild(canvas);

        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        // 2. Three.js Setup
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
        renderer.setSize(width, height);
        camera.position.z = 100;

        // 3. Lighting Setup
        const ambientLight = new THREE.AmbientLight(0x404040, 2);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        // 4. Spawn the initial cube
        cubes = [];
        spawnCube();

        // 5. Start Animation and Listeners
        window.addEventListener('resize', onWindowResize, false);
        animate();

        cubeIsRunning = true;
        updateButtonVisibility();
    }

    function stopCube() {
        if (!cubeIsRunning) return;

        // 1. Stop Animation
        cancelAnimationFrame(animationFrameId);

        // 2. Remove Canvas and Listeners
        if (canvas && canvas.parentNode) {
            canvas.parentNode.removeChild(canvas);
        }
        window.removeEventListener('resize', onWindowResize, false);

        // 3. Dispose of all cubes
        cubes.forEach(cube => cube.dispose());
        cubes = [];

        // 4. Cleanup Three.js objects
        renderer.dispose();
        scene = null;
        camera = null;
        renderer = null;
        canvas = null;

        cubeIsRunning = false;
        updateButtonVisibility();
    }

    function toggleCube() {
        if (cubeIsRunning) {
            stopCube();
        } else {
            startCube();
        }
    }

    function toggleSettingsPanel() {
        if (settingsPanel.style.display === 'block') {
            settingsPanel.style.display = 'none';
        } else {
            settingsPanel.style.display = 'block';
            populateSettingsPanel();
        }
    }

    function handleSettingChange(event) {
        const key = event.target.id.replace('setting-', '');
        let value;

        if (event.target.type === 'checkbox') {
            value = event.target.checked;
        } else if (event.target.type === 'color') {
            // Convert hex color string to number
            value = parseInt(event.target.value.substring(1), 16);
        } else if (event.target.tagName === 'SELECT') {
            value = event.target.value;
        } else {
            value = parseFloat(event.target.value);
            if (key === 'MAX_CUBES') {
                value = parseInt(event.target.value);
            }
        }

        settings[key] = value;
        saveSettings();

        // Special case: If a geometry-affecting setting changes, re-initialize cubes
        if (cubeIsRunning && (key === 'CUBE_SIZE' || key === 'CUBE_COLOR' || key === 'SHAPE')) {
            // Stop and restart to apply new geometry/material
            stopCube();
            startCube();
        }

        updateButtonVisibility();
    }

    function populateSettingsPanel() {
        const shapeOptions = [
            { value: 'Cube', text: 'Cube' },
            { value: 'Sphere', text: 'Sphere' },
            { value: 'Tetrahedron', text: 'Tetrahedron (Triangle)' },
            { value: 'Custom', text: 'Custom Model (Coming Soon)', disabled: true }
        ];

        let shapeSelectOptions = shapeOptions.map(opt =>
            `<option value="${opt.value}" ${settings.SHAPE === opt.value ? 'selected' : ''} ${opt.disabled ? 'disabled' : ''}>${opt.text}</option>`
        ).join('');

        settingsPanel.innerHTML = `
            <h3>Object Settings</h3>
            <div class="setting-group">
                <label for="setting-SHAPE">Shape:</label>
                <select id="setting-SHAPE">
                    ${shapeSelectOptions}
                </select>
            </div>
            <div class="setting-group">
                <label for="setting-CUBE_SIZE">Size:</label>
                <input type="range" id="setting-CUBE_SIZE" min="10" max="100" step="5" value="${settings.CUBE_SIZE}">
                <span>${settings.CUBE_SIZE}</span>
            </div>
            <div class="setting-group">
                <label for="setting-SPEED">Speed:</label>
                <input type="range" id="setting-SPEED" min="0.5" max="5" step="0.5" value="${settings.SPEED}">
                <span>${settings.SPEED}</span>
            </div>
            <div class="setting-group">
                <label for="setting-BOUNCE_HEIGHT">Bounce Height:</label>
                <input type="range" id="setting-BOUNCE_HEIGHT" min="0" max="50" step="5" value="${settings.BOUNCE_HEIGHT}">
                <span>${settings.BOUNCE_HEIGHT}</span>
            </div>
            <div class="setting-group">
                <label for="setting-BOUNCE_SPEED">Bounce Speed:</label>
                <input type="range" id="setting-BOUNCE_SPEED" min="0.01" max="0.2" step="0.01" value="${settings.BOUNCE_SPEED}">
                <span>${settings.BOUNCE_SPEED}</span>
            </div>
            <div class="setting-group">
                <label for="setting-MAX_CUBES">Max Objects:</label>
                <input type="number" id="setting-MAX_CUBES" min="1" max="50" value="${settings.MAX_CUBES}">
            </div>
            <div class="setting-group">
                <label for="setting-COLLISION_ENABLED">Collisions:</label>
                <input type="checkbox" id="setting-COLLISION_ENABLED" ${settings.COLLISION_ENABLED ? 'checked' : ''}>
            </div>
            <div class="setting-group">
                <label for="setting-CUBE_COLOR">Color:</label>
                <input type="color" id="setting-CUBE_COLOR" value="#${settings.CUBE_COLOR.toString(16).padStart(6, '0')}">
            </div>
            <button id="reset-settings">Reset to Default</button>
        `;

        // Add event listeners to all inputs
        settingsPanel.querySelectorAll('input, select').forEach(input => {
            input.addEventListener('input', handleSettingChange);
            // Update range span dynamically
            if (input.type === 'range') {
                input.addEventListener('input', (e) => {
                    e.target.nextElementSibling.textContent = e.target.value;
                });
            }
        });

        // Add event listener for reset button
        settingsPanel.querySelector('#reset-settings').addEventListener('click', () => {
            if (confirm('Are you sure you want to reset all settings to default?')) {
                settings = DEFAULT_SETTINGS;
                saveSettings();
                populateSettingsPanel(); // Re-populate with default values

                // Stop and restart to apply all defaults
                if (cubeIsRunning) {
                    stopCube();
                    startCube();
                }
            }
        });
    }

    // --- Menu Button and Panel Setup ---

    function createMenuButtons() {
        // Consolidated CSS for all buttons and the settings panel
        GM_addStyle("#bouncy-cube-toggle, #spawn-more-cubes, #delete-cube, #settings-button { position: fixed; padding: 10px 15px; background-color: #333; color: white; border: none; border-radius: 5px; cursor: pointer; z-index: 100000; font-family: sans-serif; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: background-color 0.3s; } #bouncy-cube-toggle:hover, #spawn-more-cubes:hover, #delete-cube:hover, #settings-button:hover { background-color: #555; } #bouncy-cube-toggle { bottom: 10px; right: 10px; } #spawn-more-cubes { bottom: 60px; right: 10px; } #delete-cube { bottom: 110px; right: 10px; background-color: #d9534f; } #delete-cube:hover { background-color: #c9302c; } #settings-button { bottom: 160px; right: 10px; background-color: #f0ad4e; } #settings-button:hover { background-color: #ec971f; } #bouncy-cube-settings-panel { position: fixed; bottom: 10px; right: 180px; width: 300px; background-color: #222; color: #fff; border: 1px solid #555; border-radius: 8px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 99999; display: none; font-family: sans-serif; } #bouncy-cube-settings-panel h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 10px; } #bouncy-cube-settings-panel .setting-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } #bouncy-cube-settings-panel input[type=\"range\"] { flex-grow: 1; margin: 0 10px; } #bouncy-cube-settings-panel input[type=\"number\"], #bouncy-cube-settings-panel input[type=\"color\"], #bouncy-cube-settings-panel select { width: 60px; color: #000; } #bouncy-cube-settings-panel button { width: 100%; margin-top: 10px; background-color: #5bc0de; color: white; } #bouncy-cube-settings-panel button:hover { background-color: #31b0d5; }");

        // 1. Start/Stop Cube Button (Bottom)
        cubeButton = document.createElement('button');
        cubeButton.id = 'bouncy-cube-toggle';
        cubeButton.textContent = 'Start Objects';
        cubeButton.addEventListener('click', toggleCube);
        document.body.appendChild(cubeButton);

        // 2. Spawn More Button (Middle-Bottom)
        spawnMoreButton = document.createElement('button');
        spawnMoreButton.id = 'spawn-more-cubes';
        spawnMoreButton.textContent = 'Spawn More';
        spawnMoreButton.style.display = 'none';
        spawnMoreButton.addEventListener('click', spawnCube);
        document.body.appendChild(spawnMoreButton);

        // 3. Delete Cube Button (Middle-Top)
        deleteCubeButton = document.createElement('button');
        deleteCubeButton.id = 'delete-cube';
        deleteCubeButton.textContent = 'Delete';
        deleteCubeButton.style.display = 'none';
        deleteCubeButton.addEventListener('click', deleteCube);
        document.body.appendChild(deleteCubeButton);

        // 4. Settings Button (Top)
        settingsButton = document.createElement('button');
        settingsButton.id = 'settings-button';
        settingsButton.textContent = 'Settings';
        settingsButton.style.display = 'none'; // Initially hidden
        settingsButton.addEventListener('click', toggleSettingsPanel);
        document.body.appendChild(settingsButton);

        // 5. Settings Panel
        settingsPanel = document.createElement('div');
        settingsPanel.id = 'bouncy-cube-settings-panel';
        document.body.appendChild(settingsPanel);
    }

    // --- Initialization ---
    loadSettings();
    createMenuButtons();

})();