mandelbrot/index.html at main · jfoy/mandelbrot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mandelbrot Set Visualization</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Mandelbrot Set Visualization</h1>
        <div class="controls-container">
            <div class="controls-panel">
                <div class="control-section">
                    <h3>Navigation</h3>
                    <div class="mode-switch control-group">
                        <div class="radio-option">
                            <input type="radio" name="interaction-mode" id="mode-pan" value="pan" checked>
                            <label for="mode-pan">Pan</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="interaction-mode" id="mode-select" value="select">
                            <label for="mode-select">Select Area</label>
                        </div>
                    </div>
                    <div class="button-group">
                        <button id="reset" class="control-button">Reset View</button>
                        <button id="fullscreen" class="control-button"><span>Fullscreen</span></button>
                    </div>
                </div>

                <div class="control-section">
                    <h3>Appearance</h3>
                    <div class="control-group slider-group">
                        <label for="iterations">Max Iterations:</label>
                        <div class="slider-with-value">
                            <input type="range" id="iterations" min="20" max="1000" value="100" step="10">
                            <span id="iterations-value">100</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="color-scheme">Color Scheme:</label>
                        <select id="color-scheme">
                            <option value="rainbow">Rainbow</option>
                            <option value="grayscale">Grayscale</option>
                            <option value="fire">Fire</option>
                        </select>
                    </div>
                </div>

                <div class="control-section instructions-section">
                    <p class="instructions-text">Mouse controls: Click and drag to pan or select area (based on mode), scroll to zoom in/out</p>
                </div>
            </div>

            <button id="show-math" class="math-button">Show Mathematical Explanation</button>
        </div>
        <div id="container">
            <canvas id="mandelbrot-canvas"></canvas>
            <div id="coordinates-tooltip" class="tooltip"></div>
        </div>


        <div class="math-explanation">
            <h2>The Mathematics of the Mandelbrot Set</h2>
            <p>
                The Mandelbrot set is one of the most famous fractals in mathematics. It's defined as the set of complex numbers
                <em>c</em> for which the function <em>f<sub>c</sub>(z) = z² + c</em> does not diverge when iterated from <em>z = 0</em>.
            </p>
            <p>
                Each point in this visualization represents a complex number <em>c = a + bi</em>, where:
                <ul>
                    <li>The horizontal position represents the real part (<em>a</em>)</li>
                    <li>The vertical position represents the imaginary part (<em>b</em>)</li>
                </ul>
            </p>
            <p>
                Starting with <em>z₀ = 0</em>, we compute the sequence:
                <br>
                <em>z₁ = z₀² + c</em>
                <br>
                <em>z₂ = z₁² + c</em>
                <br>
                <em>z₃ = z₂² + c</em>
                <br>
                ...
            </p>
            <p>
                If this sequence remains bounded (|z<sub>n</sub>| ≤ 2 for all n), then <em>c</em> is in the Mandelbrot set (colored black).
                Otherwise, the point is colored based on how quickly the sequence escapes the boundary.
            </p>
            <p>
                Key regions to explore:
                <ul>
                    <li><strong>Main Cardioid:</strong> The heart-shaped region in the center</li>
                    <li><strong>Period Bulbs:</strong> The circular regions attached to the main cardioid</li>
                    <li><strong>Seahorse Valley:</strong> Around coordinates (-0.75, 0.1)</li>
                    <li><strong>Elephant Valley:</strong> Around coordinates (0.3, 0)</li>
                    <li><strong>Mini Mandelbrots:</strong> Smaller copies of the entire set found throughout the fractal</li>
                </ul>
            </p>
            <button id="toggle-math">Hide Mathematical Explanation</button>
        </div>
    </div>
    <script src="dist/main.js"></script>
</body>
</html>