3D Algorithm Visualization Tool

Interactive optimization algorithm demonstration on 3D surfaces

Interactive 3D Optimization

This visualization shows optimization algorithms navigating complex 3D surfaces in real-time. Watch how different algorithms explore the search space and converge to optimal solutions.

Loading 3D visualization...

Requires WebGL support

Embed This in Your Own Web Page

Want to add interactive 3D optimization visualization to your website? It's just a few lines of code!

Embed Interactive 3D Optimization

Copy and paste this code into your HTML page:

<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<!-- HumpDay optimization algorithms -->
<script src="https://microprediction.github.io/humpday/js/modules/base-optimizer.js"></script>
<script src="https://microprediction.github.io/humpday/js/modules/prima-algorithms.js"></script>
<script src="https://microprediction.github.io/humpday/js/modules/scipy-algorithms.js"></script>
<script src="https://microprediction.github.io/humpday/js/modules/evolutionary-algorithms.js"></script>
<script src="https://microprediction.github.io/humpday/js/modules/index.js"></script>
<script src="https://microprediction.github.io/humpday/js/algorithm-visualizer.js"></script>

<!-- Container for the 3D visualization -->
<div id="optimizationDemo" style="width: 100%; height: 500px; border: 1px solid #ddd;"></div>

<!-- Initialize the visualizer -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const visualizer = new AlgorithmVisualizer('optimizationDemo');
});
</script>

Features Included:

  • 22 optimization algorithms (PRIMA, SciPy, evolutionary, metaheuristic)
  • 12 test functions (Sphere, Rosenbrock, Ackley, Rastrigin, etc.)
  • Interactive 3D visualization with rotation, zoom, pan
  • Speed controls and real-time algorithm comparison
  • Educational step-by-step optimization path display
`; navigator.clipboard.writeText(embedCode).then(() => { const button = event.target; const originalText = button.textContent; button.textContent = 'Copied!'; button.style.background = '#27ae60'; setTimeout(() => { button.textContent = originalText; button.style.background = ''; }, 2000); }); } // Make copyEmbedCode globally available too window.copyEmbedCode = copyEmbedCode; // Close modal when clicking outside document.addEventListener('click', function(event) { const modal = document.getElementById('embedCodeModal'); if (event.target === modal) { hideEmbedCode(); } });