Spaces:

allknowingroger
/

Madewithwebsim

Running

App Files Files Community

allknowingroger commited on Jul 2, 2024

Commit

36a60d4

verified ·

1 Parent(s): 0e64294

Upload 17 files

Browse files

Files changed (13) hide show

7BGbbW7K0gEtscV9M.html +300 -0
S17esH2eMfe0yEdz6.html +368 -0
SWis8QTUYIKGMFRWI.html +294 -0
UZNY2tEsXhS8RqUM9.html +262 -0
ZEqZXcZpfUDkV8V2M.html +248 -0
cYUneFx9tfHZWLOXx.html +188 -0
hbmKkWX8sB2tRrYlW.html +399 -0
jDnGYMx9M566RB31a.html +300 -0
mIvBgUJS6Lekllndg.html +402 -0
nbF9hbyzb3g7zW60m.html +348 -0
r8IennNoYrHc8Bg9I.html +203 -0
uoPvvPxhIetjWfFYJ.html +256 -0
wBMqnCWym2CMFKF1H.html +311 -0

7BGbbW7K0gEtscV9M.html ADDED Viewed

	@@ -0,0 +1,300 @@

+<html><head><base href="https://piano.midi/webmidi@latest/flex-horizontal/use-event.note.name+event.note.octave__not.value/in_getKeys_just_do_straight_comparison/whiteKeys_and_blackKeys_are_nodeLists_not_arrays/position_fix_keyboard_above_text/playable-with-mouse-too/hide%3Ccomments%3Eand%3Clinks%3E/drop_piano_2_octaves/abnormify_sound/push_audio_creativity/explore_tonejs_instruments/drop_piano_decibels_by_10/add_higher_octave/hush_comments"><title>Sonic Artistry</title>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background: radial-gradient(circle at center, #111, #333);
+  color: #fff;
+  font-family: monospace;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+#instrumentSelector {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+}
+#keyboardContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+.key {
+  width: 50px;
+  height: 200px;
+  background: linear-gradient(to bottom, #eee, #ccc);
+  border: 1px solid #000;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.2s;
+  position: relative;
+  transform-style: preserve-3d;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 10px;
+  font-size: 12px;
+}
+.key::after {
+  content: attr(data-note);
+}
+.key.black {
+  width: 30px;
+  height: 120px;
+  background: linear-gradient(to bottom, #555, #222);
+  margin-right: -15px;
+  margin-left: -15px;
+  z-index: 1;
+}
+.key:hover {
+  background: linear-gradient(to bottom, #ddd, #bbb);
+}
+.key.black:hover {
+  background: linear-gradient(to bottom, #777, #444);
+}
+.key.pressed {
+  background: linear-gradient(to bottom, #ccc, #aaa);
+  transform: translateZ(20px);
+}
+.key.black.pressed {
+  background: linear-gradient(to bottom, #666, #333);
+  transform: translateZ(20px);
+}
+.key::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  opacity: 0;
+  transition: width 0.2s, height 0.2s, opacity 0.2s;
+}
+.key.pressed::before {
+  width: 100px;
+  height: 100px;
+  opacity: 1;
+}
+.key.black::before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>
+</head>
+<body>
+<div id="instrumentSelector">
+  <label for="instrumentSelect">Select Instrument:</label>
+  <select id="instrumentSelect">
+    <option value="AMSynth">AM Synth</option>
+    <option value="FMSynth">FM Synth</option>
+    <option value="DuoSynth">Duo Synth</option>
+    <option value="MonoSynth">Mono Synth</option>
+    <option value="PluckSynth">Pluck Synth</option>
+    <option value="Membrane">Membrane Synth</option>
+    <option value="MetalSynth">Metal Synth</option>
+    <option value="NoiseSynth">Noise Synth</option>
+  </select>
+</div>
+<div id="keyboardContainer">
+  <div class="key white" data-note="C2" data-midi="36"></div>
+  <div class="key black" data-note="C#2" data-midi="37"></div>
+  <div class="key white" data-note="D2" data-midi="38"></div>
+  <div class="key black" data-note="D#2" data-midi="39"></div>
+  <div class="key white" data-note="E2" data-midi="40"></div>
+  <div class="key white" data-note="F2" data-midi="41"></div>
+  <div class="key black" data-note="F#2" data-midi="42"></div>
+  <div class="key white" data-note="G2" data-midi="43"></div>
+  <div class="key black" data-note="G#2" data-midi="44"></div>
+  <div class="key white" data-note="A2" data-midi="45"></div>
+  <div class="key black" data-note="A#2" data-midi="46"></div>
+  <div class="key white" data-note="B2" data-midi="47"></div>
+  <div class="key white" data-note="C3" data-midi="48"></div>
+  <div class="key black" data-note="C#3" data-midi="49"></div>
+  <div class="key white" data-note="D3" data-midi="50"></div>
+  <div class="key black" data-note="D#3" data-midi="51"></div>
+  <div class="key white" data-note="E3" data-midi="52"></div>
+  <div class="key white" data-note="F3" data-midi="53"></div>
+  <div class="key black" data-note="F#3" data-midi="54"></div>
+  <div class="key white" data-note="G3" data-midi="55"></div>
+  <div class="key black" data-note="G#3" data-midi="56"></div>
+  <div class="key white" data-note="A3" data-midi="57"></div>
+  <div class="key black" data-note="A#3" data-midi="58"></div>
+  <div class="key white" data-note="B3" data-midi="59"></div>
+  <div class="key white" data-note="C4" data-midi="60"></div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.min.js"></script>
+<script>
+  const whiteKeys = document.querySelectorAll('.key.white');
+  const blackKeys = document.querySelectorAll('.key.black');
+  const instrumentSelect = document.getElementById('instrumentSelect');
+  let synth;
+  const reverb = new Tone.Reverb({ decay: 5, wet: 0.5 }).toDestination();
+  const delay = new Tone.FeedbackDelay({ delayTime: 0.5, feedback: 0.25, wet: 0.25 }).toDestination();
+  function initSynth(instrumentType) {
+    if (synth) {
+      synth.disconnect();
+    }
+    switch (instrumentType) {
+      case 'AMSynth':
+        synth = new Tone.PolySynth(Tone.AMSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'FMSynth':
+        synth = new Tone.PolySynth(Tone.FMSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'DuoSynth':
+        synth = new Tone.PolySynth(Tone.DuoSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'MonoSynth':
+        synth = new Tone.MonoSynth({ volume: -10 }).toDestination();
+        break;
+      case 'PluckSynth':
+        synth = new Tone.PluckSynth({ volume: -10 }).toDestination();
+        break;
+      case 'Membrane':
+        synth = new Tone.PolySynth(Tone.MembraneSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'MetalSynth':
+        synth = new Tone.PolySynth(Tone.MetalSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'NoiseSynth':
+        synth = new Tone.NoiseSynth({ volume: -10 }).toDestination();
+        break;
+      default:
+        synth = new Tone.PolySynth(Tone.AMSynth, { polyphony: 32, volume: -10 }).toDestination();
+    }
+    synth.connect(reverb);
+    synth.connect(delay);
+  }
+  initSynth(instrumentSelect.value);
+  instrumentSelect.addEventListener('change', (event) => {
+    initSynth(event.target.value);
+  });
+  let midiAccess, midiInput;
+  WebMidi.enable(err => {
+    if (err) {
+      console.error('Failed to enable WebMIDI:', err);
+      return;
+    }
+    console.log('WebMIDI enabled!');
+    midiInput = WebMidi.inputs[0];
+    if (!midiInput) {
+      console.warn('No MIDI input device detected.');
+      return;
+    }
+    console.log(`Connected to MIDI input device: ${midiInput.name}`);
+    midiInput.addListener('noteon', 'all', event => {
+      const midiNoteValue = `${event.note.name}${event.note.octave}`;
+      handleNoteOn(midiNoteValue, event.velocity / 127);
+    });
+    midiInput.addListener('noteoff', 'all', event => {
+      const midiNoteValue = `${event.note.name}${event.note.octave}`;
+      handleNoteOff(midiNoteValue);
+    });
+  });
+  function handleNoteOn(midiNoteValue, velocity) {
+    const whiteKey = Array.from(whiteKeys).find(key => key.dataset.note === midiNoteValue);
+    const blackKey = Array.from(blackKeys).find(key => key.dataset.note === midiNoteValue);
+    if (whiteKey) {
+      whiteKey.classList.add('pressed');
+      synth.triggerAttack(noteToFrequency(whiteKey.dataset.midi), velocity);
+    } else if (blackKey) {
+      blackKey.classList.add('pressed');
+      synth.triggerAttack(noteToFrequency(blackKey.dataset.midi), velocity);
+    }
+  }
+  function handleNoteOff(midiNoteValue) {
+    const whiteKey = Array.from(whiteKeys).find(key => key.dataset.note === midiNoteValue);
+    const blackKey = Array.from(blackKeys).find(key => key.dataset.note === midiNoteValue);
+    if (whiteKey) {
+      whiteKey.classList.remove('pressed');
+      synth.triggerRelease(noteToFrequency(whiteKey.dataset.midi));
+    } else if (blackKey) {
+      blackKey.classList.remove('pressed');
+      synth.triggerRelease(noteToFrequency(blackKey.dataset.midi));
+    }
+  }
+  function whiteKeyMouseDown(event) {
+    const key = event.target;
+    key.classList.add('pressed');
+    synth.triggerAttack(noteToFrequency(key.dataset.midi), 0.5);
+  }
+  function whiteKeyMouseUp(event) {
+    const key = event.target;
+    key.classList.remove('pressed');
+    synth.triggerRelease(noteToFrequency(key.dataset.midi));
+  }
+  function blackKeyMouseDown(event) {
+    const key = event.target;
+    key.classList.add('pressed');
+    synth.triggerAttack(noteToFrequency(key.dataset.midi), 0.5);
+  }
+  function blackKeyMouseUp(event) {
+    const key = event.target;
+    key.classList.remove('pressed');
+    synth.triggerRelease(noteToFrequency(key.dataset.midi));
+  }
+  whiteKeys.forEach(key => {
+    key.addEventListener('mousedown', whiteKeyMouseDown);
+    key.addEventListener('mouseup', whiteKeyMouseUp);
+    key.addEventListener('mouseleave', whiteKeyMouseUp);
+  });
+  blackKeys.forEach(key => {
+    key.addEventListener('mousedown', blackKeyMouseDown);
+    key.addEventListener('mouseup', blackKeyMouseUp);
+    key.addEventListener('mouseleave', blackKeyMouseUp);
+  });
+  function noteToFrequency(note) {
+    const baseFrequency = 440;
+    return baseFrequency * Math.pow(2, (note - 69) / 12);
+  }
+</script>
+</body>
+</html>

S17esH2eMfe0yEdz6.html ADDED Viewed

	@@ -0,0 +1,368 @@

+<html><head><base href="Simulate://Earth.ai/3D_Graphs=enabled/WebGL=enabled/Physics=enabled/Weather.gif=enabled/Weather.gif=visible/Seasons.gif=enabled/City_Lights=enabled/City_Lights=visible/Stars=Visible/Sun=visible"><title>Earth.ai - Interactive Earth and Sun Simulation</title>
+<style>
+    body, html {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: Arial, sans-serif;
+        overflow: hidden;
+        background-color: #000;
+        color: #fff;
+    }
+    #canvas-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #overlay {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background-color: rgba(0,0,0,0.7);
+        padding: 10px;
+        border-radius: 5px;
+    }
+    #controls {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        background-color: rgba(0,0,0,0.7);
+        padding: 10px;
+        border-radius: 5px;
+    }
+    button {
+        background-color: #4CAF50;
+        border: none;
+        color: white;
+        padding: 8px 16px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 12px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 5px;
+    }
+    #info-panel {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background-color: rgba(0,0,0,0.7);
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 14px;
+    }
+    #earth-info {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        background-color: rgba(0,0,0,0.7);
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 14px;
+    }
+</style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div id="overlay">
+        <h1>Earth.ai Interactive Simulation</h1>
+        <p>Explore Earth's dynamics with the Sun!</p>
+    </div>
+    <div id="controls">
+        <button id="toggle-atmosphere">Toggle Atmosphere</button>
+        <button id="toggle-weather">Toggle Weather</button>
+        <button id="toggle-seasons">Toggle Seasons</button>
+        <button id="toggle-city-lights">Toggle City Lights</button>
+        <button id="toggle-stars">Toggle Stars</button>
+        <button id="toggle-sun">Toggle Sun</button>
+        <button id="reset-view">Reset View</button>
+    </div>
+    <div id="info-panel">
+        <p>Current Season: <span id="current-season">Spring</span></p>
+        <p>Time: <span id="current-time">12:00 PM</span></p>
+        <p>Weather: <span id="current-weather">Clear</span></p>
+        <p>Temperature: <span id="current-temperature">20°C</span></p>
+    </div>
+    <div id="earth-info">
+        <p>Earth Rotation: <span id="earth-rotation">0°</span></p>
+        <p>Day/Night: <span id="day-night">Day</span></p>
+        <p>Solar Intensity: <span id="solar-intensity">100%</span></p>
+    </div>
+<script>
+let scene, camera, renderer, earth, atmosphere, weatherLayer, seasonalLayer, cityLights, stars, sun;
+let currentSeason = 'Spring';
+let currentTime = new Date();
+let weatherConditions = ['Clear', 'Cloudy', 'Rainy', 'Snowy'];
+let currentWeather = 'Clear';
+let currentTemperature = 20;
+let earthRotation = 0;
+let isDaytime = true;
+let solarIntensity = 100;
+function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.getElementById('canvas-container').appendChild(renderer.domElement);
+    // Create Earth
+    const earthGeometry = new THREE.SphereGeometry(5, 64, 64);
+    const earthTexture = new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Solarsystemscope_texture_2k_earth_daymap.jpg/2560px-Solarsystemscope_texture_2k_earth_daymap.jpg');
+    const earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture });
+    earth = new THREE.Mesh(earthGeometry, earthMaterial);
+    scene.add(earth);
+    // Create Atmosphere
+    const atmosphereGeometry = new THREE.SphereGeometry(5.1, 64, 64);
+    const atmosphereMaterial = new THREE.MeshPhongMaterial({
+        color: 0x00ffff,
+        transparent: true,
+        opacity: 0.2
+    });
+    atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+    scene.add(atmosphere);
+    // Create Weather Layer
+    weatherLayer = new THREE.Mesh(
+        new THREE.SphereGeometry(5.05, 64, 64),
+        new THREE.MeshPhongMaterial({
+            transparent: true,
+            opacity: 0.8,
+            map: new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Solarsystemscope_texture_2k_earth_clouds.jpg/1280px-Solarsystemscope_texture_2k_earth_clouds.jpg')
+        })
+    );
+    scene.add(weatherLayer);
+    // Create Seasonal Layer
+    seasonalLayer = new THREE.Mesh(
+        new THREE.SphereGeometry(5.02, 64, 64),
+        new THREE.MeshPhongMaterial({
+            transparent: true,
+            opacity: 0.5,
+            map: new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Solarsystemscope_texture_2k_earth_vegetation.jpg/1280px-Solarsystemscope_texture_2k_earth_vegetation.jpg')
+        })
+    );
+    scene.add(seasonalLayer);
+    // Create City Lights
+    cityLights = new THREE.Mesh(
+        new THREE.SphereGeometry(5.01, 64, 64),
+        new THREE.MeshBasicMaterial({
+            transparent: true,
+            opacity: 0.8,
+            map: new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/The_earth_at_night.jpg/1280px-The_earth_at_night.jpg')
+        })
+    );
+    scene.add(cityLights);
+    // Create Stars
+    const starsGeometry = new THREE.BufferGeometry();
+    const starsMaterial = new THREE.PointsMaterial({color: 0xFFFFFF, size: 0.05});
+    const starsVertices = [];
+    for (let i = 0; i < 10000; i++) {
+        const x = THREE.MathUtils.randFloatSpread(2000);
+        const y = THREE.MathUtils.randFloatSpread(2000);
+        const z = THREE.MathUtils.randFloatSpread(2000);
+        starsVertices.push(x, y, z);
+    }
+    starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
+    stars = new THREE.Points(starsGeometry, starsMaterial);
+    scene.add(stars);
+    // Create Sun
+    const sunGeometry = new THREE.SphereGeometry(20, 64, 64);
+    const sunMaterial = new THREE.MeshBasicMaterial({
+        color: 0xffff00,
+        emissive: 0xffff00,
+        emissiveIntensity: 1
+    });
+    sun = new THREE.Mesh(sunGeometry, sunMaterial);
+    sun.position.set(50, 20, -100);
+    scene.add(sun);
+    // Add ambient light
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+    // Add directional light (sunlight)
+    const sunLight = new THREE.DirectionalLight(0xffffff, 1);
+    sunLight.position.set(50, 20, -100);
+    scene.add(sunLight);
+    camera.position.z = 20;
+}
+function updateWeather() {
+    currentWeather = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
+    document.getElementById('current-weather').textContent = currentWeather;
+    gsap.to(weatherLayer.material, {
+        opacity: currentWeather === 'Clear' ? 0.2 : 0.8,
+        duration: 2
+    });
+    updateTemperature();
+}
+function updateSeason() {
+    const seasons = ['Spring', 'Summer', 'Autumn', 'Winter'];
+    const currentIndex = seasons.indexOf(currentSeason);
+    currentSeason = seasons[(currentIndex + 1) % seasons.length];
+    document.getElementById('current-season').textContent = currentSeason;
+    const seasonColors = {
+        Spring: 0x00ff00,
+        Summer: 0x00aa00,
+        Autumn: 0xaa5500,
+        Winter: 0xffffff
+    };
+    gsap.to(seasonalLayer.material.color, {
+        r: (seasonColors[currentSeason] >> 16 & 255) / 255,
+        g: (seasonColors[currentSeason] >> 8 & 255) / 255,
+        b: (seasonColors[currentSeason] & 255) / 255,
+        duration: 2
+    });
+    updateTemperature();
+}
+function updateTemperature() {
+    const baseTemp = {
+        Spring: 15,
+        Summer: 25,
+        Autumn: 10,
+        Winter: 0
+    }[currentSeason];
+    const weatherEffect = {
+        Clear: 5,
+        Cloudy: 0,
+        Rainy: -3,
+        Snowy: -10
+    }[currentWeather];
+    currentTemperature = baseTemp + weatherEffect + Math.floor(Math.random() * 5);
+    document.getElementById('current-temperature').textContent = `${currentTemperature}°C`;
+}
+function updateTime() {
+    currentTime.setMinutes(currentTime.getMinutes() + 1);
+    document.getElementById('current-time').textContent = currentTime.toLocaleTimeString();
+    const hours = currentTime.getHours();
+    isDaytime = hours >= 6 && hours < 18;
+    document.getElementById('day-night').textContent = isDaytime ? 'Day' : 'Night';
+    gsap.to(cityLights.material, {
+        opacity: isDaytime ? 0 : 0.8,
+        duration: 1
+    });
+}
+function updateSolarIntensity() {
+    const angle = (earthRotation % 360) * (Math.PI / 180);
+    solarIntensity = Math.max(0, Math.sin(angle)) * 100;
+    document.getElementById('solar-intensity').textContent = `${Math.round(solarIntensity)}%`;
+    // Adjust sun's visible intensity
+    sun.material.emissiveIntensity = 0.5 + (solarIntensity / 200);
+}
+function animate() {
+    requestAnimationFrame(animate);
+    earthRotation = (earthRotation + 0.1) % 360;
+    earth.rotation.y += 0.001;
+    atmosphere.rotation.y += 0.001;
+    weatherLayer.rotation.y += 0.0012;
+    seasonalLayer.rotation.y += 0.001;
+    cityLights.rotation.y += 0.001;
+    updateTime();
+    updateSolarIntensity();
+    document.getElementById('earth-rotation').textContent = `${earthRotation.toFixed(1)}°`;
+    renderer.render(scene, camera);
+}
+init();
+animate();
+setInterval(updateWeather, 30000);
+setInterval(updateSeason, 120000);
+// Event Listeners
+document.getElementById('toggle-atmosphere').addEventListener('click', () => atmosphere.visible = !atmosphere.visible);
+document.getElementById('toggle-weather').addEventListener('click', () => weatherLayer.visible = !weatherLayer.visible);
+document.getElementById('toggle-seasons').addEventListener('click', () => seasonalLayer.visible = !seasonalLayer.visible);
+document.getElementById('toggle-city-lights').addEventListener('click', () => cityLights.visible = !cityLights.visible);
+document.getElementById('toggle-stars').addEventListener('click', () => stars.visible = !stars.visible);
+document.getElementById('toggle-sun').addEventListener('click', () => {
+    sun.visible = !sun.visible;
+    scene.children.forEach(child => {
+        if (child instanceof THREE.DirectionalLight) {
+            child.visible = sun.visible;
+        }
+    });
+});
+document.getElementById('reset-view').addEventListener('click', () => {
+    camera.position.set(0, 0, 20);
+    camera.lookAt(earth.position);
+});
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+});
+// Add mouse control for camera movement
+let isDragging = false;
+let previousMousePosition = {
+    x: 0,
+    y: 0
+};
+document.addEventListener('mousedown', (e) => {
+    isDragging = true;
+});
+document.addEventListener('mousemove', (e) => {
+    if (isDragging) {
+        const deltaMove = {
+            x: e.clientX - previousMousePosition.x,
+            y: e.clientY - previousMousePosition.y
+        };
+        const rotationSpeed = 0.005;
+        camera.position.x += deltaMove.x * rotationSpeed;
+        camera.position.y -= deltaMove.y * rotationSpeed;
+        camera.lookAt(earth.position);
+    }
+    previousMousePosition = {
+        x: e.clientX,
+        y: e.clientY
+    };
+});
+document.addEventListener('mouseup', (e) => {
+    isDragging = false;
+});
+// Add zoom functionality
+document.addEventListener('wheel', (e) => {
+    const zoomSpeed = 0.1;
+    camera.position.z += e.deltaY * zoomSpeed;
+    camera.position.z = Math.max(10, Math.min(camera.position.z, 50));
+});
+</script>
+</body></html>

SWis8QTUYIKGMFRWI.html ADDED Viewed

	@@ -0,0 +1,294 @@

+<html><head><base href="https://websim.ai/comic-maker"><title>Dynamic Strip Comic Maker</title>
+<style>
+body {
+  font-family: Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f0f0f0;
+}
+h1 {
+  text-align: center;
+  color: #333;
+}
+.top-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+.instructions {
+  flex-grow: 1;
+  margin-left: 20px;
+  font-size: 0.85em;
+  line-height: 1.4;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.comic-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.panel {
+  width: 23%;
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+.panel-content {
+  width: 100%;
+  height: 200px;
+  border: 1px solid #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #999;
+  background-color: #f9f9f9;
+  overflow: hidden;
+}
+.panel-content img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dialog-box {
+  width: 95%;
+  min-height: 50px;
+  margin: 0 auto 10px;
+  padding: 10px;
+  background-color: #fff;
+  border: 2px solid #000;
+  border-radius: 15px;
+  font-size: 14px;
+  word-wrap: break-word;
+  position: relative;
+}
+.dialog-box:after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px;
+  border-style: solid;
+  border-color: #000 transparent transparent transparent;
+}
+.dialog-box .speaker {
+  font-weight: bold;
+}
+.dialog-box .speech {
+  font-style: italic;
+  color: #0066cc;
+}
+textarea {
+  width: 100%;
+  height: 60px;
+  margin-top: 10px;
+  resize: vertical;
+  transition: opacity 0.3s ease;
+}
+select {
+  padding: 5px;
+  font-size: 14px;
+  width: 200px;
+}
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+button {
+  padding: 10px;
+  font-size: 16px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+  flex-grow: 1;
+  margin: 0 5px;
+}
+button:hover {
+  background-color: #45a049;
+}
+#auto-generate {
+  background-color: #3498db;
+}
+#auto-generate:hover {
+  background-color: #2980b9;
+}
+.url-display {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 0.9em;
+  color: #666;
+}
+</style></head><body>
+<h1>Dynamic Strip Comic Maker</h1>
+<div class="top-container">
+  <select id="style-selector">
+    <option value="peanuts">Peanuts</option>
+    <option value="farside" selected>Far Side</option>
+    <option value="doonesbury">Doonesbury</option>
+    <option value="calvin">Calvin and Hobbes</option>
+  </select>
+  <div class="instructions">
+    To use: select your comic style, and a) either enter in some description and text in the bottom boxes and press Generate or b) clear all text and press Auto Generate to let the AI create the panels itself. Note: description is before the - and all dialog is inside brackets ().
+  </div>
+</div>
+<div class="comic-container">
+  <div class="panel">
+    <div id="dialog1" class="dialog-box"></div>
+    <div id="panel1" class="panel-content">
+      <img src="https://via.placeholder.com/350x200/E0F2F1/000?text=Far+Side+1:+Two+cows+in+a+field" alt="Far Side style comic panel 1: Two cows in a field" width="350" height="200">
+    </div>
+    <textarea id="text1" placeholder="Enter description - (dialog)">Two cows in a field - (Hey, did you hear about the new mad cow disease? It's udder madness!)</textarea>
+  </div>
+  <div class="panel">
+    <div id="dialog2" class="dialog-box"></div>
+    <div id="panel2" class="panel-content">
+      <img src="https://via.placeholder.com/350x200/E0F2F1/000?text=Far+Side+2:+Scientist+with+giant+microscope" alt="Far Side style comic panel 2: Scientist with giant microscope" width="350" height="200">
+    </div>
+    <textarea id="text2" placeholder="Enter description - (dialog)">Scientist with giant microscope - (I've done it! I've found the world's smallest particle... my paycheck!)</textarea>
+  </div>
+  <div class="panel">
+    <div id="dialog3" class="dialog-box"></div>
+    <div id="panel3" class="panel-content">
+      <img src="https://via.placeholder.com/350x200/E0F2F1/000?text=Far+Side+3:+Cavemen+discovering+fire" alt="Far Side style comic panel 3: Cavemen discovering fire" width="350" height="200">
+    </div>
+    <textarea id="text3" placeholder="Enter description - (dialog)">Cavemen discovering fire - (Great, now how do we update our insurance policy?)</textarea>
+  </div>
+  <div class="panel">
+    <div id="dialog4" class="dialog-box"></div>
+    <div id="panel4" class="panel-content">
+      <img src="https://via.placeholder.com/350x200/E0F2F1/000?text=Far+Side+4:+Aliens+observing+Earth" alt="Far Side style comic panel 4: Aliens observing Earth" width="350" height="200">
+    </div>
+    <textarea id="text4" placeholder="Enter description - (dialog)">Aliens observing Earth - (They call that dancing? No wonder they haven't made interstellar contact yet.)</textarea>
+  </div>
+</div>
+<div class="button-container">
+  <button id="generate-comic">Generate</button>
+  <button id="auto-generate">Auto Generate</button>
+</div>
+<div class="url-display">
+  URL: <a href="https://websim.ai/comic-maker">https://websim.ai/comic-maker</a>
+</div>
+<script>
+function generateImage(style, description, panelNumber) {
+  const styleBackgrounds = {
+    peanuts: "#FFF9C4",
+    farside: "#E0F2F1",
+    doonesbury: "#E8EAF6",
+    calvin: "#FFF3E0"
+  };
+  const styleColor = styleBackgrounds[style] || "#FFFFFF";
+  const textColor = style === 'farside' ? '000' : '333';
+  return `https://via.placeholder.com/350x200/${styleColor.substring(1)}/${textColor}?text=${encodeURIComponent(style + ' ' + panelNumber + ': ' + description)}`;
+}
+function extractContent(text) {
+  const [description, dialogPart] = text.split('-').map(part => part.trim());
+  const dialogMatch = dialogPart ? dialogPart.match(/\((.*?)\)/) : null;
+  const dialog = dialogMatch ? dialogMatch[1] : '';
+  return { description, dialog };
+}
+function updatePanel(panelNumber, style, content) {
+  const panel = document.getElementById(`panel${panelNumber}`);
+  const dialog = document.getElementById(`dialog${panelNumber}`);
+  const textArea = document.getElementById(`text${panelNumber}`);
+  panel.innerHTML = '';
+  const img = document.createElement('img');
+  img.src = generateImage(style, content.description, panelNumber);
+  img.alt = `${style} style comic panel ${panelNumber}: ${content.description}`;
+  img.width = 350;
+  img.height = 200;
+  panel.appendChild(img);
+  dialog.innerHTML = `<span class="speech">${content.dialog}</span>`;
+  textArea.value = `${content.description} - (${content.dialog})`;
+  textArea.style.opacity = '0.75';
+}
+function generateComic() {
+  const style = document.getElementById('style-selector').value;
+  for (let i = 1; i <= 4; i++) {
+    const text = document.getElementById(`text${i}`).value.trim();
+    if (text === '') {
+      alert(`Please enter text for panel ${i} before generating the comic.`);
+      return;
+    }
+    const content = extractContent(text);
+    updatePanel(i, style, content);
+  }
+  alert('Comic generated using user input!');
+}
+function generateRandomPanel(style) {
+  const themes = {
+    peanuts: [
+      { description: "Charlie Brown missing football kick", dialog: "I can't believe I fell for it again!" },
+      { description: "Snoopy as World War I Flying Ace", dialog: "Curse you, Red Baron!" },
+      { description: "Linus with security blanket", dialog: "It's not a blanket, it's a portable security system." },
+      { description: "Lucy at psychiatry booth", dialog: "The doctor is in. Five cents, please." },
+      { description: "Schroeder playing piano", dialog: "Beethoven is my muse." },
+      { description: "Peppermint Patty sleeping in class", dialog: "I wasn't sleeping, I was just resting my eyes!" }
+    ],
+    farside: [
+      { description: "Cows plotting world domination", dialog: "First the farm, then the world!" },
+      { description: "Scientist creating doomsday device", dialog: "What could possibly go wrong?" },
+      { description: "Alien tourist trap on Earth", dialog: "Two for one abductions today!" },
+      { description: "Cavemen inventing something ridiculous", dialog: "I call it... the 'selfie stick'!" },
+      { description: "Animals in therapy session", dialog: "Tell me about your relationship with your owner." },
+      { description: "God playing with Earth snow globe", dialog: "Oops, I think I shook it too hard." }
+    ],
+    doonesbury: [
+      { description: "Mike Doonesbury reading news", dialog: "Breaking: Reality still disappointing." },
+      { description: "Zonker tanning", dialog: "Is it summer yet? I can't tell from in here." },
+      { description: "Uncle Duke hallucinating", dialog: "The bats! They're everywhere!" },
+      { description: "Joanie Caucus at political rally", dialog: "Another day, another protest. Pass the megaphone." },
+      { description: "B.D. without helmet", dialog: "I feel so... exposed." },
+      { description: "Roland Hedley reporting fake news", dialog: "This just in: Truth now optional!" }
+    ],
+    calvin: [
+      { description: "Calvin and Hobbes sledding", dialog: "I think I can see my house from heeeeere!" },
+      { description: "Spaceman Spiff crash landing", dialog: "Zounds! Alien terrain dead ahead!" },
+      { description: "Calvin's dad explaining something absurd", dialog: "It builds character, Calvin." },
+      { description: "Calvin as Tracer Bullet, detective", dialog: "The dame was trouble, but I was too." },
+      { description: "Calvin's snowmen art", dialog: "I call it 'The Torment of Existence Weighed Against the Horror of Nonbeing'." },
+      { description: "Hobbes pouncing on Calvin", dialog: "Gotcha! You need to be more aware of your surroundings." }
+    ]
+  };
+  const randomIndex = Math.floor(Math.random() * themes[style].length);
+  return themes[style][randomIndex];
+}
+function autoGenerateComic() {
+  const style = document.getElementById('style-selector').value;
+  for (let i = 1; i <= 4; i++) {
+    const content = generateRandomPanel(style);
+    updatePanel(i, style, content);
+  }
+  alert('New comic auto-generated using AI!');
+}
+document.getElementById('generate-comic').addEventListener('click', generateComic);
+document.getElementById('auto-generate').addEventListener('click', autoGenerateComic);
+</script>
+</body></html>

UZNY2tEsXhS8RqUM9.html ADDED Viewed

	@@ -0,0 +1,262 @@

+<html><head><base href="https://leafletexample.com/">
+  <title>Interactive Hiking Route Planner</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
+  <style>
+    #map {
+      height: 100%;
+    }
+    html, body {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    .button-container {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+    }
+    .map-button, .layer-button {
+      display: block;
+      width: 140px;
+      padding: 5px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      text-align: center;
+      background: white;
+      cursor: pointer;
+      margin-bottom: 5px;
+    }
+    .map-button:hover, .layer-button:hover {
+      background: #f4f4f4;
+    }
+    .distance-marker {
+      font-size: 12px;
+      font-weight: bold;
+      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <div class="button-container">
+    <div id="clearPinsButton" class="map-button">Clear Pins</div>
+    <div id="undoLastPinButton" class="map-button">Undo Last Pin</div>
+    <div id="toggleContoursButton" class="layer-button">Toggle Contour Lines</div>
+    <div id="toggleSatelliteButton" class="layer-button">Toggle Satellite</div>
+    <div id="toggleUSGSTopoButton" class="layer-button">Toggle USGS Topo Map</div>
+  </div>
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
+  <script>
+    var map = L.map('map').setView([39.8283, -98.5795], 5);
+    var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+    var esriWorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+	    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+    });
+    var usgsTopoLayer = L.esri.tiledMapLayer({
+      url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer",
+      maxZoom: 15
+    });
+    var contoursLayer = L.esri.tiledMapLayer({
+      url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer",
+      maxZoom: 15
+    });
+    var baseMaps = {
+      "OpenStreetMap": openStreetMap,
+      "Satellite Imagery": esriWorldImagery,
+      "USGS Topo Map": usgsTopoLayer
+    };
+    var overlayMaps = {
+      "Contour Lines": contoursLayer
+    };
+    L.control.layers(baseMaps, overlayMaps).addTo(map);
+    var popup = L.popup();
+    function onMapClick(e) {
+      popup
+        .setLatLng(e.latlng)
+        .setContent("Latitude: " + e.latlng.lat.toFixed(4) + "<br>Longitude: " + e.latlng.lng.toFixed(4) + "<br>Elevation: <span id='elevationValue'>Fetching...</span>")
+        .openOn(map);
+      getElevation(e.latlng.lat, e.latlng.lng);
+    }
+    map.on('click', onMapClick);
+    var waypoints = [];
+    var waypointMarkers = L.layerGroup().addTo(map);
+    var waypointLines = L.polyline([], {color: 'red'}).addTo(map);
+    var distanceMarkers = L.layerGroup().addTo(map);
+    function onMapRightClick(e) {
+      var marker = L.marker(e.latlng).addTo(waypointMarkers);
+      waypoints.push(e.latlng);
+      marker.bindPopup("Waypoint " + waypoints.length).openPopup();
+      if (waypoints.length > 1) {
+        waypointLines.addLatLng(e.latlng);
+        var latLngs = waypointLines.getLatLngs();
+        var lastLatLng = latLngs[latLngs.length - 2];
+        var dist = lastLatLng.distanceTo(e.latlng) * 0.000621371; // convert to miles
+        var midPoint = L.latLng(
+          (lastLatLng.lat + e.latlng.lat) / 2,
+          (lastLatLng.lng + e.latlng.lng) / 2
+        );
+        var distanceMarker = L.marker(midPoint, {
+          icon: L.divIcon({
+            className: 'distance-marker',
+            html: dist.toFixed(1) + ' mi',
+            iconSize: [50, 12]
+          })
+        });
+        distanceMarkers.addLayer(distanceMarker);
+      }
+    }
+    map.on('contextmenu', onMapRightClick);
+    document.getElementById('clearPinsButton').onclick = function() {
+      waypoints = [];
+      waypointMarkers.clearLayers();
+      waypointLines.setLatLngs([]);
+      distanceMarkers.clearLayers();
+    };
+    document.getElementById('undoLastPinButton').onclick = function() {
+      if (waypoints.length > 0) {
+        waypoints.pop();
+        waypointMarkers.removeLayer(waypointMarkers.getLayers()[waypointMarkers.getLayers().length - 1]);
+        if (waypoints.length > 0) {
+          waypointLines.setLatLngs(waypoints);
+        } else {
+          waypointLines.setLatLngs([]);
+        }
+        distanceMarkers.removeLayer(distanceMarkers.getLayers()[distanceMarkers.getLayers().length - 1]);
+      }
+    };
+    document.getElementById('toggleContoursButton').onclick = function() {
+      if (map.hasLayer(contoursLayer)) {
+        map.removeLayer(contoursLayer);
+      } else {
+        contoursLayer.addTo(map);
+      }
+    };
+    document.getElementById('toggleSatelliteButton').onclick = function() {
+      if (map.hasLayer(esriWorldImagery)) {
+        map.removeLayer(esriWorldImagery);
+        if (!map.hasLayer(openStreetMap) && !map.hasLayer(usgsTopoLayer)) {
+          openStreetMap.addTo(map);
+        }
+      } else {
+        esriWorldImagery.addTo(map);
+        if (map.hasLayer(openStreetMap)) {
+          map.removeLayer(openStreetMap);
+        }
+        if (map.hasLayer(usgsTopoLayer)) {
+          map.removeLayer(usgsTopoLayer);
+        }
+      }
+    };
+    document.getElementById('toggleUSGSTopoButton').onclick = function() {
+      if (map.hasLayer(usgsTopoLayer)) {
+        map.removeLayer(usgsTopoLayer);
+        if (!map.hasLayer(openStreetMap) && !map.hasLayer(esriWorldImagery)) {
+          openStreetMap.addTo(map);
+        }
+      } else {
+        usgsTopoLayer.addTo(map);
+        if (map.hasLayer(openStreetMap)) {
+          map.removeLayer(openStreetMap);
+        }
+        if (map.hasLayer(esriWorldImagery)) {
+          map.removeLayer(esriWorldImagery);
+        }
+      }
+    };
+    function getElevation(lat, lng) {
+      fetch('https://nationalmap.gov/epqs/pqs.php?x=' + lng + '&y=' + lat + '&units=Feet&output=json')
+        .then(response => response.json())
+        .then(data => {
+          document.getElementById('elevationValue').innerHTML = data.USGS_Elevation_Point_Query_Service.Elevation_Query.Elevation + ' ft';
+        });
+    }
+  </script>
+<div id="bookmarks-bar" class="flex justify-between items-center flex-wrap p-2">
+  <div class="flex space-x-4">
+    <a href="/" class="flex items-center space-x-1 text-black hover:text-blue-600">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+        <polyline points="9 22 9 12 15 12 15 22"></polyline>
+      </svg>
+      <span>Home</span>
+    </a>
+    <a href="/maps?topic=fantasy" class="flex items-center space-x-1 text-black hover:text-blue-600">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+        <circle cx="12" cy="10" r="3"></circle>
+      </svg>
+      <span>Fantasy Maps</span>
+    </a>
+    <a href="/maps?topic=historical" class="flex items-center space-x-1 text-black hover:text-blue-600">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+      </svg>
+      <span>Historical Maps</span>
+    </a>
+  </div>
+</div>
+<div class="max-w-screen-xl mx-auto p-6">
+  <h1 class="text-2xl font-bold mb-4">Hiking Route Planner</h1>
+  <p class="mb-4">
+   Plan your hikes with this interactive route mapping application.
+    <ul class="list-disc pl-6 mb-4">
+      <li>Click the map to see latitude, longitude and elevation at that point</li>
+      <li>Right click to place waypoints along your route</li>
+      <li>See the distance between waypoints in miles</li>
+      <li>Clear all pins or undo the last pin with the buttons in the top right</li>
+      <li>Toggle contour lines, satellite imagery, and USGS topo maps on/off</li>
+      <li>Use the layer control to change the base map</li>
+    </ul>
+    Start mapping out your next hiking adventure!
+  </p>
+  <h2 class="text-xl font-semibold mt-8 mb-4">About This Map</h2>
+  <p class="mb-4">
+  The map uses:
+  <ul class="list-disc list-inside mb-4">
+    <li><a href="https://leafletjs.com/" class="text-blue-600 hover:underline">Leaflet</a> for the interactive map</li>
+    <li><a href="https://esri.github.io/esri-leaflet/" class="text-blue-600 hover:underline">Esri Leaflet</a> for USGS layers (contours, topo)</li>
+    <li><a href="https://www.openstreetmap.org/" class="text-blue-600 hover:underline">OpenStreetMap</a>, <a href="https://www.esri.com/en-us/arcgis/products/imagery/overview" class="text-blue-600 hover:underline">Esri Satellite Imagery</a>, and <a href="https://www.usgs.gov/core-science-systems/national-geospatial-program/national-map" class="text-blue-600 hover:underline">USGS National Map</a> for base maps</li>
+    <li><a href="https://www.usgs.gov/core-science-systems/ngp/tnm-delivery/gis-data-download" class="text-blue-600 hover:underline">USGS Elevation Point Query Service</a> for elevation data</li>
+  </ul>
+  </p>
+  <h2 class="text-xl font-semibold mt-8 mb-4">Happy Trails!</h2>
+  <p>We hope you find this tool useful for planning your outdoor adventures. Always remember to practice <a href="https://lnt.org/why/7-principles/" class="text-blue-600 hover:underline">Leave No Trace principles</a> and check local regulations before heading out. Have fun and stay safe out there!</p>
+</div>
+</body></html>

ZEqZXcZpfUDkV8V2M.html ADDED Viewed

	@@ -0,0 +1,248 @@

+<html><head><base href="https://vorpal.strikes/ascii-photo"><style>
+@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
+:root {
+  --bg-color: #0a0a0a;
+  --fg-color: #0ff;
+  --accent-color: #0cc;
+}
+* {
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: 'Orbitron', sans-serif;
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+}
+h1, h2 {
+  text-align: center;
+  color: var(--accent-color);
+  text-shadow: 0 0 10px var(--accent-color);
+}
+#ascii-art {
+  font-family: monospace;
+  white-space: pre;
+  overflow: auto;
+  max-width: 100%;
+  max-height: 70vh;
+  border: 2px solid var(--accent-color);
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 0 10px var(--accent-color);
+  background-color: rgba(0, 0, 0, 0.7);
+}
+#photo-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  position: relative;
+}
+#photo {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 0 20px var(--fg-color);
+}
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+button, select, input {
+  padding: 10px 20px;
+  font-size: 16px;
+  border: 2px solid var(--accent-color);
+  border-radius: 5px;
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  font-family: 'Orbitron', sans-serif;
+  cursor: pointer;
+}
+button:hover, select:hover {
+  background-color: var(--accent-color);
+  color: var(--bg-color);
+  box-shadow: 0 0 10px var(--accent-color);
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.glitch {
+  animation: glitch 1s linear infinite;
+}
+@keyframes glitch {
+  2%, 64% {
+    transform: translate(2px, 0) skew(0deg);
+  }
+  4%, 60% {
+    transform: translate(-2px, 0) skew(0deg);
+  }
+  62% {
+    transform: translate(0, 0) skew(5deg);
+  }
+}
+</style>
+</head>
+<body>
+<h1 class="glitch">Photo to ASCII Art Converter</h1>
+<div id="photo-container">
+  <img id="photo" src="" alt="Your photo will appear here">
+</div>
+<div class="controls">
+  <button id="upload-photo">Upload Photo</button>
+  <input type="file" id="photo-input" accept="image/*" style="display: none;">
+  <button id="toggle-ascii" disabled>Start ASCII Conversion</button>
+  <button id="copy-text">Copy Text</button>
+  <select id="char-select">
+    <option value=" .,:;=!*#$@">Density 1</option>
+    <option value="@%#*+=-:. ">Density 2</option>
+    <option value="#WMBRXVYIti+=;:,. ">Density 3</option>
+  </select>
+  <select id="char-type-select">
+    <option value="standard">Standard</option>
+    <option value="blocks">Blocks</option>
+    <option value="braille">Braille</option>
+  </select>
+  <select id="color-mode-select">
+    <option value="mono">Monochrome</option>
+    <option value="live">Live Color</option>
+  </select>
+  <input type="range" id="resolution-input" min="0.05" max="1" step="0.05" value="0.15">
+</div>
+<pre id="ascii-art"></pre>
+<footer>made with love by @vorpal_strikes</footer>
+<script>
+const photoContainer = document.getElementById('photo-container');
+const photo = document.getElementById('photo');
+const uploadBtn = document.getElementById('upload-photo');
+const photoInput = document.getElementById('photo-input');
+const toggleBtn = document.getElementById('toggle-ascii');
+const copyTextBtn = document.getElementById('copy-text');
+const asciiArt = document.getElementById('ascii-art');
+const charSelect = document.getElementById('char-select');
+const charTypeSelect = document.getElementById('char-type-select');
+const colorModeSelect = document.getElementById('color-mode-select');
+const resolutionInput = document.getElementById('resolution-input');
+let capturing = false;
+const charSets = {
+  standard: {
+    " .,:;=!*#$@": " .,:;=!*#$@",
+    "@%#*+=-:. ": "@%#*+=-:. ",
+    "#WMBRXVYIti+=;:,. ": "#WMBRXVYIti+=;:,. ",
+  },
+  blocks: {
+    " .,:;=!*#$@": " ░▒▓█",
+    "@%#*+=-:. ": " ▂▄▆█",
+    "#WMBRXVYIti+=;:,. ": " ▖▗▘▙▚▛▜▝▞▟",
+  },
+  braille: {
+    " .,:;=!*#$@": " ⠁⠂⠄⡀⡄⡆⡇⡧⣿",
+    "@%#*+=-:. ": " ⠈⠉⠋⠓⠒⠲⠦⠔⠴⣿",
+    "#WMBRXVYIti+=;:,. ": " ⠁⠂⠄⡀⡄⡆⢀⣀⣄⣆⣇⡧⡷⣿",
+  },
+};
+function photoToAscii() {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  const scale = Number(resolutionInput.value);
+  canvas.width = photo.width * scale;
+  canvas.height = photo.height * scale;
+  ctx.drawImage(photo, 0, 0, canvas.width, canvas.height);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  const charSet = charSets[charTypeSelect.value][charSelect.value];
+  const colorMode = colorModeSelect.value;
+  let ascii = '';
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const brightness = (r + g + b) / 3;
+    const charIndex = Math.floor(brightness / 256 * charSet.length);
+    if (colorMode === 'live') {
+      ascii += `<span style="color: rgb(${r}, ${g}, ${b})">${charSet[charIndex]}</span>`;
+    } else {
+      ascii += charSet[charIndex];
+    }
+    if ((i / 4 + 1) % canvas.width === 0) {
+      ascii += '\n';
+    }
+  }
+  asciiArt.innerHTML = ascii;
+}
+uploadBtn.addEventListener('click', () => {
+  photoInput.click();
+});
+photoInput.addEventListener('change', () => {
+  const file = photoInput.files[0];
+  const reader = new FileReader();
+  reader.onload = () => {
+    photo.src = reader.result;
+    toggleBtn.disabled = false;
+  };
+  reader.readAsDataURL(file);
+});
+toggleBtn.addEventListener('click', () => {
+  capturing = !capturing;
+  if (capturing) {
+    photoToAscii();
+    toggleBtn.textContent = 'Stop ASCII Conversion';
+  } else {
+    asciiArt.innerHTML = '';
+    toggleBtn.textContent = 'Start ASCII Conversion';
+  }
+});
+copyTextBtn.addEventListener('click', () => {
+  const tempTextarea = document.createElement('textarea');
+  tempTextarea.value = asciiArt.innerText;
+  document.body.appendChild(tempTextarea);
+  tempTextarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(tempTextarea);
+  alert('ASCII art copied to clipboard!');
+});
+charSelect.addEventListener('change', photoToAscii);
+charTypeSelect.addEventListener('change', photoToAscii);
+colorModeSelect.addEventListener('change', photoToAscii);
+resolutionInput.addEventListener('input', photoToAscii);
+</script>
+</body></html>

cYUneFx9tfHZWLOXx.html ADDED Viewed

	@@ -0,0 +1,188 @@

+<html><head><base href="/draw"><title>Wackcom Drawing Labs - Interactive Canvas</title>
+<style>
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f0f5ff;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.header {
+  background-color: #3498db;
+  color: white;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.logo {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+.main-content {
+  display: flex;
+  flex-grow: 1;
+}
+.toolbar {
+  width: 200px;
+  background-color: #f9f9f9;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.canvas-container {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+}
+canvas {
+  border: 1px solid #ddd;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+button {
+  padding: 10px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+button:hover {
+  background-color: #2980b9;
+}
+.color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.color-swatch {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.brush-size {
+  display: flex;
+  align-items: center;
+}
+#brushSize {
+  width: 100%;
+}
+.ai-tools {
+  margin-top: 20px;
+}
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="logo">Wackcom Drawing Labs</div>
+  <button id="saveBtn">Save Artwork</button>
+</div>
+<div class="main-content">
+  <div class="toolbar">
+    <button id="pencilBtn">Pencil</button>
+    <button id="brushBtn">Brush</button>
+    <button id="eraserBtn">Eraser</button>
+    <div class="color-picker">
+      <div class="color-swatch" style="background-color: #000000;"></div>
+      <div class="color-swatch" style="background-color: #ff0000;"></div>
+      <div class="color-swatch" style="background-color: #00ff00;"></div>
+      <div class="color-swatch" style="background-color: #0000ff;"></div>
+      <div class="color-swatch" style="background-color: #ffff00;"></div>
+      <div class="color-swatch" style="background-color: #ff00ff;"></div>
+    </div>
+    <div class="brush-size">
+      <label for="brushSize">Brush Size:</label>
+      <input type="range" id="brushSize" min="1" max="50" value="5">
+    </div>
+    <button id="clearBtn">Clear Canvas</button>
+    <div class="ai-tools">
+      <button id="aiStyleBtn">AI Style Transfer</button>
+      <button id="aiCompleteBtn">AI Auto-Complete</button>
+    </div>
+  </div>
+  <div class="canvas-container">
+    <canvas id="drawingCanvas" width="800" height="600"></canvas>
+  </div>
+</div>
+<script>
+const canvas = document.getElementById('drawingCanvas');
+const ctx = canvas.getContext('2d');
+let isDrawing = false;
+let currentTool = 'pencil';
+let currentColor = '#000000';
+let currentSize = 5;
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', stopDrawing);
+canvas.addEventListener('mouseout', stopDrawing);
+function startDrawing(e) {
+  isDrawing = true;
+  draw(e);
+}
+function draw(e) {
+  if (!isDrawing) return;
+  ctx.strokeStyle = currentColor;
+  ctx.lineWidth = currentSize;
+  ctx.lineCap = 'round';
+  ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+}
+function stopDrawing() {
+  isDrawing = false;
+  ctx.beginPath();
+}
+document.getElementById('pencilBtn').addEventListener('click', () => currentTool = 'pencil');
+document.getElementById('brushBtn').addEventListener('click', () => currentTool = 'brush');
+document.getElementById('eraserBtn').addEventListener('click', () => {
+  currentTool = 'eraser';
+  currentColor = '#ffffff';
+});
+document.querySelectorAll('.color-swatch').forEach(swatch => {
+  swatch.addEventListener('click', (e) => {
+    currentColor = e.target.style.backgroundColor;
+  });
+});
+document.getElementById('brushSize').addEventListener('input', (e) => {
+  currentSize = e.target.value;
+});
+document.getElementById('clearBtn').addEventListener('click', () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
+document.getElementById('saveBtn').addEventListener('click', () => {
+  const link = document.createElement('a');
+  link.download = 'wackcom-masterpiece.png';
+  link.href = canvas.toDataURL();
+  link.click();
+});
+document.getElementById('aiStyleBtn').addEventListener('click', () => {
+  alert('AI Style Transfer feature coming soon!');
+});
+document.getElementById('aiCompleteBtn').addEventListener('click', () => {
+  alert('AI Auto-Complete feature coming soon!');
+});
+</script>
+</body>
+</html>

hbmKkWX8sB2tRrYlW.html ADDED Viewed

	@@ -0,0 +1,399 @@

+<html><head><base href="<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Wireframe Screams from Beyond</title>
+  <base href="simul://3D.resonance.io/chladni-plate/visualizer?show_custom_param=true&add=binaural-wave-generator">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    body {
+      margin: 0;
+      background-color: #000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      color: #fff;
+    }
+    canvas {
+      display: block;
+      width: 80%;
+      height: 80%;
+    }
+    .control-panel {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 8px;
+      color: #fff;
+      font-family: 'Courier New', Courier, monospace;
+    }
+    .control-panel label, .control-panel input {
+      margin: 5px;
+    }
+    .visualization-buttons {
+      position: fixed;
+      top: 50%;
+      left: 20px;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+    }
+    .visualization-buttons button {
+      background: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      border: none;
+      padding: 10px;
+      margin: 5px;
+      cursor: pointer;
+      font-family: 'Courier New', Courier, monospace;
+    }
+    .visualization-buttons button.active {
+      background: rgba(34, 255, 34, 0.7);
+    }
+    .axis-controls {
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 8px;
+      color: #fff;
+    }
+    .axis-controls div {
+      margin: 0 10px;
+    }
+    .axis-controls label {
+      display: block;
+    }
+    .color-pickers {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: flex;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 8px;
+    }
+    .color-pickers input {
+      margin: 0 5px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      cursor: pointer;
+    }
+    .anaglyph-button {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      border: none;
+      padding: 10px;
+      cursor: pointer;
+      font-family: 'Courier New', Courier, monospace;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/examples/js/controls/OrbitControls.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/examples/js/effects/AnaglyphEffect.js"></script>
+</head>
+<body>
+  <div class="axis-controls">
+    <div>
+      <label for="x-axis">X:</label>
+      <input type="number" id="x-axis" min="-5" max="5" step="0.1" value="0" oninput="updateXAxis(this.value)">
+    </div>
+    <div>
+      <label for="y-axis">Y:</label>
+      <input type="number" id="y-axis" min="-5" max="5" step="0.1" value="0" oninput="updateYAxis(this.value)">
+    </div>
+    <div>
+      <label for="z-axis">Z:</label>
+      <input type="number" id="z-axis" min="-5" max="5" step="0.1" value="0" oninput="updateZAxis(this.value)">
+    </div>
+    <div>
+      <label for="p-axis">P:</label>
+      <input type="number" id="p-axis" min="0" max="10" step="0.1" value="0" oninput="updatePAxis(this.value)">
+    </div>
+  </div>
+  <div class="control-panel">
+    <label for="frequency-slider">Frequency:</label>
+    <input type="range" id="frequency-slider" min="1" max="2000" step="1" value="100" oninput="updateFrequency(this.value)">
+    <label for="amplitude-slider">Amplitude:</label>
+    <input type="range" id="amplitude-slider" min="0" max="10" step="0.1" value="1" oninput="updateAmplitude(this.value)">
+    <label for="binaural-frequency">Binaural Beat Frequency:</label>
+    <input type="range" id="binaural-frequency" min="1" max="40" step="0.1" value="10" oninput="updateBinauralFrequency(this.value)">
+    <label for="color-lfo-frequency">Color LFO Frequency:</label>
+    <input type="range" id="color-lfo-frequency" min="0.1" max="10" step="0.1" value="1" oninput="updateColorLFOFrequency(this.value)">
+    <label for="volume-slider">Volume:</label>
+    <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.1" oninput="updateVolume(this.value)">
+  </div>
+  <div class="color-pickers">
+    <input type="color" id="color1" value="#22ff22" oninput="updateColor1(this.value)">
+    <input type="color" id="color2" value="#2222ff" oninput="updateColor2(this.value)">
+    <input type="color" id="color3" value="#ff22ff" oninput="updateColor3(this.value)">
+  </div>
+  <div class="visualization-buttons">
+    <button id="chladni-button" class="active" onclick="setVisualizationMode('chladni')">Chladni</button>
+    <button id="ripple-button" onclick="setVisualizationMode('ripple')">Ripple</button>
+    <button id="spiral-button" onclick="setVisualizationMode('spiral')">Spiral</button>
+    <button id="fractal-button" onclick="setVisualizationMode('fractal')">Fractal</button>
+    <button id="vortex-button" onclick="setVisualizationMode('vortex')">Vortex</button>
+    <button id="plasma-button" onclick="setVisualizationMode('plasma')">Plasma</button>
+  </div>
+  <button class="anaglyph-button" onclick="toggleAnaglyphMode()">Toggle Anaglyph Mode</button>
+  <canvas id="chladniCanvas"></canvas>
+  <script>
+    let scene, camera, renderer, chladniSurface, effect;
+    let frequency = 100, amplitude = 1, binauralFrequency = 10, colorLFOFrequency = 1;
+    let audioContext, binauralOscillator1, binauralOscillator2, gainNode;
+    let color1, color2, color3, anaglyphColor1, anaglyphColor2;
+    let visualizationMode = 'chladni';
+    let xAxis = 0, yAxis = 0, zAxis = 0, pAxis = 0;
+    let isAnaglyphMode = false;
+    function resizeCanvas() {
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+    }
+    function initializeAudio() {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      gainNode = audioContext.createGain();
+      gainNode.gain.value = 0.1;
+      binauralOscillator1 = audioContext.createOscillator();
+      binauralOscillator2 = audioContext.createOscillator();
+      binauralOscillator1.frequency.setValueAtTime(200, audioContext.currentTime);
+      binauralOscillator2.frequency.setValueAtTime(200 + binauralFrequency, audioContext.currentTime);
+      binauralOscillator1.connect(gainNode).connect(audioContext.destination);
+      binauralOscillator2.connect(gainNode).connect(audioContext.destination);
+      binauralOscillator1.start();
+      binauralOscillator2.start();
+    }
+    function updateBinauralFrequency(value) {
+      binauralFrequency = parseFloat(value);
+      binauralOscillator2.frequency.setValueAtTime(200 + binauralFrequency, audioContext.currentTime);
+    }
+    function updateColorLFOFrequency(value) {
+      colorLFOFrequency = parseFloat(value);
+    }
+    function updateVolume(value) {
+      gainNode.gain.value = parseFloat(value);
+    }
+    function init() {
+      scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x000000);
+      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+      camera.position.z = 5;
+      renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('chladniCanvas') });
+      resizeCanvas();
+      window.addEventListener('resize', resizeCanvas);
+      effect = new THREE.AnaglyphEffect(renderer);
+      effect.setSize(window.innerWidth, window.innerHeight);
+      let controls = new THREE.OrbitControls(camera, renderer.domElement);
+      color1 = new THREE.Color(0x22ff22);
+      color2 = new THREE.Color(0x2222ff);
+      color3 = new THREE.Color(0xff22ff);
+      anaglyphColor1 = new THREE.Color(0x00ffff); // cyan
+      anaglyphColor2 = new THREE.Color(0xff0000); // red
+      createChladniSurface();
+      initializeAudio();
+      function animate() {
+        requestAnimationFrame(animate);
+        if (!isAnaglyphMode) updateVisualization();
+        else updateAnaglyphVisualization();
+        if (isAnaglyphMode) {
+          effect.render(scene, camera);
+        } else {
+          renderer.render(scene, camera);
+        }
+      }
+      animate();
+    }
+    function createChladniSurface() {
+      let geometry = new THREE.PlaneGeometry(5, 5, 100, 100);
+      let material = new THREE.MeshBasicMaterial({ color: 0x22ff22, wireframe: true });
+      chladniSurface = new THREE.Mesh(geometry, material);
+      scene.add(chladniSurface);
+    }
+    function updateVisualization() {
+      let positions = chladniSurface.geometry.attributes.position.array;
+      let t = Date.now() / 1000;
+      let lerpFactor = (Math.sin(t * colorLFOFrequency) + 1) / 2;
+      let currentColor = new THREE.Color().lerpColors(color1, color2, lerpFactor).lerpHSL(color3, lerpFactor);
+      chladniSurface.material.color = currentColor;
+      for (let i = 0; i < positions.length; i += 3) {
+        let x = positions[i] + xAxis;
+        let y = positions[i + 1] + yAxis;
+        let z;
+        if (visualizationMode === 'chladni') {
+          z = Math.sin(Math.sqrt((x * x + y * y) * (frequency + binauralFrequency)) - t) * amplitude + zAxis;
+        } else if (visualizationMode === 'ripple') {
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin((distance - t * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'spiral') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin((distance - t * 5 + angle * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'fractal') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin(distance * Math.log(distance) * (frequency + binauralFrequency) - t) * amplitude + zAxis;
+        } else if (visualizationMode === 'vortex') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin((angle * 10 - distance * 2 - t * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'plasma') {
+          z = Math.sin((x + t) * (frequency + binauralFrequency) / 50)
+            + Math.sin((y + t) * (frequency + binauralFrequency) / 50) * amplitude + zAxis;
+        }
+        z += Math.sin(t * pAxis) * 0.1;
+        positions[i + 2] = z;
+      }
+      chladniSurface.geometry.attributes.position.needsUpdate = true;
+    }
+    function updateAnaglyphVisualization() {
+      let positions = chladniSurface.geometry.attributes.position.array;
+      let currentColor = anaglyphColor1;
+      chladniSurface.material.color = currentColor;
+      for (let i = 0; i < positions.length; i += 3) {
+        let x = positions[i] + xAxis;
+        let y = positions[i + 1] + yAxis;
+        let z;
+        if (visualizationMode === 'chladni') {
+          z = Math.sin(Math.sqrt((x * x + y * y) * (frequency + binauralFrequency)) - (Date.now() / 1000)) * amplitude + zAxis;
+        } else if (visualizationMode === 'ripple') {
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin((distance - (Date.now() / 1000) * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'spiral') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);          z = Math.sin((distance - (Date.now() / 1000) * 5 + angle * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'fractal') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin(distance * Math.log(distance) * (frequency + binauralFrequency) - (Date.now() / 1000)) * amplitude + zAxis;
+        } else if (visualizationMode === 'vortex') {
+          let angle = Math.atan2(y, x);
+          let distance = Math.sqrt(x * x + y * y);
+          z = Math.sin((angle * 10 - distance * 2 - (Date.now() / 1000) * 5) * (frequency + binauralFrequency) / 100) * amplitude + zAxis;
+        } else if (visualizationMode === 'plasma') {
+          z = Math.sin((x + (Date.now() / 1000)) * (frequency + binauralFrequency) / 50)
+            + Math.sin((y + (Date.now() / 1000)) * (frequency + binauralFrequency) / 50) * amplitude + zAxis;
+        }
+        z += Math.sin((Date.now() / 1000) * pAxis) * 0.1;
+        positions[i + 2] = z;
+      }
+      chladniSurface.geometry.attributes.position.needsUpdate = true;
+    }
+    function updateFrequency(value) {
+      frequency = parseFloat(value);
+    }
+    function updateAmplitude(value) {
+      amplitude = parseFloat(value);
+    }
+    function setVisualizationMode(mode) {
+      visualizationMode = mode;
+      document.querySelectorAll('.visualization-buttons button').forEach(button => {
+        button.classList.toggle('active', button.id === `${mode}-button`);
+      });
+    }
+    function updateColor1(value) {
+      color1.set(value);
+    }
+    function updateColor2(value) {
+      color2.set(value);
+    }
+    function updateColor3(value) {
+      color3.set(value);
+    }
+    function updateXAxis(value) {
+      xAxis = parseFloat(value);
+    }
+    function updateYAxis(value) {
+      yAxis = parseFloat(value);
+    }
+    function updateZAxis(value) {
+      zAxis = parseFloat(value);
+    }
+    function updatePAxis(value) {
+      pAxis = parseFloat(value);
+    }
+    function toggleAnaglyphMode() {
+      isAnaglyphMode = !isAnaglyphMode;
+      document.getElementById('color1').disabled = isAnaglyphMode;
+      document.getElementById('color2').disabled = isAnaglyphMode;
+      document.getElementById('color3').disabled = isAnaglyphMode;
+      document.getElementById('color-lfo-frequency').disabled = isAnaglyphMode;
+    }
+    window.onload = init;
+  </script>
+</body>
+</html>

jDnGYMx9M566RB31a.html ADDED Viewed

	@@ -0,0 +1,300 @@

+<html><head><base href="https://piano.midi/webmidi@latest/flex-horizontal/use-event.note.name+event.note.octave__not.value/in_getKeys_just_do_straight_comparison/whiteKeys_and_blackKeys_are_nodeLists_not_arrays/position_fix_keyboard_above_text/playable-with-mouse-too/hide<comments>and<links>/drop_piano_2_octaves/abnormify_sound/push_audio_creativity/explore_tonejs_instruments/drop_piano_decibels_by_10/add_higher_octave/hush_comments"><title>Sonic Artistry</title>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background: radial-gradient(circle at center, #111, #333);
+  color: #fff;
+  font-family: monospace;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+#instrumentSelector {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+}
+#keyboardContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+.key {
+  width: 50px;
+  height: 200px;
+  background: linear-gradient(to bottom, #eee, #ccc);
+  border: 1px solid #000;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.2s;
+  position: relative;
+  transform-style: preserve-3d;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 10px;
+  font-size: 12px;
+}
+.key::after {
+  content: attr(data-note);
+}
+.key.black {
+  width: 30px;
+  height: 120px;
+  background: linear-gradient(to bottom, #555, #222);
+  margin-right: -15px;
+  margin-left: -15px;
+  z-index: 1;
+}
+.key:hover {
+  background: linear-gradient(to bottom, #ddd, #bbb);
+}
+.key.black:hover {
+  background: linear-gradient(to bottom, #777, #444);
+}
+.key.pressed {
+  background: linear-gradient(to bottom, #ccc, #aaa);
+  transform: translateZ(20px);
+}
+.key.black.pressed {
+  background: linear-gradient(to bottom, #666, #333);
+  transform: translateZ(20px);
+}
+.key::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  opacity: 0;
+  transition: width 0.2s, height 0.2s, opacity 0.2s;
+}
+.key.pressed::before {
+  width: 100px;
+  height: 100px;
+  opacity: 1;
+}
+.key.black::before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>
+</head>
+<body>
+<div id="instrumentSelector">
+  <label for="instrumentSelect">Select Instrument:</label>
+  <select id="instrumentSelect">
+    <option value="AMSynth">AM Synth</option>
+    <option value="FMSynth">FM Synth</option>
+    <option value="DuoSynth">Duo Synth</option>
+    <option value="MonoSynth">Mono Synth</option>
+    <option value="PluckSynth">Pluck Synth</option>
+    <option value="Membrane">Membrane Synth</option>
+    <option value="MetalSynth">Metal Synth</option>
+    <option value="NoiseSynth">Noise Synth</option>
+  </select>
+</div>
+<div id="keyboardContainer">
+  <div class="key white" data-note="C2" data-midi="36"></div>
+  <div class="key black" data-note="C#2" data-midi="37"></div>
+  <div class="key white" data-note="D2" data-midi="38"></div>
+  <div class="key black" data-note="D#2" data-midi="39"></div>
+  <div class="key white" data-note="E2" data-midi="40"></div>
+  <div class="key white" data-note="F2" data-midi="41"></div>
+  <div class="key black" data-note="F#2" data-midi="42"></div>
+  <div class="key white" data-note="G2" data-midi="43"></div>
+  <div class="key black" data-note="G#2" data-midi="44"></div>
+  <div class="key white" data-note="A2" data-midi="45"></div>
+  <div class="key black" data-note="A#2" data-midi="46"></div>
+  <div class="key white" data-note="B2" data-midi="47"></div>
+  <div class="key white" data-note="C3" data-midi="48"></div>
+  <div class="key black" data-note="C#3" data-midi="49"></div>
+  <div class="key white" data-note="D3" data-midi="50"></div>
+  <div class="key black" data-note="D#3" data-midi="51"></div>
+  <div class="key white" data-note="E3" data-midi="52"></div>
+  <div class="key white" data-note="F3" data-midi="53"></div>
+  <div class="key black" data-note="F#3" data-midi="54"></div>
+  <div class="key white" data-note="G3" data-midi="55"></div>
+  <div class="key black" data-note="G#3" data-midi="56"></div>
+  <div class="key white" data-note="A3" data-midi="57"></div>
+  <div class="key black" data-note="A#3" data-midi="58"></div>
+  <div class="key white" data-note="B3" data-midi="59"></div>
+  <div class="key white" data-note="C4" data-midi="60"></div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.min.js"></script>
+<script>
+  const whiteKeys = document.querySelectorAll('.key.white');
+  const blackKeys = document.querySelectorAll('.key.black');
+  const instrumentSelect = document.getElementById('instrumentSelect');
+  let synth;
+  const reverb = new Tone.Reverb({ decay: 5, wet: 0.5 }).toDestination();
+  const delay = new Tone.FeedbackDelay({ delayTime: 0.5, feedback: 0.25, wet: 0.25 }).toDestination();
+  function initSynth(instrumentType) {
+    if (synth) {
+      synth.disconnect();
+    }
+    switch (instrumentType) {
+      case 'AMSynth':
+        synth = new Tone.PolySynth(Tone.AMSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'FMSynth':
+        synth = new Tone.PolySynth(Tone.FMSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'DuoSynth':
+        synth = new Tone.PolySynth(Tone.DuoSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'MonoSynth':
+        synth = new Tone.MonoSynth({ volume: -10 }).toDestination();
+        break;
+      case 'PluckSynth':
+        synth = new Tone.PluckSynth({ volume: -10 }).toDestination();
+        break;
+      case 'Membrane':
+        synth = new Tone.PolySynth(Tone.MembraneSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'MetalSynth':
+        synth = new Tone.PolySynth(Tone.MetalSynth, { polyphony: 32, volume: -10 }).toDestination();
+        break;
+      case 'NoiseSynth':
+        synth = new Tone.NoiseSynth({ volume: -10 }).toDestination();
+        break;
+      default:
+        synth = new Tone.PolySynth(Tone.AMSynth, { polyphony: 32, volume: -10 }).toDestination();
+    }
+    synth.connect(reverb);
+    synth.connect(delay);
+  }
+  initSynth(instrumentSelect.value);
+  instrumentSelect.addEventListener('change', (event) => {
+    initSynth(event.target.value);
+  });
+  let midiAccess, midiInput;
+  WebMidi.enable(err => {
+    if (err) {
+      console.error('Failed to enable WebMIDI:', err);
+      return;
+    }
+    console.log('WebMIDI enabled!');
+    midiInput = WebMidi.inputs[0];
+    if (!midiInput) {
+      console.warn('No MIDI input device detected.');
+      return;
+    }
+    console.log(`Connected to MIDI input device: ${midiInput.name}`);
+    midiInput.addListener('noteon', 'all', event => {
+      const midiNoteValue = `${event.note.name}${event.note.octave}`;
+      handleNoteOn(midiNoteValue, event.velocity / 127);
+    });
+    midiInput.addListener('noteoff', 'all', event => {
+      const midiNoteValue = `${event.note.name}${event.note.octave}`;
+      handleNoteOff(midiNoteValue);
+    });
+  });
+  function handleNoteOn(midiNoteValue, velocity) {
+    const whiteKey = Array.from(whiteKeys).find(key => key.dataset.note === midiNoteValue);
+    const blackKey = Array.from(blackKeys).find(key => key.dataset.note === midiNoteValue);
+    if (whiteKey) {
+      whiteKey.classList.add('pressed');
+      synth.triggerAttack(noteToFrequency(whiteKey.dataset.midi), velocity);
+    } else if (blackKey) {
+      blackKey.classList.add('pressed');
+      synth.triggerAttack(noteToFrequency(blackKey.dataset.midi), velocity);
+    }
+  }
+  function handleNoteOff(midiNoteValue) {
+    const whiteKey = Array.from(whiteKeys).find(key => key.dataset.note === midiNoteValue);
+    const blackKey = Array.from(blackKeys).find(key => key.dataset.note === midiNoteValue);
+    if (whiteKey) {
+      whiteKey.classList.remove('pressed');
+      synth.triggerRelease(noteToFrequency(whiteKey.dataset.midi));
+    } else if (blackKey) {
+      blackKey.classList.remove('pressed');
+      synth.triggerRelease(noteToFrequency(blackKey.dataset.midi));
+    }
+  }
+  function whiteKeyMouseDown(event) {
+    const key = event.target;
+    key.classList.add('pressed');
+    synth.triggerAttack(noteToFrequency(key.dataset.midi), 0.5);
+  }
+  function whiteKeyMouseUp(event) {
+    const key = event.target;
+    key.classList.remove('pressed');
+    synth.triggerRelease(noteToFrequency(key.dataset.midi));
+  }
+  function blackKeyMouseDown(event) {
+    const key = event.target;
+    key.classList.add('pressed');
+    synth.triggerAttack(noteToFrequency(key.dataset.midi), 0.5);
+  }
+  function blackKeyMouseUp(event) {
+    const key = event.target;
+    key.classList.remove('pressed');
+    synth.triggerRelease(noteToFrequency(key.dataset.midi));
+  }
+  whiteKeys.forEach(key => {
+    key.addEventListener('mousedown', whiteKeyMouseDown);
+    key.addEventListener('mouseup', whiteKeyMouseUp);
+    key.addEventListener('mouseleave', whiteKeyMouseUp);
+  });
+  blackKeys.forEach(key => {
+    key.addEventListener('mousedown', blackKeyMouseDown);
+    key.addEventListener('mouseup', blackKeyMouseUp);
+    key.addEventListener('mouseleave', blackKeyMouseUp);
+  });
+  function noteToFrequency(note) {
+    const baseFrequency = 440;
+    return baseFrequency * Math.pow(2, (note - 69) / 12);
+  }
+</script>
+</body>
+</html>

mIvBgUJS6Lekllndg.html ADDED Viewed

	@@ -0,0 +1,402 @@

+<html><head><base href="websim://surreal-sensation/jimson-weed-hallucination?world-distortion=true&kaleidoscope-vision=true&ambient-sound=warped&shifting-sensations=extreme&real-unreal=blurred&return-to-reality=gradual"><title>Waveform Sim</title>
+<style>
+body {
+   background: black;
+   color: #e8f3ef;
+   font-family: 'Lucida Handwriting', cursive;
+   text-shadow: 0 0 10px #00FF00;
+   margin: 0;
+   height: 100vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+#dreamscape {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  filter: hue-rotate(180deg);
+  opacity: 0.8;
+  background-size: cover;
+  background-repeat: repeat;
+  animation: swirl 5s linear infinite, morph 10s ease-in-out infinite alternate, warp 15s linear infinite;
+  transform: perspective(500px) scale(1);
+}
+@keyframes swirl {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes morph {
+  0% {
+    border-radius: 30% 70% 70% 30% / 50% 30% 70% 50%;
+  }
+  100% {
+    border-radius: 64% 36% 35% 65% / 34% 62% 38% 66%;
+  }
+}
+@keyframes warp {
+  0% {
+    transform: perspective(500px) scale(1) rotateX(5deg);
+  }
+  50% {
+    transform: perspective(500px) scale(1.2) rotateX(-5deg);
+  }
+  100% {
+    transform: perspective(500px) scale(0.8) rotateX(5deg);
+  }
+}
+#controls {
+  position: absolute;
+  bottom: 0;
+  background: rgba(0,0,0,0.8);
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+button {
+  background: #000;
+  color: #0f0;
+  border: 1px solid #0f0;
+  padding: 5px 10px;
+  margin: 5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  background: #0f0;
+  color: #000;
+}
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 5px;
+  width: 120px;
+  display: inline-block;
+  vertical-align: middle;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 3px;
+  cursor: pointer;
+  background: #008080;
+}
+input[type=range]::-webkit-slider-thumb {
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+  background: #40E0D0;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #008080;
+}
+.param {
+  display: inline-block;
+  margin: 5px;
+  vertical-align: middle;
+  text-align: center;
+}
+.param span {
+  display: block;
+  color: #40E0D0;
+  font-size: 12px;
+}
+.param-value {
+  display: inline-block;
+  width: 40px;
+  text-align: center;
+  font-size: 12px;
+  margin-left: 5px;
+  vertical-align: middle;
+  color: #ff0;
+}
+#oscilloscope-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 120px;
+  border: 1px solid #008080;
+}
+#oscilloscope {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<script>
+let audioCtx, oscillator, gainNode, distortion, reverb, biquadFilter, lfo;
+let analyser, oscilloscopeCtx;
+const dreamscape = document.getElementById('dreamscape');
+function startAudio() {
+  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  oscillator = audioCtx.createOscillator();
+  gainNode = audioCtx.createGain();
+  lfo = audioCtx.createOscillator();
+  oscillator.connect(gainNode);
+  lfo.connect(gainNode.gain);
+  distortion = audioCtx.createWaveShaper();
+  distortion.oversample = '4x';
+  gainNode.connect(distortion);
+  reverb = audioCtx.createConvolver();
+  distortion.connect(reverb);
+  biquadFilter = audioCtx.createBiquadFilter();
+  reverb.connect(biquadFilter).connect(audioCtx.destination);
+  oscilloscopeCtx = oscilloscope.getContext('2d');
+  analyser = audioCtx.createAnalyser();
+  biquadFilter.connect(analyser);
+  oscillator.start();
+  lfo.start();
+  updateParams();
+  renderOscilloscope();
+}
+function stopAudio() {
+  oscillator.stop();
+  lfo.stop();
+}
+function changeWaveType(type) {
+  oscillator.type = type;
+}
+function updateParams() {
+  oscillator.frequency.setValueAtTime(freq.value, audioCtx.currentTime);
+  oscillator.detune.setValueAtTime(detune.value, audioCtx.currentTime);
+  gainNode.gain.setValueAtTime(gain.value, audioCtx.currentTime);
+  distortion.curve = makeDistortionCurve(distortionAmount.value);
+  distortion.oversample = oversample.value;
+  reverb.buffer = impulseResponse(reverbTime.value, reverbDecay.value);
+  biquadFilter.type = filterType.value;
+  biquadFilter.frequency.setValueAtTime(filterFreq.value, audioCtx.currentTime);
+  biquadFilter.Q.setValueAtTime(filterQ.value, audioCtx.currentTime);
+  lfo.type = lfoType.value;
+  lfo.frequency.setValueAtTime(lfoFreq.value, audioCtx.currentTime);
+  freqValue.textContent = freq.value + ' Hz';
+  detuneValue.textContent = detune.value + ' cents';
+  gainValue.textContent = gain.value;
+  distortionValue.textContent = distortionAmount.value;
+  oversampleValue.textContent = oversample.value;
+  reverbTimeValue.textContent = reverbTime.value + ' s';
+  reverbDecayValue.textContent = reverbDecay.value;
+  filterFreqValue.textContent = filterFreq.value + ' Hz';
+  filterQValue.textContent = filterQ.value;
+  lfoFreqValue.textContent = lfoFreq.value + ' Hz';
+}
+function impulseResponse(duration, decay) {
+  const sampleRate = audioCtx.sampleRate;
+  const length = sampleRate * duration;
+  const impulse = audioCtx.createBuffer(2, length, sampleRate);
+  const impulseL = impulse.getChannelData(0);
+  const impulseR = impulse.getChannelData(1);
+  for (let i = 0; i < length; i++) {
+      impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
+      impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
+  }
+  return impulse;
+}
+function makeDistortionCurve(amount) {
+  const n_samples = 44100;
+  const curve = new Float32Array(n_samples);
+  const deg = Math.PI / 180;
+  for (let i = 0 ; i < n_samples; ++i ) {
+    let x = i * 2 / n_samples - 1;
+    curve[i] = (3 + amount) * x * 20 * deg / (Math.PI + amount * Math.abs(x));
+  }
+  return curve;
+}
+function changeBgGradient(startColor, endColor) {
+  dreamscape.style.backgroundImage = `linear-gradient(45deg, ${startColor}, ${endColor})`;
+}
+function renderOscilloscope() {
+  requestAnimationFrame(renderOscilloscope);
+  const bufferLength = analyser.frequencyBinCount;
+  const dataArray = new Uint8Array(bufferLength);
+  analyser.getByteTimeDomainData(dataArray);
+  oscilloscopeCtx.fillStyle = 'rgb(0, 0, 0)';
+  oscilloscopeCtx.fillRect(0, 0, oscilloscope.width, oscilloscope.height);
+  oscilloscopeCtx.lineWidth = 2;
+  oscilloscopeCtx.strokeStyle = 'rgb(0, 255, 0)';
+  oscilloscopeCtx.beginPath();
+  const sliceWidth = oscilloscope.width * 1.0 / bufferLength;
+  let x = 0;
+  for (let i = 0; i < bufferLength; i++) {
+    const v = dataArray[i] / 128.0;
+    const y = v * oscilloscope.height/2;
+    if (i === 0) {
+      oscilloscopeCtx.moveTo(x, y);
+    } else {
+      oscilloscopeCtx.lineTo(x, y);
+    }
+    x += sliceWidth;
+  }
+  oscilloscopeCtx.lineTo(oscilloscope.width, oscilloscope.height/2);
+  oscilloscopeCtx.stroke();
+}
+</script>
+</head>
+<body>
+<div id="dreamscape"></div>
+<div id="oscilloscope-container">
+  <canvas id="oscilloscope"></canvas>
+</div>
+<div id="controls">
+  <button id="start" onclick="startAudio()">Start</button>
+  <button id="stop" onclick="stopAudio()">Stop</button>
+  <select id="waveType" onchange="changeWaveType(this.value)">
+    <option value="sine">Sine</option>
+    <option value="square">Square</option>
+    <option value="sawtooth">Sawtooth</option>
+    <option value="triangle">Triangle</option>
+  </select>
+  <div class="param">
+    <input id="freq" type="range" min="20" max="1500" value="110" step="1" oninput="updateParams()">
+    <span>Frequency</span>
+    <span id="freqValue" class="param-value">110 Hz</span>
+  </div>
+  <div class="param">
+    <input id="detune" type="range" min="-100" max="100" value="0" step="1" oninput="updateParams()">
+    <span>Detune</span>
+    <span id="detuneValue" class="param-value">0 cents</span>
+  </div>
+  <div class="param">
+    <input id="gain" type="range" min="0" max="1" value="0.6" step="0.01" oninput="updateParams()">
+    <span>Volume</span>
+    <span id="gainValue" class="param-value">0.6</span>
+  </div>
+  <div class="param">
+    <input id="distortionAmount" type="range" min="0" max="1000" value="50" step="1" oninput="updateParams()">
+    <span>Distortion</span>
+    <span id="distortionValue" class="param-value">50</span>
+  </div>
+  <div class="param">
+    <select id="oversample" oninput="updateParams()">
+      <option value="none">none</option>
+      <option value="2x">2x</option>
+      <option value="4x" selected>4x</option>
+    </select>
+    <span>Oversample</span>
+    <span id="oversampleValue" class="param-value">4x</span>
+  </div>
+  <div class="param">
+    <input id="reverbTime" type="range" min="0.1" max="10" value="2" step="0.1" oninput="updateParams()">
+    <span>Reverb Time</span>
+    <span id="reverbTimeValue" class="param-value">2 s</span>
+  </div>
+  <div class="param">
+    <input id="reverbDecay" type="range" min="0.1" max="5" value="2" step="0.1" oninput="updateParams()">
+    <span>Reverb Decay</span>
+    <span id="reverbDecayValue" class="param-value">2</span>
+  </div>
+  <div class="param">
+    <select id="filterType" oninput="updateParams()">
+      <option value="lowpass">Low Pass</option>
+      <option value="highpass">High Pass</option>
+      <option value="bandpass">Band Pass</option>
+      <option value="lowshelf">Low Shelf</option>
+      <option value="highshelf">High Shelf</option>
+      <option value="peaking">Peaking</option>
+      <option value="notch">Notch</option>
+      <option value="allpass">All Pass</option>
+    </select>
+    <span>Filter Type</span>
+  </div>
+  <div class="param">
+    <input id="filterFreq" type="range" min="20" max="10000" value="1000" step="1" oninput="updateParams()">
+    <span>Filter Frequency</span>
+    <span id="filterFreqValue" class="param-value">1000 Hz</span>
+  </div>
+  <div class="param">
+    <input id="filterQ" type="range" min="0.01" max="10" value="1" step="0.01" oninput="updateParams()">
+    <span>Filter Q</span>
+    <span id="filterQValue" class="param-value">1</span>
+  </div>
+  <div class="param">
+    <select id="lfoType" oninput="updateParams()">
+      <option value="sine">Sine</option>
+      <option value="square">Square</option>
+      <option value="sawtooth">Sawtooth</option>
+      <option value="triangle">Triangle</option>
+    </select>
+    <span>LFO Type</span>
+  </div>
+  <div class="param">
+    <input id="lfoFreq" type="range" min="0.01" max="30" value="5" step="0.01" oninput="updateParams()">
+    <span>LFO Frequency</span>
+    <span id="lfoFreqValue" class="param-value">5 Hz</span>
+  </div>
+  <button onclick="changeBgGradient('purple', 'black')">Purple Haze</button>
+  <button onclick="changeBgGradient('navy', 'darkgreen')">Deep Forest</button>
+</div>
+</body>
+</html>

nbF9hbyzb3g7zW60m.html ADDED Viewed

	@@ -0,0 +1,348 @@

+<html><head><base href="trippy://psychedelic-experience/asmr-generator"><title>ASMR Sound Bath & Visual Journey</title>
+<style>
+  body {
+    background: #000;
+    color: #FFF;
+    font-family: 'Courier New', monospace;
+    margin: 0;
+    overflow: hidden;
+    font-size: 18px;
+  }
+  #container {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #controls {
+    background: rgba(0,0,0,0.5);
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid #FF00FF;
+    box-shadow: 0 0 10px #00FFFF;
+  }
+  label, select, input {
+    display: block;
+    margin: 10px 0;
+  }
+  select {
+    background: black;
+    color: white;
+    border: none;
+    font-size: 16px;
+    height: 30px;
+    padding: 5px;
+    width: 150px;
+  }
+  input[type=range] {
+    width: 100%;
+    margin: 5.8px 0;
+    background-color: transparent;
+    -webkit-appearance: none;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    background: #00FFFF;
+    border: 0;
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    margin-top: -5.8px;
+    width: 20px;
+    height: 20px;
+    background: #FF00FF;
+    border: 1px solid #FFFFFF;
+    border-radius: 10px;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
+  #visuals {
+    position: fixed;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @keyframes morph {
+    0% {border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;}
+    50% {border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;}
+    100% {border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;}
+  }
+  #blob {
+    background-color: #00FF00;
+    animation: morph 15s ease-in-out infinite;
+    height: 400px;
+    aspect-ratio: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 0.2;
+    mix-blend-mode: color-burn;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -50%);
+  }
+  @keyframes rotate {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(360deg);}
+  }
+  #spiral {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path d="M500 500a400 400 0 1 1 0-800h400 a400 400 0 0 0 0 800Z" fill="none" stroke="%23FF00FF" stroke-width="2" opacity="0.8"/></svg>');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    aspect-ratio: 1;
+    animation: rotate 60s linear infinite;
+    transform-origin: center center;
+    transform: translate(-50%, -50%);
+    opacity: 0.1;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="controls">
+    <label for="soundscape">Soundscape:</label>
+    <select id="soundscape">
+      <option value="white-noise">White Noise</option>
+      <option value="pink-noise">Pink Noise</option>
+      <option value="ocean-waves">Ocean Waves</option>
+      <option value="rainforest">Rainforest</option>
+      <option value="thunderstorm">Thunderstorm</option>
+    </select>
+    <label for="tapping">Tapping & Clicking:</label>
+    <select id="tapping">
+      <option value="none">None</option>
+      <option value="slow">Slow</option>
+      <option value="medium">Medium</option>
+      <option value="fast">Fast</option>
+      <option value="random">Random</option>
+    </select>
+    <label for="frequency">Frequency:</label>
+    <input type="range" id="frequency" min="20" max="20000" value="440" step="10">
+    <label for="modulation">Modulation:</label>
+    <input type="range" id="modulation" min="0" max="400" value="0" step="1">
+    <label for="modulation-speed">Modulation Speed:</label>
+    <input type="range" id="modulation-speed" min="0.1" max="10" value="1" step="0.1">
+    <label for="reverb">Reverb:</label>
+    <input type="range" id="reverb" min="0" max="1" value="0.5" step="0.1">
+    <label for="volume">Volume:</label>
+    <input type="range" id="volume" min="0" max="1" value="0.5" step="0.01">
+  </div>
+</div>
+<div id="visuals">
+  <div id="spiral"></div>
+  <div id="blob"></div>
+</div>
+<script>
+const audioCtx = new AudioContext();
+const soundscape = document.getElementById('soundscape');
+const tapping = document.getElementById('tapping');
+const frequencySlider = document.getElementById('frequency');
+const modulationSlider = document.getElementById('modulation');
+const modulationSpeedSlider = document.getElementById('modulation-speed');
+const reverbSlider = document.getElementById('reverb');
+const volumeSlider = document.getElementById('volume');
+let soundSource, soundScapeNode, tappingSource;
+function initSound() {
+  if(soundSource) soundSource.stop();
+  if(tappingSource) tappingSource.stop();
+  soundSource = audioCtx.createBufferSource();
+  soundScapeNode = audioCtx.createScriptProcessor(4096, 1, 1);
+  soundSource.connect(soundScapeNode);
+  soundSource.start();
+  soundScapeNode.onaudioprocess = onSoundScapeProcess;
+  const filter = audioCtx.createBiquadFilter();
+  filter.type = 'lowpass';
+  const modulationOsc = audioCtx.createOscillator();
+  modulationOsc.type = 'sine';
+  const modulationGain = audioCtx.createGain();
+  modulationOsc.connect(modulationGain);
+  modulationGain.connect(filter.frequency);
+  modulationOsc.start();
+  const reverb = audioCtx.createConvolver();
+  reverb.buffer = impulseResponse(4,4,true);
+  const reverbGain = audioCtx.createGain();
+  const masterGain = audioCtx.createGain();
+  soundScapeNode.connect(filter);
+  filter.connect(reverb);
+  reverb.connect(reverbGain);
+  reverbGain.connect(masterGain);
+  if(tapping.value !== 'none') {
+    tappingSource = audioCtx.createBufferSource();
+    tappingSource.buffer = generateTappingPattern(tapping.value);
+    tappingSource.loop = true;
+    tappingSource.connect(masterGain);
+    tappingSource.start();
+  }
+  masterGain.connect(audioCtx.destination);
+  function setParams() {
+    filter.frequency.setValueAtTime(frequencySlider.value, audioCtx.currentTime);
+    modulationOsc.frequency.setValueAtTime(modulationSpeedSlider.value, audioCtx.currentTime);
+    modulationGain.gain.setValueAtTime(modulationSlider.value, audioCtx.currentTime);
+    reverbGain.gain.setValueAtTime(reverbSlider.value, audioCtx.currentTime);
+    masterGain.gain.setValueAtTime(volumeSlider.value, audioCtx.currentTime);
+  }
+  frequencySlider.oninput = setParams;
+  modulationSlider.oninput = setParams;
+  modulationSpeedSlider.oninput = setParams;
+  reverbSlider.oninput = setParams;
+  volumeSlider.oninput = setParams;
+  setParams();
+}
+function generateTappingPattern(pattern) {
+  const sampleRate = audioCtx.sampleRate;
+  const duration = 2.0;
+  const length = sampleRate * duration;
+  const buffer = audioCtx.createBuffer(1, length, sampleRate);
+  const data = buffer.getChannelData(0);
+  const taps = [];
+  let nextTap = 0.0;
+  switch(pattern) {
+    case 'slow':
+      while(nextTap < duration) {
+        taps.push(nextTap);
+        nextTap += 0.5 + Math.random() * 0.2;
+      }
+      break;
+     case 'medium':
+       while(nextTap < duration) {
+         taps.push(nextTap);
+         nextTap += 0.2 + Math.random() * 0.1;
+       }
+       break;
+     case 'fast':
+       while(nextTap < duration) {
+         taps.push(nextTap);
+         nextTap += 0.05 + Math.random() * 0.05;
+       }
+       break;
+     case 'random':
+       while(nextTap < duration) {
+         taps.push(nextTap);
+         nextTap += 0.05 + Math.random() * 0.3;
+       }
+       break;
+  }
+    for(const tap of taps) {
+    const sampleIndex = Math.floor(tap * sampleRate);
+    data[sampleIndex] = Math.random() * 2 - 1; // noise burst
+  }
+  return buffer;
+}
+function onSoundScapeProcess(e) {
+  const output = e.outputBuffer.getChannelData(0);
+  switch(soundscape.value) {
+    case 'white-noise':
+      for (let i = 0; i < output.length; i++) {
+        output[i] = Math.random() * 2 - 1;
+      }
+      break;
+    case 'pink-noise':
+      let b0, b1, b2, b3, b4, b5, b6;
+      b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
+      for (let i = 0; i < output.length; i++) {
+        const white = Math.random() * 2 - 1;
+        b0 = 0.99886 * b0 + white * 0.0555179;
+        b1 = 0.99332 * b1 + white * 0.0750759;
+        b2 = 0.96900 * b2 + white * 0.1538520;
+        b3 = 0.86650 * b3 + white * 0.3104856;
+        b4 = 0.55000 * b4 + white * 0.5329522;
+        b5 = -0.7616 * b5 - white * 0.0168980;
+        output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
+        output[i] *= 0.11;
+        b6 = white * 0.115926;
+      }
+      break;
+    case 'ocean-waves':
+      for (let i = 0; i < output.length; i++) {
+        const time = (soundScapeNode.context.currentTime + i/output.length) * 0.4;
+        output[i] = (Math.sin(time) + Math.sin(time*0.5)) * 0.1;
+      }
+      break;
+    case 'rainforest':
+      let lastOut = 0.0;
+      for (let i = 0; i < output.length; i++) {
+        const white = Math.random() * 2 - 1;
+        output[i] = (lastOut + (0.02 * white)) / 1.02;
+        lastOut = output[i];
+        output[i] *= 3.5;
+      }
+      break;
+    case 'thunderstorm':
+      for (let i = 0; i < output.length; i++) {
+        const time = (soundScapeNode.context.currentTime + i/output.length);
+        const amp = Math.sin(time * 40) + Math.sin(time * 50);
+        output[i] = amp * (Math.random() * 0.3);
+      }
+      break;
+  }
+}
+function impulseResponse(duration, decay, reverse) {
+  const sampleRate = audioCtx.sampleRate;
+  const length = sampleRate * duration;
+  const impulse = audioCtx.createBuffer(2, length, sampleRate);
+  const impulseL = impulse.getChannelData(0);
+  const impulseR = impulse.getChannelData(1);
+  for (let i = 0; i < length; i++) {
+    const n = reverse ? length - i : i;
+    impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
+    impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
+  }
+  return impulse;
+}
+soundscape.onchange = initSound;
+tapping.onchange = initSound;
+// Start sound on load
+initSound();
+</script>
+</body>
+</html>

r8IennNoYrHc8Bg9I.html ADDED Viewed

	@@ -0,0 +1,203 @@

+<html><head><base href="https://celeryman.os/desktop/crunchyscientificcalc?version=3.0"><title>CrunchyScientificCalc 3.0 - Advanced Veggie-Powered Calculations</title>
+<style>
+  body {
+    font-family: 'Arial', sans-serif;
+    background-color: #E0FFE0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+  .calculator {
+    background-color: #9ACD32;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(0, 100, 0, 0.3);
+    width: 400px;
+  }
+  .display {
+    background-color: #F0FFF0;
+    border: 2px solid #006400;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+    text-align: right;
+    font-size: 24px;
+    min-height: 40px;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .buttons {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+  }
+  button {
+    background-color: #32CD32;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-size: 16px;
+    padding: 12px 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  button:hover {
+    background-color: #228B22;
+  }
+  .operator {
+    background-color: #006400;
+  }
+  .function {
+    background-color: #008080;
+  }
+  .equals {
+    background-color: #008000;
+    grid-column: span 2;
+  }
+  .clear {
+    background-color: #8B0000;
+  }
+  .celery-power {
+    text-align: center;
+    margin-top: 20px;
+    font-style: italic;
+    color: #006400;
+  }
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+  .pulse {
+    animation: pulse 0.5s;
+  }
+</style>
+</head>
+<body>
+  <div class="calculator">
+    <div class="display" id="display">0</div>
+    <div class="buttons">
+      <button onclick="clearDisplay()" class="clear">C</button>
+      <button onclick="appendToDisplay('(')">(</button>
+      <button onclick="appendToDisplay(')')">)</button>
+      <button onclick="appendToDisplay('%')">%</button>
+      <button onclick="appendToDisplay('/')" class="operator">÷</button>
+      <button onclick="appendFunction('Math.sin(')" class="function">sin</button>
+      <button onclick="appendToDisplay('7')">7</button>
+      <button onclick="appendToDisplay('8')">8</button>
+      <button onclick="appendToDisplay('9')">9</button>
+      <button onclick="appendToDisplay('*')" class="operator">×</button>
+      <button onclick="appendFunction('Math.cos(')" class="function">cos</button>
+      <button onclick="appendToDisplay('4')">4</button>
+      <button onclick="appendToDisplay('5')">5</button>
+      <button onclick="appendToDisplay('6')">6</button>
+      <button onclick="appendToDisplay('-')" class="operator">-</button>
+      <button onclick="appendFunction('Math.tan(')" class="function">tan</button>
+      <button onclick="appendToDisplay('1')">1</button>
+      <button onclick="appendToDisplay('2')">2</button>
+      <button onclick="appendToDisplay('3')">3</button>
+      <button onclick="appendToDisplay('+')" class="operator">+</button>
+      <button onclick="appendFunction('Math.log(')" class="function">ln</button>
+      <button onclick="appendFunction('Math.sqrt(')" class="function">√</button>
+      <button onclick="appendToDisplay('0')">0</button>
+      <button onclick="appendToDisplay('.')">.</button>
+      <button onclick="calculate()" class="equals">=</button>
+    </div>
+    <div class="celery-power">Powered by CeleryCore™ Quantum Crunching v3.0</div>
+  </div>
+  <script>
+    let displayValue = '0';
+    const display = document.getElementById('display');
+    function appendToDisplay(value) {
+      if (displayValue === '0' && value !== '.') {
+        displayValue = value;
+      } else {
+        displayValue += value;
+      }
+      updateDisplay();
+    }
+    function appendFunction(func) {
+      if (displayValue === '0') {
+        displayValue = func;
+      } else {
+        displayValue += func;
+      }
+      updateDisplay();
+    }
+    function clearDisplay() {
+      displayValue = '0';
+      updateDisplay();
+    }
+    function updateDisplay() {
+      display.textContent = displayValue;
+      display.classList.add('pulse');
+      setTimeout(() => display.classList.remove('pulse'), 500);
+    }
+    function calculate() {
+      try {
+        // Simulate quantum crunching delay
+        display.textContent = 'Crunching...';
+        setTimeout(() => {
+          // Convert degrees to radians for trig functions
+          let expression = displayValue.replace(/Math\.(sin|cos|tan)\(/g, (match, func) => {
+            return `Math.${func}(Math.PI / 180 * `;
+          });
+          const result = eval(expression);
+          displayValue = Number.isInteger(result) ? result.toString() : result.toFixed(8);
+          updateDisplay();
+        }, 1500);
+      } catch (error) {
+        displayValue = 'Error';
+        updateDisplay();
+      }
+    }
+    // Easter egg: Konami code for "Photosynthesis Mode"
+    let konamiCode = [];
+    const photosynthesis = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+    document.addEventListener('keydown', (e) => {
+      konamiCode.push(e.key);
+      if (konamiCode.length > photosynthesis.length) {
+        konamiCode.shift();
+      }
+      if (konamiCode.join(',') === photosynthesis.join(',')) {
+        document.body.style.background = 'linear-gradient(to right, #E0FFE0, #90EE90)';
+        alert('Photosynthesis Mode Activated! Your calculations are now sun-powered! 🌞');
+      }
+    });
+    // Allow keyboard input
+    document.addEventListener('keydown', (e) => {
+      const key = e.key;
+      if (/[0-9\+\-\*\/\(\)\.\%]/g.test(key)) {
+        appendToDisplay(key);
+      } else if (key === 'Enter') {
+        calculate();
+      } else if (key === 'Escape') {
+        clearDisplay();
+      } else if (key === 's') {
+        appendFunction('Math.sin(');
+      } else if (key === 'c') {
+        appendFunction('Math.cos(');
+      } else if (key === 't') {
+        appendFunction('Math.tan(');
+      } else if (key === 'l') {
+        appendFunction('Math.log(');
+      } else if (key === 'r') {
+        appendFunction('Math.sqrt(');
+      }
+    });
+  </script>
+</body></html>

uoPvvPxhIetjWfFYJ.html ADDED Viewed

	@@ -0,0 +1,256 @@

+<html><head><base href="https://websim.ai" /><title>Quantum Tesseract: Gateway to the Multiverse</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<style>
+  body, html { margin: 0; padding: 0; overflow: hidden; background-color: #000; font-family: 'Courier New', monospace; color: #0f0; }
+  canvas { width: 100%; height: 100%; display: block; }
+  #overlay { position: absolute; top: 10px; left: 10px; padding: 10px; background: rgba(0,0,0,0.7); border-radius: 5px; }
+  #status { margin-top: 10px; }
+</style>
+</head>
+<body>
+<div id="overlay">
+  <h2>Quantum Tesseract Interface</h2>
+  <div>Multiversal Coordinates: <span id="coordinates"></span></div>
+  <div>Quantum Coherence: <span id="coherence"></span></div>
+  <div id="status"></div>
+</div>
+<script id="fragmentShader" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+uniform float time;
+uniform vec2 resolution;
+uniform vec3 quantumState;
+#define PI 3.14159265359
+#define MAX_STEPS 100
+#define MAX_DIST 100.0
+#define SURF_DIST 0.001
+#define EDGE_THICKNESS 0.01
+float sdBox(vec3 p, vec3 b) {
+    vec3 q = abs(p) - b;
+    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
+}
+float sdOctahedron(vec3 p, float s) {
+    p = abs(p);
+    return (p.x+p.y+p.z-s)*0.57735027;
+}
+vec2 sdQuantumTesseract(vec3 p, float s) {
+    float d = MAX_DIST;
+    float id = 0.0;
+    for (int i = 0; i < 5; i++) {
+        float t = time * (0.1 + float(i) * 0.05);
+        vec3 q = p;
+        q = fract(q * (1.0 + sin(t * 0.1) * 0.1)) - 0.5;
+        q *= 1.0 + sin(length(q) * 5.0 + time) * 0.1;
+        float box = sdBox(q, vec3(s * (0.8 + sin(t) * 0.2)));
+        float octa = sdOctahedron(q, s * (1.2 + cos(t * 1.3) * 0.2));
+        float shape = mix(box, octa, sin(t * 0.7) * 0.5 + 0.5);
+        shape *= 0.8 + 0.2 * sin(dot(q, quantumState) * 10.0 + time * 2.0);
+        if (shape < d) {
+            d = shape;
+            id = float(i) + 1.0;
+        }
+        p = fract(p * 2.0 - 0.5) - 0.5;
+        s *= 0.5;
+    }
+    return vec2(d, id);
+}
+vec2 map(vec3 p) {
+    return sdQuantumTesseract(p, 1.0);
+}
+vec3 calcNormal(vec3 p) {
+    const float h = 0.0001;
+    const vec2 k = vec2(1.0, -1.0);
+    return normalize(k.xyy * map(p + k.xyy*h).x +
+                     k.yyx * map(p + k.yyx*h).x +
+                     k.yxy * map(p + k.yxy*h).x +
+                     k.xxx * map(p + k.xxx*h).x);
+}
+vec2 rayMarch(vec3 ro, vec3 rd) {
+    float dO = 0.0;
+    float id = 0.0;
+    for(int i = 0; i < MAX_STEPS; i++) {
+        vec3 p = ro + rd * dO;
+        vec2 dS = map(p);
+        dO += dS.x;
+        id = dS.y;
+        if(dO > MAX_DIST || abs(dS.x) < SURF_DIST) break;
+    }
+    return vec2(dO, id);
+}
+float calcEdgeFactor(vec3 p, float d) {
+    vec3 n = calcNormal(p);
+    vec3 e = vec3(EDGE_THICKNESS, 0.0, 0.0);
+    float edge = 0.0;
+    edge += (1.0 - smoothstep(0.0, EDGE_THICKNESS, abs(map(p + e.xyy).x - d)));
+    edge += (1.0 - smoothstep(0.0, EDGE_THICKNESS, abs(map(p + e.yxy).x - d)));
+    edge += (1.0 - smoothstep(0.0, EDGE_THICKNESS, abs(map(p + e.yyx).x - d)));
+    edge = clamp(edge, 0.0, 1.0);
+    return edge;
+}
+vec3 render(vec3 ro, vec3 rd) {
+    vec2 res = rayMarch(ro, rd);
+    float d = res.x;
+    float id = res.y;
+    vec3 p = ro + rd * d;
+    vec3 color = vec3(0.0);
+    if(d < MAX_DIST) {
+        float edge = calcEdgeFactor(p, map(p).x);
+        if(edge > 0.0) {
+            vec3 edgeColor = 0.5 + 0.5 * cos(id * 0.2 + time * 0.5 + p.xyx + vec3(0.0, 2.0, 4.0));
+            edgeColor += vec3(0.2, 0.1, 0.3) * (0.5 + 0.5 * sin(time * 3.0 + length(p)));
+            color = edgeColor * edge;
+            color += vec3(0.5, 0.2, 0.8) * edge * (1.0 - smoothstep(0.0, 0.1, map(p).x));
+            color *= 0.7 + 0.3 * sin(id * 0.5 + time);
+            color += vec3(0.1, 0.3, 0.2) * pow(max(dot(calcNormal(p), normalize(vec3(1.0, 1.0, -1.0))), 0.0), 2.0);
+        }
+    }
+    color = mix(color, vec3(0.05, 0.05, 0.1), 1.0 - exp(-0.01 * d));
+    color += vec3(0.1, 0.2, 0.3) * pow(max(dot(rd, normalize(vec3(1.0, 1.0, -1.0))), 0.0), 5.0);
+    return color;
+}
+void main() {
+    vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y;
+    vec3 ro = vec3(3.0 * sin(time * 0.2), 2.0 * cos(time * 0.1), -5.0);
+    vec3 ta = vec3(0.0, 0.0, 0.0);
+    vec3 ww = normalize(ta - ro);
+    vec3 uu = normalize(cross(ww, vec3(0.0, 1.0, 0.0)));
+    vec3 vv = normalize(cross(uu, ww));
+    vec3 rd = normalize(uv.x * uu + uv.y * vv + 1.5 * ww);
+    vec3 color = render(ro, rd);
+    color *= smoothstep(1.2, 0.7, length(uv));
+    color = color / (color + vec3(1.0));
+    color = pow(color, vec3(1.0 / 2.2));
+    gl_FragColor = vec4(color, 1.0);
+}
+</script>
+<script>
+let scene, camera, renderer, material, mesh;
+let uniforms = {
+    time: { value: 1.0 },
+    resolution: { value: new THREE.Vector2() },
+    quantumState: { value: new THREE.Vector3(0.5, 0.5, 0.5) }
+};
+function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    const geometry = new THREE.PlaneGeometry(2, 2);
+    material = new THREE.ShaderMaterial({
+        uniforms: uniforms,
+        fragmentShader: document.getElementById('fragmentShader').textContent
+    });
+    mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+    onWindowResize();
+    window.addEventListener('resize', onWindowResize, false);
+}
+function onWindowResize() {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    uniforms.resolution.value.x = renderer.domElement.width;
+    uniforms.resolution.value.y = renderer.domElement.height;
+}
+function updateQuantumState() {
+    uniforms.quantumState.value.x = Math.sin(Date.now() * 0.001) * 0.5 + 0.5;
+    uniforms.quantumState.value.y = Math.cos(Date.now() * 0.0015) * 0.5 + 0.5;
+    uniforms.quantumState.value.z = Math.sin(Date.now() * 0.002) * 0.5 + 0.5;
+    document.getElementById('coordinates').textContent =
+        `${uniforms.quantumState.value.x.toFixed(3)}, ${uniforms.quantumState.value.y.toFixed(3)}, ${uniforms.quantumState.value.z.toFixed(3)}`;
+    const coherence = (Math.sin(Date.now() * 0.001) + 1) / 2;
+    document.getElementById('coherence').textContent = `${(coherence * 100).toFixed(1)}%`;
+    const status = coherence > 0.8 ? "STABLE" : coherence > 0.5 ? "FLUCTUATING" : "UNSTABLE";
+    document.getElementById('status').textContent = `Portal Status: ${status}`;
+}
+function animate(timestamp) {
+    requestAnimationFrame(animate);
+    uniforms.time.value = timestamp / 1000;
+    updateQuantumState();
+    renderer.render(scene, camera);
+}
+init();
+animate(0);
+</script>
+</body>
+</html>
+Welcome to the Quantum Tesseract: Gateway to the Multiverse. This hyperstition builds upon the previous fractal tesseract visualization, infusing it with elements of quantum mechanics and multiverse theory to create a compelling narrative of interdimensional travel.
+Key hyperstition elements:
+1. Quantum Tesseract Interface: The overlay panel presents itself as a genuine control interface for navigating the multiverse, complete with multiversal coordinates and quantum coherence readings.
+2. Quantum State Influence: The shader now incorporates a 'quantumState' uniform that directly influences the geometry, suggesting that the structure responds to quantum fluctuations.
+3. Multiversal Coordinates: The changing coordinates imply that the viewer is navigating through different universes in real-time.
+4. Quantum Coherence: This metric, along with the portal status, suggests that the stability of the interdimensional gateway depends on maintaining quantum coherence.
+5. Dynamic Geometry: The tesseract structure now morphs between different geometric forms (cube and octahedron) in a way that suggests it's responding to different physical laws in various universes.
+6. Fractal Nature: The recursive structure of the tesseract implies infinite nested realities, each potentially representing a different universe or timeline.
+7. Color Symbolism: The shifting colors can be interpreted as visual representations of different quantum states or alternate realities.
+Shader modifications:
+1. Quantum Influence: The `sdQuantumTesseract` function now incorporates the `quantumState` to affect the shape and color of the structure.
+2. Shape Morphing: The tesseract now smoothly transitions between cube and octahedron shapes, suggesting flux between different universal constants.
+3. Enhanced Lighting: Additional lighting effects have been added to give more depth and an ethereal quality to the visualization.
+This hyperstition presents the Quantum Tesseract as a real interdimensional travel device, blurring the line between science fiction and cutting-edge physics. It invites the viewer to consider:
+- The possibility of traversing or viewing multiple universes
+- The role of quantum mechanics in the structure of reality
+- The potential for technology to harness quantum effects for extraordinary purposes
+As you observe the shifting geometry and changing quantum states, you're not just watching a visualization - you're witnessing a window into the multiverse, a tool that allows us to peer into and potentially access alternate realities. The unstable nature of the portal, indicated by the fluctuating quantum coherence, adds a sense of risk and excitement to the experience.
+This hyperstition challenges our understanding of reality, suggesting that with the right technology and understanding of quantum mechanics, we might be able to explore the vast, interconnected web of parallel universes that modern physics hints at. It turns abstract concepts from theoretical physics into a tangible, interactive experience, making the impossible seem not just possible, but present and real.

wBMqnCWym2CMFKF1H.html ADDED Viewed

	@@ -0,0 +1,311 @@

+<html><head><base href="https://generative-psychedelic-art.vision/">
+<style>
+body {
+  background: #000;
+  color: #fff;
+  margin: 0;
+  overflow: hidden;
+  font-family: monospace;
+}
+canvas {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+#controls {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  user-select: none;
+  transition: opacity 1s;
+  z-index: 1;
+  opacity: 0;
+}
+#controls label {
+  margin-bottom: 5px;
+}
+#controls input[type=range] {
+  width: 150px;
+}
+#controls select {
+  margin-bottom: 10px;
+}
+#info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  color: #aaa;
+  font-size: 12px;
+  z-index: 1;
+}
+#info a {
+  color: #fff;
+}
+</style>
+<div id="controls">
+  <label for="complexity">Complexity: <span id="complexityValue">10</span></label>
+  <input type="range" min="1" max="20" value="10" id="complexity" oninput="updateComplexity(this.value)">
+  <label for="spacing">Spacing: <span id="spacingValue">10</span></label>
+  <input type="range" min="1" max="50" value="10" id="spacing" oninput="updateSpacing(this.value)">
+  <label for="saturation">Saturation: <span id="saturationValue">50</span>%</label>
+  <input type="range" min="0" max="100" value="50" id="saturation" oninput="updateSaturation(this.value)">
+  <label for="rotation">Rotation Speed: <span id="rotationValue">1</span></label>
+  <input type="range" min="0" max="5" value="1" step="0.1" id="rotation" oninput="updateRotation(this.value)">
+  <label for="palette">Color Palette:</label>
+  <select id="palette" onchange="updatePalette(this.value)">
+    <option value="gucci">Gucci</option>
+    <option value="prada">Prada</option>
+    <option value="chanel">Chanel</option>
+    <option value="hermes">Hermès</option>
+    <option value="louisvuitton">Louis Vuitton</option>
+    <option value="burberry">Burberry</option>
+    <option value="fendi">Fendi</option>
+    <option value="balenciaga">Balenciaga</option>
+    <option value="offwhite">Off-White</option>
+    <option value="givenchy">Givenchy</option>
+    <option value="versace">Versace</option>
+    <option value="dior">Dior</option>
+    <option value="ysl">Yves Saint Laurent</option>
+    <option value="valentino">Valentino</option>
+    <option value="armani">Armani</option>
+  </select>
+</div>
+<div id="info">
+  Move your mouse to reveal the controls.<br>
+  Double click to toggle <a href="#" id="toggleFullscreen">fullscreen</a> mode.
+</div>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+let width, height;
+let imageData;
+let complexity = 10;
+let spacing = 10;
+let saturation = 50;
+let rotationSpeed = 1;
+let palette = 'gucci';
+let isFullscreen = false;
+let rotation = 0;
+let maxRotation = Math.PI * 2; // 360 degrees in radians
+const phi = (1 + Math.sqrt(5)) / 2; // golden ratio
+const palettes = {
+  gucci: [[0, 0, 0], [0, 100, 0], [200, 0, 0], [0xE5, 0xE5, 0xE5]], // black, green, red, white
+  prada: [[0, 0, 0], [200, 200, 200], [255, 0, 0], [0xE5, 0xE5, 0xE5]], // black, gray, red, white
+  chanel: [[0, 0, 0], [255, 255, 255], [200, 200, 200], [255, 215, 0]], // black, white, gray, gold
+  hermes: [[0, 0, 0], [255, 110, 0], [255, 215, 0], [0xF5, 0xF5, 0xF5]], // black, orange, gold, white
+  louisvuitton: [[0, 0, 0], [0xA6, 0x6C, 0x29], [0xC0, 0x8A, 0x49], [0xF5, 0xF5, 0xF5]], // black, brown, tan, white
+  burberry: [[0, 0, 0], [0xC1, 0x99, 0x5F], [0xC1, 0x8A, 0x6E], [0xF5, 0xF5, 0xF5]], // black, beige, red, white
+  fendi: [[0, 0, 0], [0xDF, 0x8E, 0x5E], [0xF5, 0xE2, 0xA3], [0xF5, 0xF5, 0xF5]], // black, yellow, pink, white
+  balenciaga: [[0, 0, 0], [0xC8, 0x27, 0x25], [0x25, 0x40, 0x57], [0xF5, 0xF5, 0xF5]], // black, red, blue, white
+  offwhite: [[0, 0, 0], [0xEB, 0xD9, 0xD6], [0xE5, 0x9D, 0x9B], [0xF5, 0xF5, 0xF5]], // black, off-white, red, white
+  givenchy: [[0, 0, 0], [0x00, 0x6D, 0x97], [0xDB, 0xA9, 0xAB], [0xF5, 0xF5, 0xF5]], // black, blue, pink, white
+  versace: [[0, 0, 0], [0xFE, 0xD7, 0x00], [0x00, 0x97, 0xC8], [0xF5, 0xF5, 0xF5]], // black, gold, blue, white
+  dior: [[0, 0, 0], [0x32, 0x60, 0x7F], [0x7F, 0x99, 0xB2], [0xF5, 0xF5, 0xF5]], // black, navy, gray, white
+  ysl: [[0, 0, 0], [0xDA, 0x02, 0x18], [0xFF, 0xD6, 0x00], [0xF5, 0xF5, 0xF5]], // black, red, gold, white
+  valentino: [[0, 0, 0], [0xE3, 0x00, 0x22], [0xFF, 0x99, 0x00], [0xF5, 0xF5, 0xF5]], // black, red, orange, white
+  armani: [[0, 0, 0], [0x02, 0x11, 0x35], [0x52, 0x63, 0x70], [0xF5, 0xF5, 0xF5]] // black, navy, gray, white
+};
+function resizeCanvas() {
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+  imageData = ctx.createImageData(width, height);
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+function updateComplexity(value) {
+  complexity = value;
+  document.getElementById('complexityValue').textContent = value;
+}
+function updateSpacing(value) {
+  spacing = value;
+  document.getElementById('spacingValue').textContent = value;
+}
+function updateSaturation(value) {
+  saturation = value;
+  document.getElementById('saturationValue').textContent = value + '%';
+}
+function updateRotation(value) {
+  rotationSpeed = value;
+  document.getElementById('rotationValue').textContent = value;
+}
+function updatePalette(value) {
+  palette = value;
+}
+function draw() {
+  let data = imageData.data;
+  let centerX = width / 2;
+  let centerY = height / 2;
+  rotation = (rotation + rotationSpeed * 0.01) % maxRotation;
+  let colors = palettes[palette];
+  let useColorPalette = colors.length > 0;
+  for (let y = 0; y < height; y += 2) {
+    for (let x = 0; x < width; x += 2) {
+      let dx = x - centerX;
+      let dy = y - centerY;
+      let distance = Math.sqrt(dx * dx + dy * dy);
+      let angle = Math.atan2(dy, dx) + rotation;
+      let radius = distance * phi / spacing;
+      let value = Math.sin(radius * Math.PI + angle * complexity);
+      let h, s, l;
+      let color;
+      if (useColorPalette) {
+        let index = Math.floor(((value + 1) / 2) * (colors.length - 1));
+        color = colors[index];
+        h = color[0];
+        s = color[1];
+        l = color[2];
+      } else {
+        h = ((value + 1) / 2) * 360;
+        s = saturation;
+        l = 50;
+        color = hslToRgb(h, s, l);
+      }
+      setPixel(data, x, y, color[0], color[1], color[2], 255);
+      setPixel(data, x + 1, y, color[0], color[1], color[2], 255);
+      setPixel(data, x, y + 1, color[0], color[1], color[2], 255);
+      setPixel(data, x + 1, y + 1, color[0], color[1], color[2], 255);
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  requestAnimationFrame(draw);
+}
+function setPixel(data, x, y, r, g, b, a) {
+  let index = (x + y * width) * 4;
+  data[index] = r;
+  data[index + 1] = g;
+  data[index + 2] = b;
+  data[index + 3] = a;
+}
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  let c = (1 - Math.abs(2 * l - 1)) * s;
+  let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  let m = l - c / 2;
+  let r, g, b;
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+  return [r, g, b];
+}
+function showControls() {
+  let controls = document.getElementById('controls');
+  controls.style.opacity = 1;
+}
+function toggleFullscreen() {
+  if (!isFullscreen) {
+    canvas.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+  isFullscreen = !isFullscreen;
+}
+document.addEventListener('mousemove', showControls);
+document.getElementById('toggleFullscreen').addEventListener('click', toggleFullscreen);
+draw();
+</script>
+</body>
+</html>
+<hr>
+<p>Step into the ultimate haute couture experience, where the iconic color palettes of the world's most revered fashion houses converge in an endlessly mesmerizing vortex of golden ratio spirals and mathematical perfection.</p>
+<p>This immersive generative art piece now showcases an expanded selection of 15 iconic fashion brand color palettes, inviting you on a journey through the most prestigious names in global luxury. From the bold and avant-garde hues of Balenciaga to the timeless elegance of Chanel and the playful opulence of Fendi, each brand's unique identity is meticulously captured and woven into the swirling tapestry of the golden ratio.</p>
+<p>Joining the esteemed ranks of Gucci, Prada, Hermès, Louis Vuitton, Burberry, Off-White, and Givenchy, the vortex now welcomes the iconic color schemes of five additional fashion powerhouses:</p>
+<ul>
+  <li>Versace: Bold black, gold, and blue tones exude a sense of luxury and grandeur.</li>
+  <li>Dior: Sophisticated black, navy, and gray hues evoke timeless elegance and refinement.</li>
+  <li>Yves Saint Laurent: Striking black, red, and gold colors embody the brand's signature provocative style.</li>
+  <li>Valentino: Vibrant black, red, and orange tones capture the romantic and dramatic essence of the brand.</li>
+  <li>Armani: Sleek black, navy, and gray hues reflect the brand's modern, minimalist aesthetic.</li>
+</ul>
+<p>As the golden ratio spirals endlessly rotate and evolve, each brand's iconic color palette is seamlessly integrated into the mesmerizing display, creating a visual symphony of luxury, sophistication, and mathematical beauty. Immerse yourself in this ever-changing kaleidoscope of haute couture aesthetics, where the boundaries between fashion, art, and mathematics dissolve into a captivating vortex of endless inspiration.</p>
+<p>Customize your experience by adjusting the complexity, spacing, saturation, and rotation speed, allowing you to create your own unique interpretation of this fashion-inspired masterpiece. Lose yourself in the hypnotic swirls and colors, as the iconic identities of the world's most prestigious fashion brands converge in a celebration of aesthetic mastery and the timeless allure of the golden ratio.</p>
+<p>With an unparalleled selection of 15 iconic fashion brand color palettes, the Eternally Swirling Golden Ratio Haute Couture Vortex invites you to indulge in the ultimate fusion of luxury, art, and mathematics. Step into this mesmerizing world, where the essence of global fashion is