Spaces:

awacke1
/

Music-Machine-Drum-And-Arpeggiator

Running

App Files Files Community

awacke1 commited on Jul 12

Commit

99c2646

•

1 Parent(s): ef16635

Update index.html

Browse files

Files changed (1) hide show

index.html +130 -186

index.html CHANGED Viewed

@@ -1,219 +1,163 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <meta charset="utf-8">
-    <title>A-Frame 3D Editor with Animated Rotation and Color Picker</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
     <style>
-        .ui-panel {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            z-index: 9999;
-            background: rgba(0,0,0,0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: white;
             font-family: Arial, sans-serif;
         }
-        .ui-panel button {
-            display: block;
-            margin: 5px 0;
-            padding: 5px 10px;
         }
-        .control-panel {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 9999;
-            background: rgba(0,0,0,0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: white;
-            font-family: Arial, sans-serif;
-        }
-        .control-panel input {
-            width: 50px;
-            margin-right: 5px;
         }
-        .color-picker {
             display: flex;
             align-items: center;
-            margin-top: 10px;
         }
-        .color-picker input[type="color"] {
-            margin-right: 10px;
         }
     </style>
 </head>
 <body>
-    <div class="ui-panel">
-        <button onclick="addPrimitive('box')">Add Box</button>
-        <button onclick="addPrimitive('sphere')">Add Sphere</button>
-        <button onclick="addPrimitive('cylinder')">Add Cylinder</button>
-        <button onclick="addPrimitive('cone')">Add Cone</button>
-        <button onclick="addPrimitive('torus')">Add Torus</button>
     </div>
-    <div class="control-panel">
-        <h3>Object Controls</h3>
-        <p>Position:</p>
-        <input id="px" type="number" step="0.1" placeholder="X">
-        <input id="py" type="number" step="0.1" placeholder="Y">
-        <input id="pz" type="number" step="0.1" placeholder="Z">
-        <p>Rotation (degrees):</p>
-        <input id="rx" type="number" step="1" placeholder="X">
-        <input id="ry" type="number" step="1" placeholder="Y">
-        <input id="rz" type="number" step="1" placeholder="Z">
-        <p>Rotation Velocity (degrees/second):</p>
-        <input id="rvx" type="number" step="1" placeholder="X">
-        <input id="rvy" type="number" step="1" placeholder="Y">
-        <input id="rvz" type="number" step="1" placeholder="Z">
-        <button onclick="applyTransform()">Apply Transform</button>
-        <button onclick="placeInFrontOfCamera()">Place in Front of Camera</button>
-        <div class="color-picker">
-            <input type="color" id="colorPicker" value="#4CC3D9">
-            <button onclick="applyColor()">Apply Color</button>
-        </div>
-    </div>
-    <a-scene>
-        <a-sky color="#ECECEC"></a-sky>
-        <a-entity id="rig" position="0 1.6 0">
-            <a-camera look-controls wasd-controls>
-                <a-cursor></a-cursor>
-            </a-camera>
-        </a-entity>
-    </a-scene>
     <script>
-        let selectedObject = null;
-        let objects = [];
-        function addPrimitive(type) {
-            const scene = document.querySelector('a-scene');
-            const newEntity = document.createElement('a-entity');
-            newEntity.setAttribute('geometry', `primitive: ${type}`);
-            newEntity.setAttribute('material', 'color: #4CC3D9');
-            newEntity.setAttribute('class', 'editable');
-            newEntity.addEventListener('click', function() { selectObject(this); });
-            newEntity.rotationVelocity = { x: 0, y: 30, z: 0 }; // Default rotation velocity
-            scene.appendChild(newEntity);
-            objects.push(newEntity);
-            placeInFrontOfCamera(newEntity);
-        }
-        function selectObject(obj) {
-            if (selectedObject) {
-                selectedObject.setAttribute('material', 'color', selectedObject.getAttribute('material').color);
-            }
-            selectedObject = obj;
-            document.getElementById('colorPicker').value = selectedObject.getAttribute('material').color;
-            selectedObject.setAttribute('material', 'color', '#FF0000');
-            updateTransformInputs(selectedObject);
-        }
-        function updateTransformInputs(obj) {
-            const position = obj.getAttribute('position');
-            document.getElementById('px').value = position.x.toFixed(2);
-            document.getElementById('py').value = position.y.toFixed(2);
-            document.getElementById('pz').value = position.z.toFixed(2);
-            const rotation = obj.getAttribute('rotation');
-            document.getElementById('rx').value = rotation.x.toFixed(2);
-            document.getElementById('ry').value = rotation.y.toFixed(2);
-            document.getElementById('rz').value = rotation.z.toFixed(2);
-            document.getElementById('rvx').value = obj.rotationVelocity.x;
-            document.getElementById('rvy').value = obj.rotationVelocity.y;
-            document.getElementById('rvz').value = obj.rotationVelocity.z;
-        }
-        function applyTransform() {
-            if (!selectedObject) {
-                alert('Please select an object first');
-                return;
-            }
-            const px = parseFloat(document.getElementById('px').value) || 0;
-            const py = parseFloat(document.getElementById('py').value) || 0;
-            const pz = parseFloat(document.getElementById('pz').value) || 0;
-            const rx = parseFloat(document.getElementById('rx').value) || 0;
-            const ry = parseFloat(document.getElementById('ry').value) || 0;
-            const rz = parseFloat(document.getElementById('rz').value) || 0;
-            const rvx = parseFloat(document.getElementById('rvx').value) || 0;
-            const rvy = parseFloat(document.getElementById('rvy').value) || 0;
-            const rvz = parseFloat(document.getElementById('rvz').value) || 0;
-            selectedObject.setAttribute('position', `${px} ${py} ${pz}`);
-            selectedObject.setAttribute('rotation', `${rx} ${ry} ${rz}`);
-            selectedObject.rotationVelocity = { x: rvx, y: rvy, z: rvz };
-        }
-        function placeInFrontOfCamera(obj = null) {
-            const targetObject = obj || selectedObject;
-            if (!targetObject) {
-                alert('Please select an object first');
-                return;
-            }
-            const camera = document.querySelector('[camera]');
-            const cameraPosition = camera.object3D.position;
-            const cameraRotation = camera.object3D.rotation;
-            // Calculate the direction the camera is looking
-            const direction = new THREE.Vector3(0, 0, -1);
-            direction.applyQuaternion(camera.object3D.quaternion);
-            // Set the distance to be 3 units away from the camera
-            const distance = 3;
-            // Calculate the new position
-            const newPosition = new THREE.Vector3(
-                cameraPosition.x + direction.x * distance,
-                cameraPosition.y + direction.y * distance,
-                cameraPosition.z + direction.z * distance
-            );
-            targetObject.setAttribute('position', newPosition);
-            // Update position inputs if the object is selected
-            if (targetObject === selectedObject) {
-                updateTransformInputs(targetObject);
-            }
-        }
-        function applyColor() {
-            if (!selectedObject) {
-                alert('Please select an object first');
-                return;
             }
-            const color = document.getElementById('colorPicker').value;
-            selectedObject.setAttribute('material', 'color', color);
         }
-        function animateObjects() {
-            objects.forEach(obj => {
-                const currentRotation = obj.getAttribute('rotation');
-                const newRotation = {
-                    x: (currentRotation.x + obj.rotationVelocity.x * 0.016) % 360, // 0.016 is approximately 1/60, assuming 60 FPS
-                    y: (currentRotation.y + obj.rotationVelocity.y * 0.016) % 360,
-                    z: (currentRotation.z + obj.rotationVelocity.z * 0.016) % 360
-                };
-                obj.setAttribute('rotation', newRotation);
             });
-            requestAnimationFrame(animateObjects);
         }
-        // Event listener for object selection
-        document.querySelector('a-scene').addEventListener('click', (event) => {
-            if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
-                selectObject(event.detail.intersectedEl);
             }
         });
-        // Start the animation loop
-        animateObjects();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chord Arpeggio Pad</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
     <style>
+        body {
             font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #121212;
+            color: #ffffff;
         }
+        .container {
+            text-align: center;
         }
+        .arpeggio-pad {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 10px;
+            margin-bottom: 20px;
         }
+        .pad {
+            width: 80px;
+            height: 80px;
+            font-size: 14px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 8px;
             display: flex;
+            flex-direction: column;
+            justify-content: center;
             align-items: center;
         }
+        .pad:hover {
+            opacity: 0.8;
+        }
+        .pad:active, .pad.active {
+            transform: scale(0.95);
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+        }
+        h1 {
+            margin-bottom: 20px;
+        }
+        #effectsButton {
+            font-size: 18px;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+        #effectsButton:hover {
+            background-color: #45a049;
+        }
+        #effectsButton.active {
+            background-color: #e91e63;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Chord Arpeggio Pad</h1>
+        <div class="arpeggio-pad" id="arpeggiopad"></div>
+        <button id="effectsButton">Effects: OFF</button>
     </div>
     <script>
+        const arpeggiopad = document.getElementById('arpeggiopad');
+        const effectsButton = document.getElementById('effectsButton');
+        const synth = new Tone.PolySynth(Tone.Synth).toDestination();
+        // Effects chain
+        const distortion = new Tone.Distortion(0.8).toDestination();
+        const reverb = new Tone.Reverb(2).toDestination();
+        let effectsOn = false;
+        const arpeggios = [
+            // C Major (I)
+            { chord: 'C', notes: ['C4', 'E4', 'G4', 'C5'], color: '#FF0000' },
+            { chord: 'C', notes: ['E4', 'G4', 'C5', 'E5'], color: '#FF4000' },
+            { chord: 'C', notes: ['G4', 'C5', 'E5', 'G5'], color: '#FF8000' },
+            { chord: 'C', notes: ['C5', 'E5', 'G5', 'C6'], color: '#FFC000' },
+            // F Major (IV)
+            { chord: 'F', notes: ['F4', 'A4', 'C5', 'F5'], color: '#FFFF00' },
+            { chord: 'F', notes: ['A4', 'C5', 'F5', 'A5'], color: '#C0FF00' },
+            { chord: 'F', notes: ['C5', 'F5', 'A5', 'C6'], color: '#80FF00' },
+            { chord: 'F', notes: ['F5', 'A5', 'C6', 'F6'], color: '#40FF00' },
+            // G Major (V)
+            { chord: 'G', notes: ['G4', 'B4', 'D5', 'G5'], color: '#00FF00' },
+            { chord: 'G', notes: ['B4', 'D5', 'G5', 'B5'], color: '#00FF40' },
+            { chord: 'G', notes: ['D5', 'G5', 'B5', 'D6'], color: '#00FF80' },
+            { chord: 'G', notes: ['G5', 'B5', 'D6', 'G6'], color: '#00FFC0' },
+            // Am (vi)
+            { chord: 'Am', notes: ['A4', 'C5', 'E5', 'A5'], color: '#00FFFF' },
+            { chord: 'Am', notes: ['C5', 'E5', 'A5', 'C6'], color: '#00C0FF' },
+            { chord: 'Am', notes: ['E5', 'A5', 'C6', 'E6'], color: '#0080FF' },
+            { chord: 'Am', notes: ['A5', 'C6', 'E6', 'A6'], color: '#0040FF' }
+        ];
+        arpeggios.forEach(({ chord, notes, color }, index) => {
+            const pad = document.createElement('button');
+            pad.innerHTML = `${chord}<br>${notes[0]}-${notes[3]}`;
+            pad.className = 'pad';
+            pad.dataset.notes = JSON.stringify(notes);
+            pad.style.backgroundColor = color;
+            arpeggiopad.appendChild(pad);
+        });
+        function toggleEffects() {
+            effectsOn = !effectsOn;
+            if (effectsOn) {
+                synth.disconnect();
+                synth.connect(distortion);
+                synth.connect(reverb);
+                effectsButton.textContent = 'Effects: ON';
+                effectsButton.classList.add('active');
+            } else {
+                synth.disconnect();
+                synth.toDestination();
+                effectsButton.textContent = 'Effects: OFF';
+                effectsButton.classList.remove('active');
             }
         }
+        function playArpeggio(notes, pad) {
+            pad.classList.add('active');
+            const now = Tone.now();
+            notes.forEach((note, index) => {
+                synth.triggerAttackRelease(note, "8n", now + index * 0.2);
             });
+            setTimeout(() => pad.classList.remove('active'), notes.length * 200);
         }
+        arpeggiopad.addEventListener('mousedown', (e) => {
+            if (e.target.classList.contains('pad')) {
+                const notes = JSON.parse(e.target.dataset.notes);
+                playArpeggio(notes, e.target);
             }
         });
+        effectsButton.addEventListener('click', toggleEffects);
+        // Start audio context on user interaction
+        document.addEventListener('click', async () => {
+            await Tone.start();
+            console.log('Audio is ready');
+        }, { once: true });
     </script>
 </body>
 </html>