{"name":"Tone.js Wave Shapes and Envelopes Demo","description":"Dive into the world of sound with our interactive Tone.js demo! Explore various wave shapes and control their envelopes using intuitive sliders. Adjust the sound in real-time and unleash your creativity!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-10-03T19:18:57.575070Z","updated_at":"2024-10-03T19:18:57.575070Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":3456,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"let wave;\n\nlet synth1, synth2;\n\nlet isPlaying1 = false, isPlaying2 = false;\n\nlet interval1, interval2;\n\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(240);\n\n // Initialize synthesizers with envelopes\n synth1 = new Tone.Synth({\n oscillator: { type: 'sine' },\n envelope: {\n attack: 0.1,\n decay: 0.1,\n sustain: 0.5,\n release: 0.1\n }\n }).toDestination();\n\n synth2 = new Tone.Synth({\n oscillator: { type: 'sine' },\n envelope: {\n attack: 0.1,\n decay: 0.1,\n sustain: 0.5,\n release: 0.1\n }\n }).toDestination();\n\n // Set up event listeners for the controls\n document.getElementById('toggle1').addEventListener('click', toggleSynth1);\n document.getElementById('toggle2').addEventListener('click', toggleSynth2);\n\n document.getElementById('waveform1').addEventListener('change', (e) => {\n synth1.oscillator.type = e.target.value;\n });\n document.getElementById('waveform2').addEventListener('change', (e) => {\n synth2.oscillator.type = e.target.value;\n });\n\n document.getElementById('attack1').addEventListener('input', (e) => {\n synth1.envelope.attack = parseFloat(e.target.value);\n });\n document.getElementById('decay1').addEventListener('input', (e) => {\n synth1.envelope.decay = parseFloat(e.target.value);\n });\n document.getElementById('sustain1').addEventListener('input', (e) => {\n synth1.envelope.sustain = parseFloat(e.target.value);\n });\n document.getElementById('release1').addEventListener('input', (e) => {\n synth1.envelope.release = parseFloat(e.target.value);\n });\n\n document.getElementById('attack2').addEventListener('input', (e) => {\n synth2.envelope.attack = parseFloat(e.target.value);\n });\n document.getElementById('decay2').addEventListener('input', (e) => {\n synth2.envelope.decay = parseFloat(e.target.value);\n });\n document.getElementById('sustain2').addEventListener('input', (e) => {\n synth2.envelope.sustain = parseFloat(e.target.value);\n });\n document.getElementById('release2').addEventListener('input', (e) => {\n synth2.envelope.release = parseFloat(e.target.value);\n });\n}\n\n\n\n\nfunction toggleSynth1() {\n if (isPlaying1) {\n clearInterval(interval1);\n } else {\n interval1 = setInterval(() => synth1.triggerAttackRelease('B4', '8n'), 1000);\n }\n isPlaying1 = !isPlaying1;\n}\n\n\nfunction toggleSynth2() {\n if (isPlaying2) {\n clearInterval(interval2);\n } else {\n interval2 = setInterval(() => synth2.triggerAttackRelease('B3', '8n'), 600);\n }\n isPlaying2 = !isPlaying2;\n}\n","style.css":"body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n\n.synth-container {\n display: flex;\n justify-content: space-around;\n margin: 20px;\n}\n\n.synth {\n background-color: #ffffff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}","index.html":"\n\n\n\n \n \n Tone.js Wave Shapes and Envelopes Demo\n \n \n \n\n\n\n

Tone.js Wave Shapes and Envelopes Demo

\n Oscillator 1 Waveform: \n \n

\n Oscillator 1 Attack: \n \n

\n Oscillator 1 Decay: \n \n

\n Oscillator 1 Sustain: \n \n

\n Oscillator 1 Release: \n \n

\n \n

\n\n

\n Oscillator 2 Waveform: \n \n

\n Oscillator 2 Attack: \n \n

\n Oscillator 2 Decay: \n \n

\n Oscillator 2 Sustain: \n \n

\n Oscillator 2 Release: \n \n

\n \n

\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":4,"comments":[],"steps":[]}