Tone.js Tonality Explorer

{"name":"Make Some Noise Week 3","description":"","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/fdqxb60f5sazuv5p0je3","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-03-24T16:10:09.385509Z","updated_at":"2025-03-24T16:10:09.385511Z","user_id":5,"status":"PRIVATE","parent_id":5760,"id":6494,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"/*\nWe push on in our study of music and ways to compute it. \n\nUp next: **harmony.**\n\nWhereas rhythm deals with sounds organized in time, harmony deals with sounds organized in *pitch.*\n\nThat is to say, we are going to figure out how to fit several sounds together at once.\n\nWe are building *chords.*\n\nHarmony is a rich and old discipline, spanning cultures and genres across the centuries.\n\nWe will focus on what we can program on a computer.\n\nWhat I want to show you is that there are different ways about organizing pitches on top of each other.\n\nIf you continue with music, a huge part of your personal style will be how you build chords and how you *sequence* them.\n\nFirst off, try one of the Synths in the top group. The slider controls *frequency,*\n\nwhich, recall, is the number of vibrations per second in the air, caused by your speakers.\n\nHigher frequency —> higher pitch.\n\nBut the music you know doesn't sound so \"slidey\" as what you hear when you play around with those sliders.\n\nNotes tend to come in \"slots\" like piano keys or guitar frets,\nand even continuous-pitch instruments like violins don't slide around like that normally.\n\nWe'll have to figure out what the slots are.\n\nBut first, let's see why we want slots at all.\n\nBuild some chords by playing two or more Synths at once.\n\nWhat do you notice?\n\nIf you randomly choose frequencies, you'll probably make an ugly chord.\n\nTry two notes close together. Far apart...equally spaced...\n\nAny observations? Can you search for something beautiful?\n\nYou will likely hear some strange \"rough\" effects along the way.\n\nWhat's up with that? (Try not to give yourself a headache!)\n\nRemember that sound waves are ... waves.\n\nWhat happens when you \"add\" two waves together?\n\nKeep experimenting.\n\nIf you add three...four...five notes, you *can* produce beautiful and strange sounds, \nbut you will have to wade through harsh and ugly garbage to find them!\n\nNow you should see why we want to *restrict* our space of notes a bit.\n\nWe want \"notches\" or \"slots\" of only notes that sound good(ish) with each other.\n\nIt turns out the notes that sound good together have special mathematical relationships.\n\nMusicians and thinkers have been searching for those relationships since Ancient Greek times.\n\nPythagoras (yes, *that* Pythagoras) wrote about strings whose lengths are in simple proportions like 2:3 or 3:5.\n\nThose strings, plucked, sound more pleasant together than weirder relationships like 17:19.\n\nIn math terms, frequencies that are *whole number multiples* of a given frequency sound nice together.\n\nThe second group of sliders represents Pythagoras' approach to tuning musical notes.\n\nSet a *fundamental frequency* with the input box — a low pitch on which the five sliders will be based.\n\nThen slide each synth to produce an exact multiple of that fundamental frequency.\n\nMusicians call these *overtones* or *partials,* as in, \"the 4th overtone of 55 Hz.\"\n\nTry a few together — they will sound smoother than the random continuous-pitch chords from the first group.\n\nEspecially even-number multiples. You can still make wild, crunchy chords, but they will be a bit more \"locked in.\"\n\nPlay with the volume sliders on the right to craft a balance.\n\nI recommend turning higher partials down lower so that they recede into the background.\n\nYou might be able to tune these sliders just right so that the whole texture blends into a single sound.\n\nThis is basically how complex sounds work! Everything you hear, from your own voice to a thump on the table to a trumpet,\nis a *mixture* of simpler, mathematically-related sounds. \n\nThe relative volumes of each overtone are what give a sound its unique character.\n\n\"Brighter\" sounds have more high overtones.\n\n\"Darker sounds\" emphasize the lower ones.\n\nFor instance, if you set up only odd-numbered overtones and turn their volumes down, you can produce a clarinet-like sound.\n\nDo the same with even-numbered overtones for something more like a pipe organ.\n\nPlay around for a bit — use the overtones and their relative volumes to try to \"fuse\" several sounds into one.\n\n\n\nYou might notice that as the partials go higher, the gaps between the notes shrink.\n\nThe notes get closer together higher in the overtone spectrum.\n\nThat might not be what you expect! The frequencies, after all, are like:\n\n55, 110, 165, 220, 275, 330, .... (evenly spaced)\n\nThis is a bigger discussion that we could have some other time, \nbut the human ear perceives pitch on a *logarithmic* curve relative to frequency.\n\nThat means that what we hear as the gap between 55 and 110 is the same as the gap between 110 and 220, and 220 to 440, and 440 to 880, ...\nBased on multiplication, not addition.\n\nAs music developed over the centuries, musicians and instrument designers sought out\na more \"symmetrical\" system with useful notes spaced out in a more even way.\n\nFor reasons you'll discover if you play around with harmony, even spacing makes music more flexible.\n\nThe final mathematical answer to this problem of how to space notes evenly was devised around 1600,\nbut it wasn't until the 1800s when instruments were commonly built using this system.\n\n\"Equal temperament\" uses *irrational numbers* — specifically *roots of 2* — \nto \"counteract\" the logarithmic scale of pitch versus frequency.\n\nThe 12th root of 2 is around 1.059463...\nThat is the *ratio* of one note to the next in 12-equal-temperament?\n\nWhy 12? It's a nice symmetrical number whose steps work well for music.\n\nMore interesting math: Western scales (collections of useful notes) are usually 7 notes.\nBut the 7 notes are *not* equally spaced — they consist of *half-steps* and *whole-steps.*\n\nThe *major scale* — the primary scale of Western music — has the following structure:\n\nWhole Whole Half Whole Whole Whole Half.\n\nIf Half = 1 and Whole = 2:\n\n2 + 2 + 1 + 2 + 2 + 2 + 1 = 12.\n\nSo 7 notes out of a collection of 12 possible slots.\n\nThe 7 appears through note names: A, B, C, D, E, F, G.\n\nSharps (#) and Flats (b) modify those notes by pushing them up or down a half step.\n\nI know this is a lot of information. Come back to this later if you want to learn more. Email me.\n\nHere's what you need to know: the standard system of notes that 99% of music you hear uses\nconsists of a repeating cycle of 12 notes that use 7 letter names plus sharps and flats.\n\nThe 12 notes are *equally spaced* and that makes music using them versatile and \"in tune.\"\n\nThere is much much more to say about the \"battles\" for various tunings,\nbut now I just want you to use your ears and play around.\n\nThe third group of sliders spaces out the notes equally and lists their letter names.\n\nYes, you can still make ugly chords. But space the notes out,\nand you will find lots of pretty ones! \nStart with three-note chords whose steps are like 3, 4, 5, 6 steps apart — not too close, not too far.\n\nThis will start to sound like music you have heard.\n\nYou'll notice the Hz values get funky — that's a consequence of the irrational numbers fighting against the logarithm.\n\nThe two most famous three note chords have spacings [0, 4, 7] and [0, 3, 7].\n\nThose are called *Major Triads* and *Minor Triads,* \nand most of the chords you hear in popular music are those two types of chords, built on different notes.\n\nI set up two chord-wheels where you can trigger Major and Minor triads in one click.\n\nI also set up a basic sequencer where you can devise a *chord progression* —\n— a loop of four chords, which is how tons and tons of songs work.\n\nAgain, play around! I am here to offer musicianly advice. But just follow your ears.\n\n~ ~ ~\n\nSummary: \n* If you allow *any* frequency value, you produce sounds that are slidey and often ugly when layered.\n* If you lock in notes to have simple mathematical (fraction) relationships, you get more pleasing chords,\n but that system, for various reasons, is no longer used because it is not versatile.\n* If you use some fancy math to *equally-space* your notes, you get the system we use in most music today.\n Within that system, there is an enormous amount of technique and subtlety. \n You can spend decades learning harmony. I am not teaching you all that.\n I am teaching you about the math behind the systems and giving some insight as to why we use them.\n\nNext up, the programming behind all this!\n*/\n\n/*\n\nThe programming for this little tool is a lot of repeat from week 1:\nUse Tone.js to set up some synths and update their frequencies.\nThe main difference is that we use some new math to set those synths' frequencies in new ways.\n\nUse what you learned in week 1 to adjust the sound, though! \nChange the wave shape, or add more waves, or change the ranges... go for it!\n\nWe will also recall some skills from week 2:\n* Clicking on a part of the screen to trigger a sound (the circles)\n* Sequencing musical events using setInterval.\n\nYou may also want to update the drab look of this app. Be my guest — use CSS.\n\n*/\n\n\n\nlet synths = [];\n\nlet frequencySliders = [];\n\nlet playButtons = [];\n\nlet frequencyTexts = [];\n\nlet noteSliders = [];\n\nlet noteButtons = [];\n\nlet noteTexts = [];\n\nconst frequencyOfA = 110;\n\nconst circleOfFifthsNotes = [\n \"C\", \"G\", \"D\", \"A\", \"E\", \"B\", \"F#\", \"C#\", \"Ab\", \"Eb\", \"Bb\", \"F\"\n];\n\nconst circleRadius = 100;\n\nlet circleCenterX\n\nlet circleCenterY\n\nlet minorCircleCenterX;\n\nlet minorCircleCenterY;\n\nconst majorTriadIntervals = [0, 4, 7];\n\nlet quantizedFrequencySliders = [];\n\nlet quantizedFrequencyTexts = [];\n\nlet quantizedFrequencyButtons = [];\n\nlet volumeSliders = [];\n\nlet isPlaying = new Array(15).fill(false);\n\nlet quantizedBaseFrequency = 55;\n\n// let sequencerChords = Array(4).fill().map(() => ({ keyIndex: 0, isMajor: true }));\nlet sequencerChords = [\n { keyIndex: 0, isMajor: true }, // C major\n { keyIndex: 1, isMajor: true }, // G major\n { keyIndex: 3, isMajor: false }, // A minor\n { keyIndex: 4, isMajor: false } // E minor\n];\n\nlet isSequencerPlaying = false;\n\nlet currentChordIndex = 0;\n\nlet sequencerInterval;\n\nlet playSequencerButton;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(30, 20, 40);\n\n // This will control volume. Change the number for loud/soft (don't go past 1.0).\n const gain = new Tone.Gain(0.125).toDestination();\n\n ////////////////////////////\n // The first five synths: continuous slidey frequency input.\n // Loop to make five synths:\n for (let i = 0; i < 5; i++) {\n let synth = new Tone.Synth({\n oscillator: {\n type: 'triangle' // sine, square, triangle, sawtooth\n },\n envelope: {\n attack: 2.0, // Time in seconds to reach full volume\n decay: 2.0, // Time in seconds to fall to sustain level\n sustain: 0.9, // Level to hold during sustain phase (0 to 1)\n release: 2.0 // Time in seconds to fade out\n }\n }).connect(gain);\n // Make sure this synth is on the list of synths.\n synths.push(synth);\n // And it is not playing: store that too.\n isPlaying.push(false);\n\n // Create a slider for frequency control\n let slider = createSlider(100, 1000, 440); // min, max, default\n slider.position(100, 30 * i + 30);\n slider.size(200);\n slider.input(() => updateSynthFrequency(i, slider.value()));\n frequencySliders.push(slider);\n\n // Create a button for playing the synth\n let button = createButton('Play');\n button.position(320, 30 * i + 30);\n button.mousePressed(() => toggleSynthByIndex(i));\n playButtons.push(button);\n\n // Create a volume slider for adjusting gain\n let volumeSlider = createSlider(0, 100, 100); // min, max, default\n volumeSlider.position(380, 30 * i + 30); // Position to the right of the play button\n volumeSlider.size(100); // Set width to 100px\n volumeSlider.input(() => {\n const volume = volumeSlider.value() / 100; // Divide by 100 so output is 0.0 — 1.0\n synth.volume.value = Tone.gainToDb(volume); // Set the volume in decibels\n });\n volumeSliders.push(volumeSlider); // Store the volume sliders so we can change it later.\n\n // Create a text element for displaying frequency\n frequencyTexts[i] = createP(`${slider.value()} Hz`);\n frequencyTexts[i].position(10, 30 * i + 15);\n frequencyTexts[i].style('color', 'white');\n\n\n }\n\n\n\n /////////////////////////////////\n // Next five synths: a base frequency TIMES a whole number.\n let baseFrequencyInput = createInput(quantizedBaseFrequency, 'number');\n baseFrequencyInput.attribute('min', 20);\n baseFrequencyInput.attribute('max', 200);\n baseFrequencyInput.position(10, 200); // Position it above the middle set of sliders\n baseFrequencyInput.input(() => {\n quantizedBaseFrequency = parseFloat(baseFrequencyInput.value()) || 55;\n // This updates the synths when the base frequency changes.\n updateQuantizedFrequencies();\n });\n\n // Loop for five more.\n for (let i = 0; i < 5; i++) {\n // Create quantized frequency sliders\n let quantizedSlider = createSlider(1, 16, 0, 1); // Range 1—16\n quantizedSlider.position(100, 30 * (i + 5) + 80);\n quantizedSlider.size(200);\n quantizedSlider.input(() => updateSynthFrequency(i + 5, quantizedSlider.value())); // Always update\n quantizedFrequencySliders.push(quantizedSlider);\n\n // Create a button for playing the quantized frequency\n let quantizedButton = createButton('Play');\n quantizedButton.position(320, 30 * (i + 5) + 80);\n quantizedButton.mousePressed(() => toggleSynthByIndex(i + 5));\n quantizedFrequencyButtons.push(quantizedButton);\n\n // Create a text element for displaying quantized frequency\n quantizedFrequencyTexts[i] = createP(`${quantizedSlider.value() * 55} Hz`);\n quantizedFrequencyTexts[i].position(10, 30 * (i + 5) + 65);\n quantizedFrequencyTexts[i].style('color', 'white');\n\n\n\n const synth = new Tone.Synth({\n oscillator: {\n type: 'triangle' // sine, square, triangle, sawtooth\n },\n envelope: {\n attack: 0.3,\n decay: 2.0,\n sustain: 0.9,\n release: 2.0\n }\n }).connect(gain);\n synths.push(synth);\n isPlaying.push(false);\n\n // Create a volume slider for adjusting gain\n let volumeSlider = createSlider(0, 100, 100); // Range from 0 to 100 for volume\n volumeSlider.position(380, 30 * (i + 5) + 80); // Position to the right of the play button\n volumeSlider.size(100); // Set width to 100px\n volumeSlider.input(() => {\n const volume = volumeSlider.value() / 100; // Convert to 0-1 range\n synths[i + 5].volume.value = Tone.gainToDb(volume); // Set the volume in decibels\n });\n volumeSliders.push(volumeSlider); // Store the volume sliders\n }\n\n ///////////////////////\n // Third set: letter-named notes.\n\n // Default: 5 As\n let noteFrequencies = [110.0, 110.0, 110.0, 110.0, 110.0];\n // Another five-loop\n for (let i = 0; i < 5; i++) {\n // Create a slider for note control (non-continuous)\n let noteSlider = createSlider(0, 36, 0, 1); // Range from 0 to 36 semitones for three octaves\n noteSlider.position(120, 30 * (i + 5) + 280); // Adjusted position down by 200 pixels\n noteSlider.size(400); // Make the slider longer\n noteSlider.input(() => updateSynthFrequency(i + 10, noteSlider.value()));\n noteSliders.push(noteSlider);\n\n // Create a button for playing the note synth\n let noteButton = createButton('Play');\n noteButton.position(540, 30 * (i + 5) + 280); // Adjusted position to the right\n noteButton.mousePressed(() => toggleSynthByIndex(i + 10));\n noteButtons.push(noteButton);\n\n // Create a text element for displaying note names\n noteTexts[i] = createP(`${frequencyToNoteName(noteFrequencies[i])}: ${noteFrequencies[i]} Hz`); // Format note text\n noteTexts[i].position(10, 30 * (i + 5) + 265); // Adjusted position to align with the slider\n noteTexts[i].style('color', 'white'); // Set text color to white\n const synth = new Tone.Synth({\n oscillator: {\n type: 'triangle' // sine, square, triangle, sawtooth\n },\n envelope: {\n attack: 2.0,\n decay: 2.0,\n sustain: 0.9,\n release: 2.0\n }\n }).connect(gain);\n synths.push(synth);\n isPlaying.push(false);\n\n // Create a volume slider for adjusting gain\n let volumeSlider = createSlider(0, 100, 100);\n volumeSlider.position(600, 30 * (i + 5) + 280); // Position \n volumeSlider.size(100); // Set width\n volumeSlider.input(() => {\n const volume = volumeSlider.value() / 100; // Convert to 0-1 range\n synths[i + 10].volume.value = Tone.gainToDb(volume); // Set the volume in decibels\n });\n volumeSliders.push(volumeSlider); // save the volume sliders\n }\n\n\n //////////////////////\n // For the chord circles\n\n circleCenterX = windowWidth - 150; // x position of the center of the first circle\n circleCenterY = 200; // y position of the center of the first circle\n\n minorCircleCenterX = circleCenterX;\n minorCircleCenterY = circleCenterY + 250;\n\n let yPos = 700;\n\n\n ///////////////////\n // For the chord sequencer\n\n for (let i = 0; i < 4; i++) {\n let keySelect = createSelect();\n keySelect.position(250 + i * 150, yPos);\n circleOfFifthsNotes.forEach((note, index) => {\n keySelect.option(note, index);\n });\n keySelect.selected(sequencerChords[i].keyIndex);\n keySelect.changed(() => {\n sequencerChords[i].keyIndex = parseInt(keySelect.value());\n });\n\n let typeSelect = createSelect();\n typeSelect.position(250 + i * 150, yPos + 30);\n typeSelect.option('Major', true);\n typeSelect.option('Minor', false);\n typeSelect.selected(sequencerChords[i].isMajor.toString());\n typeSelect.changed(() => {\n sequencerChords[i].isMajor = (typeSelect.value() === 'true');\n });\n }\n\n playSequencerButton = createButton('Play Chord Progression');\n playSequencerButton.position(50, yPos + 20);\n playSequencerButton.mousePressed(toggleSequencer);\n\n}\n\nfunction draw() {\n // We just need to update the text of the sliders!\n for (let i = 0; i < frequencySliders.length; i++) {\n frequencyTexts[i].html(`${frequencySliders[i].value()} Hz`);\n }\n\n for (let i = 0; i < quantizedFrequencySliders.length; i++) {\n quantizedFrequencyTexts[i].html(`${quantizedBaseFrequency} * ${quantizedFrequencySliders[i].value()} Hz`);\n }\n\n for (let i = 0; i < noteSliders.length; i++) {\n let noteFrequency = frequencyOfA * Math.pow(Math.pow(2, (1 / 12)), noteSliders[i].value());\n noteTexts[i].html(`${frequencyToNoteName(noteFrequency)}, ${noteFrequency.toFixed(2)} Hz`); // Format note text\n }\n\n // Draw both circles:\n drawCircleOfFifths(circleCenterX, circleCenterY, circleOfFifthsNotes, false);\n drawCircleOfFifths(minorCircleCenterX, minorCircleCenterY, circleOfFifthsNotes.map(note => note.toLowerCase()), true);\n}\n\n// This gets used to change frequencies as sliders move.\n// You have to tell it which synth (index) and to what frequency (value).\nfunction updateSynthFrequency(index, value) {\n let frequency;\n\n if (index >= 0 && index < 5) {\n // Regular synths\n frequency = value; // Use the value directly from the frequency slider\n } else if (index >= 5 && index < 10) {\n // Quantized synths\n frequency = value * quantizedBaseFrequency; // Multiply overtone number by fundamental\n } else if (index >= 10 && index < 15) {\n // Note synths\n frequency = frequencyOfA * Math.pow(2, value / 12); // Calculate note frequency using equal-temperament math.\n }\n\n synths[index].frequency.value = frequency; // Set the frequency of the chosen synth.\n}\n\n// Turn synths on/off\nfunction toggleSynthByIndex(index) {\n let frequency;\n let synthIndex = index;\n\n if (index >= 0 && index < 5) {\n // Slidey synths\n if (isPlaying[index]) {\n synths[synthIndex].triggerRelease();\n playButtons[index].html('Play');\n } else {\n synths[synthIndex].triggerAttack(frequencySliders[synthIndex].value());\n playButtons[index].html('Stop');\n }\n } else if (index >= 5 && index < 10) {\n // overtone synths\n frequency = quantizedFrequencySliders[index - 5].value() * quantizedBaseFrequency;\n if (isPlaying[synthIndex]) {\n synths[synthIndex].triggerRelease();\n quantizedFrequencyButtons[index - 5].html('Play');\n } else {\n synths[synthIndex].triggerAttack(frequency);\n quantizedFrequencyButtons[index - 5].html('Stop');\n }\n } else if (index >= 10 && index < 15) {\n // named note synths\n let noteFrequency = frequencyOfA * Math.pow(2, noteSliders[index - 10].value() / 12); // Calculate note frequency\n if (isPlaying[synthIndex]) {\n synths[synthIndex].triggerRelease();\n noteButtons[index - 10].html('Play');\n } else {\n synths[synthIndex].triggerAttack(noteFrequency);\n noteButtons[index - 10].html('Stop');\n }\n }\n\n isPlaying[synthIndex] = !isPlaying[synthIndex]; // Toggle play/pause\n}\n\n// This resets middle synths when the fundamental changes\nfunction updateQuantizedFrequencies() {\n for (let i = 0; i < quantizedFrequencySliders.length; i++) {\n // Calculate the new frequency based on the base frequency and slider value\n const newFrequency = quantizedBaseFrequency * quantizedFrequencySliders[i].value();\n\n // Update the frequency of the corresponding synth\n synths[i + 5].frequency.value = newFrequency;\n\n // Update the display text for the frequency\n quantizedFrequencyTexts[i].html(`${quantizedBaseFrequency} * ${quantizedFrequencySliders[i].value()} Hz`);\n }\n}\n\n// Map frequencies to note names\nfunction frequencyToNoteName(frequency) {\n const notes = [\"A\", \"Bb\", \"B\", \"C\", \"C#\", \"D\", \"Eb\", \"E\", \"F\", \"F#\", \"G\", \"G#\"];\n let index = Math.round(12 * Math.log2(frequency / frequencyOfA));\n return notes[(index + 12) % 12]; // Wrap around the twelve note names.\n}\n\n// Checks if clicked in the circles using some trigonometry.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, circleCenterX, circleCenterY) < circleRadius) {\n let angle = atan2(mouseY - circleCenterY, mouseX - circleCenterX);\n let index = floor(map(angle, -PI, PI, 0, 12)) % 12;\n playMajorTriad(index);\n } else if (dist(mouseX, mouseY, minorCircleCenterX, minorCircleCenterY) < circleRadius) {\n let angle = atan2(mouseY - minorCircleCenterY, mouseX - minorCircleCenterX);\n let index = floor(map(angle, -PI, PI, 0, 12)) % 12;\n playMinorTriad(index);\n }\n}\n\n// Lay out a circle divided intwo twelve slices.\nfunction drawCircleOfFifths(centerX, centerY, notes, isLowerCase) {\n stroke(255);\n strokeWeight(2);\n noFill();\n ellipse(centerX, centerY, circleRadius * 2, circleRadius * 2);\n\n for (let i = 0; i < notes.length; i++) {\n let angle = map(i, 0, notes.length, 0, TWO_PI);\n let x1 = centerX + cos(angle) * circleRadius;\n let y1 = centerY + sin(angle) * circleRadius;\n let x2 = centerX + cos(angle) * (circleRadius - 20);\n let y2 = centerY + sin(angle) * (circleRadius - 20);\n\n line(x1, y1, x2, y2);\n }\n\n for (let i = 0; i < notes.length; i++) {\n let angle = map(i, 0, notes.length, 0, TWO_PI);\n let noteX = centerX + cos(angle + HALF_PI + (PI / 12)) * (circleRadius - 40);\n let noteY = centerY + sin(angle + HALF_PI + (PI / 12)) * (circleRadius - 40);\n\n fill(255);\n noStroke();\n textAlign(CENTER, CENTER);\n text(notes[i], noteX, noteY);\n }\n textSize(32); // Set text size for the emoji\n if (!isLowerCase) {\n text('😊', centerX, centerY); // Smiley face for major chords\n } else {\n text('☹️', centerX, centerY); // Frowny face for minor chords\n }\n textSize(14)\n}\n\n// Play three notes with a spacing of 0, 4, 7 in the chromatic scale.\nfunction playMajorTriad(index) {\n const fifths = [0, 7, 14, 21, 28, 35, 42, 49, 56, 63, 70, 77];\n let rootNoteFrequency = frequencyOfA * Math.pow(2, fifths[index] / 12);\n\n while (rootNoteFrequency > 440) {\n rootNoteFrequency /= 2;\n }\n\n while (rootNoteFrequency < 165) {\n rootNoteFrequency *= 2;\n }\n\n const gain = new Tone.Gain(0.125).toDestination();\n const majorTriadIntervals = [0, 4, 7]; // Major triad intervals\n majorTriadIntervals.forEach(interval => {\n const noteFrequency = rootNoteFrequency * Math.pow(2, interval / 12);\n const synth = new Tone.Synth().connect(gain);\n synth.triggerAttackRelease(noteFrequency, 0.5);\n });\n}\n\n// Play three notes with a spacing of 0, 3, 7 in the chromatic scale.\nfunction playMinorTriad(index) {\n const fifths = [0, 7, 14, 21, 28, 35, 42, 49, 56, 63, 70, 77];\n let rootNoteFrequency = frequencyOfA * Math.pow(2, fifths[index] / 12);\n\n while (rootNoteFrequency > 440) {\n rootNoteFrequency /= 2;\n }\n\n while (rootNoteFrequency < 165) {\n rootNoteFrequency *= 2;\n }\n\n const gain = new Tone.Gain(0.125).toDestination();\n const minorTriadIntervals = [0, 3, 7]; // Minor triad intervals\n minorTriadIntervals.forEach(interval => {\n const noteFrequency = rootNoteFrequency * Math.pow(2, interval / 12);\n const synth = new Tone.Synth().connect(gain);\n synth.triggerAttackRelease(noteFrequency, 0.5);\n });\n}\n\n// This helps out with the chord sequencer\nfunction playChord() {\n let chord = sequencerChords[currentChordIndex];\n if (chord.isMajor) {\n playMajorTriad(chord.keyIndex);\n } else {\n playMinorTriad(chord.keyIndex);\n }\n}\n\n// Turn chord sequencer on/off\nfunction toggleSequencer() {\n\n if (isSequencerPlaying) {\n clearInterval(sequencerInterval);\n isSequencerPlaying = false;\n playSequencerButton.html('Play Chord Progression');\n\n } else {\n isSequencerPlaying = true;\n playChord();\n sequencerInterval = setInterval(() => {\n currentChordIndex = (currentChordIndex + 1) % 4; // Cycle a 4-loop\n playChord();\n }, 1000); // Play one note per second\n playSequencerButton.html('Pause Chord Progression');\n\n }\n}\n\n\n\n\n\n","style.css":"\n\nbody {\n margin: 0;\n background-color: #1E1428;\n\n overflow-x: hidden;\n\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n \n \n Tone.js Tonality Explorer\n \n \n \n\n\n

\n \n

\n \n\n"},"chat_history":[],"assets":[{"cloudinary_id":"fdqxb60f5sazuv5p0je3","name":"ss","deleted":false,"id":62612,"created_at":"2025-03-24T16:10:09.392946Z","project_id":6494,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}