summaryrefslogtreecommitdiff
path: root/soundscape/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'soundscape/index.html')
-rw-r--r--soundscape/index.html275
1 files changed, 275 insertions, 0 deletions
diff --git a/soundscape/index.html b/soundscape/index.html
new file mode 100644
index 0000000..17da4e7
--- /dev/null
+++ b/soundscape/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Ambient Soundscape Generator | Vibes</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=VT323&family=Fredoka:wght@400;600&display=swap"
+ rel="stylesheet">
+ <style>
+ body {
+ font-family: 'Fredoka', sans-serif;
+ background-color: #d4f0f7;
+ color: #2a5674;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ text-align: center;
+ background-image:
+ linear-gradient(45deg, #d4f0f7 25%, transparent 25%),
+ linear-gradient(-45deg, #d4f0f7 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, #d4f0f7 75%),
+ linear-gradient(-45deg, transparent 75%, #d4f0f7 75%);
+ background-size: 20px 20px;
+ background-color: #e8f7fc;
+ }
+
+ .container {
+ max-width: 800px;
+ padding: 2rem;
+ margin: 2rem;
+ background-color: rgba(255, 255, 255, 0.85);
+ border-radius: 20px;
+ box-shadow: 0 10px 25px rgba(42, 86, 116, 0.2);
+ border: 5px solid #a5c8e8;
+ image-rendering: pixelated;
+ }
+
+ h1 {
+ font-family: 'VT323', monospace;
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, #6ec4ff, #737ff5);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-shadow: 3px 3px 0px rgba(110, 196, 255, 0.3);
+ letter-spacing: 2px;
+ }
+
+ p {
+ font-size: 1.2rem;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ color: #4a7295;
+ }
+
+ .controls {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .control-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ text-align: left;
+ }
+
+ label {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #2a5674;
+ }
+
+ select,
+ input[type="range"] {
+ padding: 0.5rem;
+ border-radius: 10px;
+ border: 3px solid #a5c8e8;
+ background-color: #f0f9ff;
+ font-family: 'Fredoka', sans-serif;
+ font-size: 1rem;
+ color: #2a5674;
+ transition: all 0.3s ease;
+ }
+
+ select:hover,
+ input[type="range"]:hover {
+ border-color: #6ec4ff;
+ }
+
+ .button-group {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ button {
+ padding: 0.8rem 1.5rem;
+ border-radius: 15px;
+ border: none;
+ background: #a5c8e8;
+ color: #2a5674;
+ font-family: 'Fredoka', sans-serif;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 3px 3px 0px #6ec4ff;
+ border: 3px dashed #737ff5;
+ }
+
+ button:hover {
+ transform: translateY(-3px);
+ box-shadow: 5px 5px 0px #6ec4ff;
+ background: #c1d9f0;
+ }
+
+ button.active {
+ background: #6ec4ff;
+ color: white;
+ }
+
+ .visualizer {
+ width: 100%;
+ height: 150px;
+ background-color: rgba(165, 200, 232, 0.3);
+ border-radius: 15px;
+ margin-top: 2rem;
+ overflow: hidden;
+ position: relative;
+ }
+
+ canvas {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ footer {
+ margin-top: 2rem;
+ color: #4a7295;
+ font-size: 0.9rem;
+ font-family: 'VT323', monospace;
+ letter-spacing: 1px;
+ }
+
+ .home-link {
+ display: inline-block;
+ margin-top: 1rem;
+ color: #2a5674;
+ text-decoration: none;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ }
+
+ .home-link:hover {
+ color: #6ec4ff;
+ transform: translateY(-2px);
+ }
+
+ .note-indicators {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 1rem;
+ }
+
+ .note {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #a5c8e8;
+ transition: all 0.3s ease;
+ }
+
+ .note.active {
+ background-color: #6ec4ff;
+ transform: scale(1.3);
+ box-shadow: 0 0 10px rgba(110, 196, 255, 0.8);
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <h1>Ambient Soundscape Generator</h1>
+ <p>Create beautiful, generative ambient soundscapes that play continuously in the background. Adjust the musical
+ scale, modality, and other parameters to craft your perfect sonic atmosphere.</p>
+
+ <div class="controls">
+ <div class="control-group">
+ <label for="scale">Musical Scale:</label>
+ <select id="scale">
+ <option value="major">Major</option>
+ <option value="minor">Minor</option>
+ <option value="pentatonic">Pentatonic</option>
+ <option value="blues">Blues</option>
+ <option value="chromatic">Chromatic</option>
+ <option value="dorian">Dorian</option>
+ <option value="phrygian">Phrygian</option>
+ <option value="lydian">Lydian</option>
+ <option value="mixolydian">Mixolydian</option>
+ <option value="locrian">Locrian</option>
+ </select>
+ </div>
+
+ <div class="control-group">
+ <label for="root">Root Note:</label>
+ <select id="root">
+ <option value="C">C</option>
+ <option value="C#">C#</option>
+ <option value="D">D</option>
+ <option value="D#">D#</option>
+ <option value="E">E</option>
+ <option value="F">F</option>
+ <option value="F#">F#</option>
+ <option value="G">G</option>
+ <option value="G#">G#</option>
+ <option value="A">A</option>
+ <option value="A#">A#</option>
+ <option value="B">B</option>
+ </select>
+ </div>
+
+ <div class="control-group">
+ <label for="tempo">Tempo:</label>
+ <input type="range" id="tempo" min="40" max="120" value="60">
+ <div id="tempo-value">60 BPM</div>
+ </div>
+
+ <div class="control-group">
+ <label for="density">Note Density:</label>
+ <input type="range" id="density" min="1" max="10" value="5">
+ <div id="density-value">Medium</div>
+ </div>
+
+ <div class="control-group">
+ <label for="reverb">Reverb Amount:</label>
+ <input type="range" id="reverb" min="0" max="1" step="0.1" value="0.5">
+ <div id="reverb-value">Medium</div>
+ </div>
+ </div>
+
+ <div class="button-group">
+ <button id="play-button">Play</button>
+ <button id="stop-button">Stop</button>
+ <button id="randomize-button">Randomize</button>
+ </div>
+
+ <div class="visualizer">
+ <canvas id="visualizer-canvas"></canvas>
+ </div>
+
+ <div class="note-indicators" id="note-indicators">
+ <!-- Note indicators will be added here dynamically -->
+ </div>
+
+ <footer>
+ Part of the <a href="../" class="home-link">Vibes</a> collection of web experiments
+ </footer>
+ </div>
+
+ <script src="soundscape.js"></script>
+</body>
+
+</html> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 12:42:57 +0000