-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
132 lines (122 loc) · 6.08 KB
/
index.html
File metadata and controls
132 lines (122 loc) · 6.08 KB
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Visuals Generator</title>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0633259514526906"
crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WL1KSYBBD5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WL1KSYBBD5');
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="spiralCanvas"></canvas>
<div id="controlsOverlay" class="controls-overlay">
<button id="toggleControls" class="toggle-controls">Hide Controls</button>
<h2>Visuals Generator</h2>
<div class="controls">
<div class="control-group">
<h3>Presets</h3>
<label>Load Preset:
<select id="presetSelector">
<option value="custom">Custom</option>
<option value="goldenSpiral">Golden Spiral</option>
<option value="denseMirror">Dense Mirror</option>
<option value="minimalist">Minimalist</option>
<option value="starBurst">Star Burst</option>
<option value="doubleHelix">Double Helix</option>
<option value="nebula">Nebula</option>
<option value="kaleidoscope">Kaleidoscope</option>
<option value="cosmicWave">Cosmic Wave</option>
<option value="fractalBloom">Fractal Bloom</option>
<option value="crystalVortex">Crystal Vortex</option>
<option value="galacticPulse">Galactic Pulse</option>
<option value="etherealRings">Ethereal Rings</option>
<option value="violetBloom">Violet Bloom</option>
<option value="twilightPetals">Twilight Petals</option>
<option value="solarFlareBlossom">Solar Flare Blossom</option>
<option value="midnightBloom">Midnight Bloom</option>
</select>
</label>
<div>
<button onclick="undo()">Undo</button>
<button onclick="reset()">Reset</button>
</div>
</div>
<div class="control-group">
<h3>Master Settings</h3>
<label>Auto-Rotate: <input type="checkbox" id="autoRotate"></label>
<label>Audio Reactive: <input type="checkbox" id="audioReactive"></label>
<div id="audioOptions" style="display: none; margin-left: 20px;">
<label><input type="checkbox" id="audioRotate"> Rotate</label>
<label><input type="checkbox" id="audioScale"> Scale</label>
<label><input type="checkbox" id="audioOpacity"> Opacity</label>
<label>Scale Gap: <input type="range" id="scaleGap" min="1" max="50" value="10"> <span id="scaleGapValue">10</span></label>
<label>Scale Sensitivity: <input type="range" id="scaleSensitivity" min="0.5" max="5" step="0.1" value="1"> <span id="scaleSensitivityValue">1</span></label>
</div>
</div>
<div class="control-group">
<h3>Core Parameters</h3>
<label>Scale: <input type="range" id="scale" min="1" max="100" step="0.1" value="30"> <span id="scaleValue">30</span></label>
<label>Nodes: <input type="range" id="nodes" min="5" max="50" value="12"> <span id="nodesValue">12</span></label>
<label>Rotation: <input type="range" id="rotation" min="0" max="360" value="0"> <span id="rotationValue">0</span></label>
</div>
<div class="control-group">
<h3>Layer Controls</h3>
<label>Layers: <input type="range" id="layers" min="1" max="100" value="3"> <span id="layersValue">3</span></label>
<label>Layer Ratio:
<input type="range" id="layerRatio" min="0.1" max="10" step="0.1" value="2">
<input type="number" id="layerRatioNumber" min="0.1" max="10" step="0.1" value="2" style="width: 60px;">
<span id="layerRatioValue">2</span>
</label>
<div>
<button onclick="setRatio(1.618)">Golden Ratio</button>
<button onclick="setRatio(2.414)">Silver Ratio</button>
</div>
</div>
<div class="control-group">
<h3>Mirror Effects</h3>
<label><input type="checkbox" id="verticalMirror"> Vertical Mirror</label>
<label><input type="checkbox" id="horizontalMirror"> Horizontal Mirror</label>
<div class="mirror-colors">
<label>Vertical Color: <input type="color" id="verticalColor" value="#FF00FF"></label>
<label>Horizontal Color: <input type="color" id="horizontalColor" value="#FFFF00"></label>
<label>Both Color: <input type="color" id="bothColor" value="#FFFFFF"></label>
</div>
</div>
<div class="control-group">
<h3>Style Options</h3>
<label>Color: <input type="color" id="strokeColor" value="#00FFFF"></label>
<label>Line Width: <input type="range" id="lineWidth" min="1" max="10" value="2"> <span id="lineWidthValue">2</span></label>
<label>Opacity: <input type="range" id="opacity" min="0" max="1" step="0.1" value="1"> <span id="opacityValue">1</span></label>
<label>Spiral Type:
<select id="spiralType">
<option value="linear">Linear</option>
<option value="logarithmic">Logarithmic</option>
</select>
</label>
<label>Background Color: <input type="color" id="backgroundColor" value="#111111"></label>
<label><input type="checkbox" id="gradientStroke" checked> Gradient Stroke</label>
<label><input type="checkbox" id="dashEffect"> Dashed Lines</label>
<label><input type="checkbox" id="curvedLines"> Curved Lines</label>
</div>
</div>
<div class="download-container">
<button onclick="downloadCanvas()">Download Image (2160×2160)</button>
<button id="fullscreenButton">Go Fullscreen</button>
</div>
</div>
<div id="fullscreenOverlay" class="fullscreen-overlay">
Press ESC to exit full screen
</div>
<script src="presets.js"></script>
<script src="script.js"></script>
</body>
</html>