Synth Demo 1

{"name":"Make Some Noise Week 1","description":"...for music class","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/veep0imkidbm97qcqtb1","view_count":120,"fork_count":94,"expires_at":null,"created_at":"2025-03-10T23:17:47.967875Z","updated_at":"2025-03-10T23:17:47.967877Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":4931,"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":"/*\n\nLet's talk about music. We all love to listen to music. \nSome of us have learned to play instruments or use a tool like GarageBand to put together a track.\nThat's fun and I recommend everyone at least *try* an instrument or a DAW (music-making program).\nBut music, at its core, is just organized sound.\nA computer can play sounds and it can organize them!\nWe can use code to think about and experiment with music.\n\nWe will check out a range of approaches instead of diving deep into just one.\nIf you find a topic within this course that you like, pursue it further!\nI can help you take additional steps in any direction, just email me at:\njacob@jippity.pro.\n\nEnjoy the ride — we are going to pick up some new vocabulary and build little musical laboratories in code.\n\nYou don't need to be an expert coder, at all. In fact, you can get a lot out of this course just by fiddling with numbers.\nIf you are a strong coder, please extend and alter the class projects. Build an instrument, or a piece of music, or a music game!\n\n\nQuick note: for this project we are using p5.js for the (simple) visuals,\nand Tone.js for the audio.\n\nTone.js is a great library overall for sound and music. It's better than p5.sound.\nI encourage you to learn more about it (with Jippity's help) as your musical imagination expands.\n\n\nOK, let's get to it!\n\nFirst things first, run this program and play around a little bit.\nThe 'Play' buttons should produce sound (let me know if they don't).\nChrome is the safest browser for this sort of thing, btw.\n\nWhat do you notice?\nPlease record a few observations and feel free to say them out loud too!\n\n-\n\n-\n\n-\n\n(What does each slider do?)\n(Can you make the sounds sound better? worse?)\n(Is this even music?)\n\n\nIt's great to listen to music with your heart and to feel emotional reactions.\nBut here, we're in the lab. Let's get on the same page by defining some terms.\nThis way, we know what others mean when they're talking about music.\n\nThe app you played with is a type of *synthesizer*.\nA synthesizer is a machine that produces (musical) sound.\nThere's a million different kinds of synthesizers, but most share a lot of basic features.\n\nLet's talk about the sliders controlling the synthesizers. What are they really doing?\n\nThey are controlling time! In some way...\n\n*Time* is the fuel of music.\n\nAt the most basic level, time manifests in two musical ways:\n1. Rhythm — how far apart (in time) are two musical events?\n2. Pitch — how *high* or *low* is a sound?\n\nWhat does pitch have to do with time?\nThe answer is that pitch, scientifically, is *frequency* — how often a cycle repeats.\nHere's how a speaker works:\nThe membrane of a speaker moves back and forth a tiny distance, really fast.\nThis causes the air in front of the speaker to vibrate in a wave pattern.\nThe vibrations in the air tickle small hairs in your ears, which your brain translates into the mental signal of \"sound.\"\nThe faster the speaker moves, the faster the air vibrates, and the higher the pitch we experience.\n\nTo get some ballpark numbers:\nThe absolute lowest sounds humans can hear are waves that repeat around 20 times per second.\n(We call this 20 \"Hertz\" or Hz, which just means cycles per second.)\nThe lowest note on a bass guitar is around 41 Hz; the lowest note on a piano is around 27.5 Hz.\nThe highest notes we can hear are like 20,000 Hz, but that is so high as to be a painful whistle.\nThe highest note on the piano is a little over 4,000 Hz.\nA low male speaking voice is in the 100 Hz range, and a high female voice is something like 250Hz.\n\nWe can sing higher, past 1,000 Hz for, say, an operatic soprano.\n100-1,000Hz is a rough estimate for a human vocal range.\n\nIf you play an instrument, you might wondering:\n\"What about *the notes* like A, C-sharp, E-flat?\"\nWe'll talk about those. Those are related to frequency too, but there's a little math to convert back-and-forth.\n\nFor now, we'll use pure frequency numbers instead of musical notes.\n\nSome questions to be answered with the app:\n\n- How do the two synthesizers sound together when they are both playing the same frequency?\n\n- What if they play two different frequencies that are close together?\n\n- Far apart?\n\n- Can you find a pattern in the numbers that tells you when they sound nice together and when they sound ugly?\n\n- What's going on with the wave diagram when you adjust a frequency slider?\n\nLet's take a closer look at the two waves. They have different shapes.\nThose shapes represent the in-and-out pattern of your speakers.\nOne more smooth, one more jagged. Can you describe the difference in tone?\n\nHigher frequency --> faster cycles --> thinner waves.\nLower frequency --> slower cycles --> wider waves.\n\nThe left wave shape is called a 'sine wave,' named after the mathematical function Sine.\nSine waves are smooth — in fact, the smoothest, most basic sound waves possible.\nThey sound smooth! Mellow...neutral...easy on the ears...\n\nThe right wave is called a 'square wave.' You can guess why.\nLess smooth wave, less smooth sound. This is the sound of an old videogame console!\n\nWe will learn about other wave shapes later on. (Feel free to explore 'sawtooth' and 'triangle' waves — two other fundamental shapes.)\n\nEven if two waves have the same frequency (same pitch), their shapes change the tone they produce.\nReal-world instruments make waves too — just much more complex. \nThe shape of the wave is what makes a clarinet sound different than a violin even when they play the same notes.\nIt's also what gives you your voice!\nEven if I just hum, I will sound different from you because my body's internal shapes produce a slightly different wave.\n\nSummary so far: \n- Frequency determines pitch.\n- Wave shape determines tone.\n\n\nNow, let's get into other aspects of time in music.\n1. How a *single note* develops over time; then\n2. How many notes come out over time and fit togther.\n\nLet's play with (1) first.\nMove the sliders that say \"Attack\" and \"Release.\"\nThose control the volume-over-time of one single note from that synth.\n\nAttack is the time it takes to reach full volume.\nRelease is the time it takes to go from full volume to silence.\n\nThe bottom graph shows this. Follow it with your eyes as one note plays.\n\nIn the context of music, we call this shape an \"Envelope.\"\nAn envelope tells you how loud one note is over time.\nPlay with the envelopes of the two synths! Try to make something you like.\n\nWe will get into some fancier envelopes later on, such as \"ADSR\" envelopes that can sustain a note until you let go of it (so that not all notes are the same length).\nThe point will remain the same: how loud is one note over its lifespan?\n\nFor (2), let's start talking about *rhythm*.\n\nMusic is not made of just one note! Duh!\nMusic \"schedules\" notes in sequence — that sequence is the rhythm.\n\nAs with pitch, there is a \"scientific\" way to describe rhythm and a \"musical\" way.\nThe scientific way is what you see now: measuring durations in seconds.\n\nTurn on the loop checkbox and play a note over and over. \nChange the loop length.\n\nLoop both synths at different lengths. Hey — it's kind of music!\n\nThe intersecting loops create a mathematical and musical relationship.\n\nCan you find two loop-length-numbers that form a pleasing rhythm?\nCan you make one that just stinks?\n\nHow does the feeling of the looping rhythm change if you adjust the frequencies?\n\nNotice any numerical patterns?\n\nHow does the envelope of each synth interact with the looping rhythm?\nTest out long vs. short envelopes, against long vs. short loops.\n\n\nObviously not all music is just two looping notes. There is a lot more to rhythm.\n\nThat will be our next topic — musical rather than scientific rhythm.\nWe will build a *sequencer* — a program to schedule notes on a rhythmic grid, sort of like a drummer.\n\nRhythm is the life of music, so that will provide a huge upgrade to that admittedly meager possibilities of this app.\n\nIn the meantime, feel free to read through the code of this app. Get Jippity's help!\nTruthfully it is not *that* interesting — Tone.js takes care of the most important audio functions,\nand the rest is just labeling, hooking up, and updating numbers.\n\nThe good news is that it's easy to edit this stuff. \n\n- Adjust the ranges of the sliders.\n\n- Try out different wave shapes.\n\n- Make a third synth on screen.\n\n- Make the app more beautiful.\n\nHave fun, follow your ears, and we'll continue our journey next time.\n\n*/\n\n\n\nlet synthSine, synthSquare;\n\nlet freqSliderSine, attackSliderSine, decaySliderSine, releaseSliderSine;\n\nlet freqSliderSquare, attackSliderSquare, decaySliderSquare, releaseSliderSquare;\n\nlet freqSliderSineX = 20;\n\nlet freqSliderSineY = 40;\n\nlet freqSliderSquareX = freqSliderSineX;\n\nlet freqSliderSquareY = freqSliderSineY\n\nconst envelopeGraphHeight = 100;\n\nconst envelopeGraphOffsetY = 350;\n\nlet loopCheckboxSine, loopCheckboxSquare;\n\nlet loopSliderSine, loopSliderSquare;\n\nlet loopIntevalSine = null;\n\nlet loopIntervalSquare = null;\n\nlet isPlayingSine = false;\n\nlet isPlayingSquare = false;\n\nlet freqLabelSine, attackLabelSine, releaseLabelSine;\n\nlet freqLabelSquare, attackLabelSquare, releaseLabelSquare;\n\nlet gainNodeSine, gainNodeSquare;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n noStroke();\n drawBackground();\n setupSlidersAndButtons();\n\n gainNodeSine = new Tone.Gain(0.1).toDestination();\n gainNodeSquare = new Tone.Gain(0.1).toDestination();\n}\n\nfunction playSynth(freqSlider, attackSlider, releaseSlider, isSquareWave = false) {\n // Create a new synthesizer instance for each note\n const synth = new Tone.Synth({\n oscillator: {\n type: isSquareWave ? 'square' : 'sine'\n }\n });\n\n // Connect the synth to the appropriate gain node\n if (isSquareWave) {\n synth.connect(gainNodeSquare);\n } else {\n synth.connect(gainNodeSine);\n }\n\n synth.envelope.attack = attackSlider.value();\n synth.envelope.release = releaseSlider.value();\n\n synth.triggerAttack(freqSlider.value());\n\n setTimeout(() => {\n synth.triggerRelease();\n }, attackSlider.value() * 1000);\n}\n\nfunction draw() {\n drawBackground();\n textAlign(LEFT);\n fill(0);\n textSize(16);\n\n // Draw envelope graph for sine synth, moved 50 pixels to the right\n drawEnvelopeGraph(freqSliderSineX + 50, envelopeGraphOffsetY, attackSliderSine, releaseSliderSine);\n\n // Draw envelope graph for square synth, moved 50 pixels to the right\n drawEnvelopeGraph(freqSliderSquareX + 50, envelopeGraphOffsetY, attackSliderSquare, releaseSliderSquare);\n\n // Draw wave shape for sine and square waves with the frequency from sliders\n drawWaveShape(freqSliderSineX + freqSliderSine.width + 100, freqSliderSineY - 30, 'sine', freqSliderSine.value());\n drawWaveShape(freqSliderSquareX + freqSliderSquare.width + 100, freqSliderSquareY - 30, 'square', freqSliderSquare.value());\n}\n\nfunction drawEnvelopeGraph(x, y, attackSlider, releaseSlider) {\n const halfCanvasWidth = width / 2;\n const graphWidth = halfCanvasWidth * 0.75;\n\n stroke(0);\n fill(2);\n rect(x - 10, y - 10, graphWidth + 20, envelopeGraphHeight + 40);\n\n noFill();\n stroke(0);\n\n beginShape();\n vertex(x, y + envelopeGraphHeight - 0);\n\n let attackEndX = x + (attackSlider.value() / 4.0) * graphWidth;\n vertex(attackEndX, y - 0);\n\n let releaseEndX = attackEndX + (releaseSlider.value() / 4.0) * graphWidth;\n vertex(releaseEndX, y + envelopeGraphHeight - 10);\n\n endShape();\n\n\n textSize(12);\n fill(0);\n textAlign(CENTER);\n text(\"Time\", x + graphWidth / 2, y + envelopeGraphHeight + 20);\n\n push();\n translate(x - 20, y + envelopeGraphHeight / 2);\n rotate(-HALF_PI);\n text(\"Volume\", 0, 0);\n pop();\n}\n\nfunction updateLoopInterval(type) {\n if (type === 'sine') {\n if (loopCheckboxSine.checked()) {\n clearInterval(loopIntervalSine);\n loopIntervalSine = setInterval(() => {\n playSynth(freqSliderSine, attackSliderSine, releaseSliderSine);\n }, loopSliderSine.value() * 1000);\n } else {\n clearInterval(loopIntervalSine);\n loopIntervalSine = null;\n }\n } else if (type === 'square') {\n if (loopCheckboxSquare.checked()) {\n clearInterval(loopIntervalSquare);\n loopIntervalSquare = setInterval(() => {\n playSynth(freqSliderSquare, attackSliderSquare, releaseSliderSquare, true);\n }, loopSliderSquare.value() * 1000);\n } else {\n clearInterval(loopIntervalSquare);\n loopIntervalSquare = null;\n }\n }\n}\n\nfunction drawBackground() {\n fill(135, 206, 235);\n rect(0, 0, width / 2, height);\n\n fill(100, 149, 237);\n rect(width / 2, 0, width / 2, height);\n}\n\nfunction drawWaveShape(x, y, type, frequency) {\n const waveWidth = 200; // Width of the wave shape box\n const waveHeight = 100; // Height of the wave shape box\n const padding = 10; // Padding inside the box\n\n stroke(0);\n fill(255);\n rect(x, y, waveWidth, waveHeight);\n\n noFill();\n stroke(0);\n\n beginShape();\n // Calculation to shrink/stretch wave according to Frequency\n const periods = 4 * (frequency / 440);\n for (let i = 0; i <= periods * TWO_PI; i += 0.1) {\n let waveY;\n if (type === 'sine') {\n waveY = y + waveHeight / 2 + sin(i) * ((waveHeight / 2) - padding);\n } else if (type === 'square') {\n waveY = y + waveHeight / 2 + (sin(i) >= 0 ? 1 : -1) * ((waveHeight / 2) - padding);\n }\n let waveX = x + padding + map(i, 0, periods * TWO_PI, 0, waveWidth - 2 * padding);\n if (waveX > x + waveWidth - padding) break; // Stop drawing if wave exceeds the box width\n vertex(waveX, waveY);\n }\n endShape();\n}\n\nfunction setupSlidersAndButtons() {\n freqSliderSine = createSlider(100, 1000, 440);\n freqSliderSine.position(freqSliderSineX, freqSliderSineY);\n freqLabelSine = createDiv(`Frequency: ${freqSliderSine.value()} Hz`);\n freqLabelSine.position(freqSliderSineX, freqSliderSineY - 20);\n freqSliderSine.input(() => freqLabelSine.html(`Frequency: ${freqSliderSine.value()} Hz`));\n\n attackSliderSine = createSlider(0, 2.0, 0.5, 0.05);\n attackSliderSine.position(freqSliderSineX, freqSliderSineY + 100);\n attackLabelSine = createDiv(`Attack: ${attackSliderSine.value()} seconds`);\n attackLabelSine.position(freqSliderSineX, freqSliderSineY + 80);\n attackSliderSine.input(() => attackLabelSine.html(`Attack: ${attackSliderSine.value()} seconds`));\n\n releaseSliderSine = createSlider(0, 2.0, 0.5, 0.05);\n releaseSliderSine.position(freqSliderSineX, freqSliderSineY + 200);\n releaseLabelSine = createDiv(`Release: ${releaseSliderSine.value()} seconds`);\n releaseLabelSine.position(freqSliderSineX, freqSliderSineY + 180);\n releaseSliderSine.input(() => releaseLabelSine.html(`Release: ${releaseSliderSine.value()} seconds`));\n\n freqSliderSquareX = width / 2 + 20;\n\n freqSliderSquare = createSlider(100, 1000, 440);\n freqSliderSquare.position(freqSliderSquareX, freqSliderSquareY);\n freqLabelSquare = createDiv(`Frequency: ${freqSliderSquare.value()} Hz`);\n freqLabelSquare.position(freqSliderSquareX, freqSliderSquareY - 20);\n freqSliderSquare.input(() => freqLabelSquare.html(`Frequency: ${freqSliderSquare.value()} Hz`));\n\n attackSliderSquare = createSlider(0, 2.0, 0.5, 0.05);\n attackSliderSquare.position(freqSliderSquareX, freqSliderSquareY + 100);\n attackLabelSquare = createDiv(`Attack: ${attackSliderSquare.value()} seconds`);\n attackLabelSquare.position(freqSliderSquareX, freqSliderSquareY + 80);\n attackSliderSquare.input(() => attackLabelSquare.html(`Attack: ${attackSliderSquare.value()} seconds`));\n\n releaseSliderSquare = createSlider(0, 2.0, 0.5, 0.05);\n releaseSliderSquare.position(freqSliderSquareX, freqSliderSquareY + 200);\n releaseLabelSquare = createDiv(`Release: ${releaseSliderSquare.value()} seconds`);\n releaseLabelSquare.position(freqSliderSquareX, freqSliderSquareY + 180);\n releaseSliderSquare.input(() => releaseLabelSquare.html(`Release: ${releaseSliderSquare.value()} seconds`));\n\n let playButtonSine = createButton('►'); // Play icon for sine\n playButtonSine.position(freqSliderSineX + freqSliderSine.width + 25, freqSliderSineY - 20);\n playButtonSine.size(50, 50);\n playButtonSine.mousePressed(() => {\n if (loopCheckboxSine.checked()) {\n if (!isPlayingSine) {\n isPlayingSine = true;\n playButtonSine.html('▐▐'); // Two rectangles for pause\n updateLoopInterval('sine');\n } else {\n isPlayingSine = false;\n playButtonSine.html('►');\n clearInterval(loopIntervalSine);\n loopIntervalSine = null;\n }\n } else {\n playSynth(freqSliderSine, attackSliderSine, releaseSliderSine);\n }\n });\n\n let playButtonSquare = createButton('►'); // Play icon for square\n playButtonSquare.position(freqSliderSquareX + freqSliderSquare.width + 25, freqSliderSquareY - 20);\n playButtonSquare.size(50, 50);\n playButtonSquare.mousePressed(() => {\n if (loopCheckboxSquare.checked()) {\n if (!isPlayingSquare) {\n isPlayingSquare = true;\n playButtonSquare.html('▐▐'); // Two rectangles for pause\n updateLoopInterval('square');\n } else {\n isPlayingSquare = false;\n playButtonSquare.html('►');\n clearInterval(loopIntervalSquare);\n loopIntervalSquare = null;\n }\n } else {\n playSynth(freqSliderSquare, attackSliderSquare, releaseSliderSquare, true);\n }\n });\n\n loopCheckboxSine = createCheckbox('Loop', false);\n loopCheckboxSine.position(freqSliderSineX + freqSliderSine.width + 100, freqSliderSineY + 100);\n loopCheckboxSine.changed(() => {\n if (loopCheckboxSine.checked()) {\n updateLoopInterval('sine');\n } else {\n clearInterval(loopIntervalSine);\n loopIntervalSine = null;\n }\n });\n\n loopSliderSine = createSlider(0.1, 3.0, 0.8, 0.05);\n loopSliderSine.position(freqSliderSineX + freqSliderSine.width + 100, freqSliderSineY + 150);\n loopSliderSine.input(() => {\n updateLoopInterval('sine');\n loopLabelSine.html(`Every ${loopSliderSine.value()} seconds`);\n });\n\n let loopLabelSine = createDiv(`Every ${loopSliderSine.value()} seconds`);\n loopLabelSine.position(freqSliderSineX + freqSliderSine.width + 100, freqSliderSineY + 130);\n\n loopCheckboxSquare = createCheckbox('Loop', false);\n loopCheckboxSquare.position(freqSliderSquareX + freqSliderSquare.width + 100, freqSliderSquareY + 100);\n loopCheckboxSquare.changed(() => {\n if (loopCheckboxSquare.checked()) {\n updateLoopInterval('square');\n } else {\n clearInterval(loopIntervalSquare);\n loopIntervalSquare = null;\n }\n });\n\n loopSliderSquare = createSlider(0.1, 3.0, 1.2, 0.05);\n loopSliderSquare.position(freqSliderSquareX + freqSliderSquare.width + 100, freqSliderSquareY + 150);\n loopSliderSquare.input(() => {\n updateLoopInterval('square');\n loopLabelSquare.html(`Every ${loopSliderSquare.value()} seconds`);\n });\n\n let loopLabelSquare = createDiv(`Every ${loopSliderSquare.value()} seconds`);\n loopLabelSquare.position(freqSliderSquareX + freqSliderSquare.width + 100, freqSliderSquareY + 130);\n}\n\n\n\n","style.css":"","index.html":"\n\n\n\n \n \n Synth Demo 1\n \n \n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"project_id":4931,"sender":"client_script","message":"","deleted":0,"created_at":"2025-03-17T18:02:36.874243Z","output_tokens":null,"code_id":216328,"input_tokens":null,"id":117813}],"assets":[{"cloudinary_id":"veep0imkidbm97qcqtb1","name":"ss","deleted":false,"id":60874,"created_at":"2025-03-10T23:17:34.818670Z","project_id":4931,"resource_type":"image"},{"cloudinary_id":"wfbhibnjikjgkwdere29","name":"jippityCrab","deleted":false,"id":60845,"created_at":"2025-03-10T18:38:12.717506Z","project_id":4931,"resource_type":"image"}],"messages_sent":80,"comments":[],"steps":[]}