Tone.js Effects

[00:00:00]
>> So one more a little demo here that's basically just building on the last demo and showing how you can take that last demo. And then start to create something that's a little bit more artful, I guess, or something that's a little bit more a step further than just a circle.

[00:00:18]
But you can take these random colors from a dataset of risograph colors, from a risograph printer maybe, and they have a little code with them and a name. And every time you click, chooses a random color, plays a random node, and changes the visuals. And it's a very simple demo, it's not very advanced, but you can see how it just creates a bit more of an emotional feeling than just a single circle on the screen.

[00:00:45]
This is also using one other little thing that I'll go into here, which is an effect. And this demo is kind of inspired by Patatap in a way of, kind of that's where it got this inspiration of the shapes randomly in the sounds, cuz I really love Patatap, such a nice whole thing.

[00:01:04]
So this is an example of how we can start to wire in effects with tone.js. So if we look at tone.js, we just check their documentation, we go down, we'll see a whole bunch of different effects that we can choose from. So there's a few that I might explore today, but you might have to look at them also in your own time.

[00:01:28]
But the one I like to use just to start off sometimes with these kinds of sounds is a FeedbackDelay. So if we go in here, we'll see how to use it. So the FeedbackDelay is a delay that sort of feeds back on itself and then slowly decays after some amount of feedback that goes through.

[00:01:50]
And it can get to the point if you set it up incorrectly, where it's just continually feedbacking and maybe getting louder and louder or something, and creating a problem. But if you managed to tune the parameters in a way that is nice and works, then you have this nice sort of delay that's a bit of an echo.

[00:02:10]
But this echo that builds on itself, if you keep pushing it, and it creates this really nice kind of warm tone that you hear here.

[00:02:18]
[MUSIC]

[00:02:21]
So to use this, we're gonna set up the FeedbackDelay, the constructor here, pass in the delay time and we're gonna use 8 nodes here. So this is the syntax that tone.js supports. Like I was mentioning earlier, we could try just passing in another value for time. So if we go into the documentation for time, they show you a little bit about how to use it.

[00:02:52]
It could just be numbers, which is in seconds, and then we could have a very exact second based delay, so let's say, one second delay or something like that. Or we could use this notation, like triplets or 8 nodes, or whatever for quarter nodes. They also have some other ways of representing time as well, and there's even more details there in this page here.

[00:03:17]
But just for now, I like to just stick with the 8n or 4n, and those are kind of nice and easy. And then the second parameter here is the feedback, and so we can try and change these parameters just to see how it sounds and hear how it sounds.

[00:03:29]
So if I was to use a very low value for that feedback,

[00:03:36]
[MUSIC]

[00:03:37]
There's not quite as much action going on, in fact, it's really hard to hear any echoes. And that's because every time it's doing a feedback, it's scaling the signal by this value. And if the value is too low, then the feedback signal basically just disappears. And if it's too high, the feedback is just gonna continually appear and create this endless looping, because it's never reducing the value.

[00:04:09]
So we wanna scale down the value by some amount, so that eventually, that echo disappears.

[00:04:15]
[MUSIC]

[00:04:18]
So you just need to find a nice value that you like, maybe 0.6, 0.8, something like that. And so that's the FeedbackDelay. And then just as with any other node in tone js, it's quite simple, you just connect the synth to the feedbackDelay, and then you can connect the feedbackDelay to the master.

[00:04:40]
What I've decided to do here is to also connect the synth directly to the master. So what we have coming out of the speaker is not just the FeedbackDelay sound, but also the synth sound. Let's hear how it sounds without connecting the synth to the master.

[00:05:00]
[MUSIC]

[00:05:00]
Now what we're hearing is just the echo, so when I click, there's no sound and it's an only after an 8th nodes do I hear any sound being produced, because the synth itself is not connected to the master. And so that's why you wanna connect both. Okay, getting into the next little demo here.

[00:05:23]
So in our tone demos, I've shown a few of these, this one here is effects. So this is just going into a few more effects similar as what we were just talking about.

[00:05:37]
[MUSIC]

[00:05:39]
So in this effects demo,

[00:05:43]
[MUSIC]

[00:05:44]
We are using a few of them here, we're using what's called reverb. And the idea of reverb is that it recreates the sound that happens when you're in a large room. So let's say you're in hall or let's say you're in a concert hall even, and you start shouting.

[00:06:10]
The waves that are coming from your shouting and the noise that you're creating, they're going outwards and hitting the walls of the room, eventually, and bouncing back towards you. And creating these reflections and creating these sort of echoes within the space itself. And depending on the size of the room, depending on the shape of the room, depending on all these different factors, you can end up with very different types of echoes.

[00:06:36]
And these aren't echoes like when you're in a cliff mountain and you're shouting, and there's these massive delayed echoes. It's more like more of a room ambience that changes, depending on if you're in a large room or a small room or room with really sort of like tight walls that will not really reflect the audio as much.

[00:06:55]
So let's say you're in a room that has better soundproofing and a room that has worse soundproofing. That all has to do with reverb. And we can recreate those kinds of effects by setting up a reverb node here, giving it a decay and these other properties. And I'm gonna just pop open the API, just so that we can double check what these do.

[00:07:20]
There's actually a couple of different reverbs, because reverb is this common thing that you get in audio but there's a lot of different ways of exploring this. And a lot of different libraries that have to do with it, a lot of different algorithms, and a lot of different approaches.

[00:07:35]
We're just gonna use whatever their default reverb node is. And the decay option gives us, as it says, the amount of time that the reverberation is happening, and there are some other options here, so. The preDelay has something to do with, perhaps, the delay before the sound is supposed to echo off or something like that.

[00:08:05]
And then wetness, when you hear the terms wet and dry, so this effect right now. When it says wet, it means what's the percentage of strength that we want this effect to be outputting? So if I was to say 1, then the reverb will be at full strength.

[00:08:26]
And if I was to say 0, the reverb will be at no strength at all, and there won't be any really reverb effect coming out of this output. So 0.5 is in between, and I can actually just comment out a few things and set these up just to show you how that sounds.

[00:08:46]
So if we were to do something like this, where we do synth.connect(reverb);, and then reverb.connect(Tone.Master);. What we're doing is we're just listening to the synth but through a reverb.

[00:09:09]
[MUSIC]

[00:09:09]
And now let's just see how that sounds without any reverb at all. So we just connect the synth directly to the master. And you'll notice it cuts off really quickly because there's no sort of ambience, it doesn't feel like we're in a big hall anymore. We still need to send this synth through the reverb, but then we can change this wet property here to 1, let's say.

[00:09:38]
[MUSIC]

[00:09:39]
And now the signal is fully using this reverb and all we're really hearing is that the reverb. Whereas if it was 0, probably all we would really be hearing is the synth, this reverb would be effectively off. Yeah, exactly. So that's why I decided to go somewhere in the middle.

[00:10:03]
If you go too high, all you hear is the reverb sound. If you go too low, you don't hear the reverb at all. You have to use an asynchronous generate to load the reverb effect. And then there's some other effects that I've got here, so another FeedbackDelay. And then this one is a filter which allows us to sweep a sort of frequency range and cut it off entirely, which you might hear when I start moving the mouse.

[00:10:33]
I'm just gonna go back to the code that we had before here. And then, finally, we have our synth itself. And the synth is a little bit more complex than the previous synths, because I have this options. We can prefix a sine wave or we can prefix a square wave or triangle with this sort of fat, it's like a fat sort of prefix, which just makes the wave sound really fat, I guess.

[00:11:03]
But the idea is that you spread basically multiple frequencies somehow, layering together to create this kind of chorus of the synth. And by changing these values here, it's almost like multiple voices from a synth, and allowing you to just create a richer sound. That sounds a little bit more interesting than just a single sine wave or single triangle wave.

[00:11:30]
And then the other thing that is happening with this synth that's a little different is that we're changing the envelope. So one of the nice things with tone js is that they have these envelopes. And the envelopes have to do with how the signal is being played, and how the signal is echoing off and being released kind of.

[00:11:50]
So it's always based on this idea of attack, decay, sustain, release. So ADSR is a pretty common sort of idea within this audio in digital audience space. The attack is how fast the signal turns on, and so that's in seconds or milliseconds, perhaps, in tone, it's in seconds.

[00:12:14]
So how fast the audio is turning on? So when you hit the node, when you do trigger attack, if you have an attack of 0, let's say, and you were to run that, it'll just play the sound immediately. Or at least in this case, it'll show graph, but it doesn't seem to play the sound in this demo.

[00:12:36]
But imagine it was playing a sound, it would play the sound immediately. If you increase the attack to one second, it'll be a slow gradual ramp up from silent to full volume over the course of 1 second. And then there's some other properties like sustain, is how long the node will sustain itself after you push the node down kind of, and then releases once you let go of the node.

[00:13:09]
How long does it take to turn that node off? And the decay has to do with between hitting the node on and going into the sort of sustaining part of the node. And it's hard to explain with this little tiny ADSR diagram. But I will have a resource that will probably explain it a little bit better than I'm doing here, which I'll show a little bit later.

[00:13:31]
And that's just something you could play with that allows you to create different shapes to the sound. And it allows it to be a little bit softer, so that it's not just piercing on off sort of sound. And we're wiring it all up, just as we are in all the audio demos here, connecting the synth to the filter and then connecting that filter to the effects.

[00:13:55]
Then connecting the effects to the reverb, and then finally, the reverb to the master. And so the one thing I haven't really mentioned yet is this filter. And the filter will basically cut off or allow through different frequencies or maybe some range of frequencies. So here based on the value fxu, which is the x position of the mouse divided by the width of the screen, so some value between 0 and 1.

[00:14:26]
We're changing between the minimum, which is 1,000 hertz, and the maximum, which is, sorry, 100 hertz and 8,000 hertz. And we're setting the filter to that values. Right now, I'm using this filter effect to filter out certain frequencies. And so we can use what's called a low pass filter.

[00:14:47]
And what that's going to do is only pass through filter frequencies that go below the threshold that we're going to set. So to show how that's gonna work, first, we make sure that that filter is connected to this graft, connected to the system. So in this case now, we have it so that the synth connects with the effects, which is then connected to the reverb.

[00:15:11]
And the reverb is finally connected to the filter. So the filter here is the last step before hitting the speaker, the master output. And then we scroll down and we see where filter is being adjusted. Here we're adjusting the frequency of the filter, and we're adjusting it between some minimum and maximum range based on the mouse x position.

[00:15:34]
When this mouse x position is at the left, it's going to use the filterMin. When it's at the right of the screen, it's gonna use filterMax. And any mouse position in between there is just going to blend those two filter frequencies. Just to show you, going up here, the filterMin is 100 hertz and the filterMax is 5,000 hertz.

[00:15:59]
And so, now, when we play these effects and when we play these sounds, and when we slide our mouse to the left, it's going to start to filter out some of the sound.

[00:16:10]
[MUSIC]

[00:16:10]
And what's happening is that we're cutting off a lot of frequencies, we're only allowing the low frequencies to pass through.

[00:16:23]
[MUSIC]

[00:16:25]
We're saying that only frequencies that are lower than, let's say, whatever this would be, 100 hertz or 200 hertz, those are the only things coming through. And then as it opens up, it's getting into the 1,000 range hertz. We start to hear higher and higher frequencies.

[00:16:41]
[MUSIC]

[00:16:45]
And you can create some really nice effects with that kind of a filter node. You can also try using other things like a highpass, which is the opposite, it only passes through frequencies that are above the threshold.

[00:17:00]
[MUSIC]

[00:17:02]
Or some of the ones that we explored earlier in the course, like the bandpass. And this is just going to pass through only the frequencies that are in the band that we're specifying and maybe some sort of left and right frequencies around it.

[00:17:27]
[MUSIC]

[00:17:27]
And what that means here is that, we're really only dedicating the signal near the frequency we specify, which might be, let's say 200 hertz. And the only signals that are coming through are kind of close to that frequency band. But low pass is quite a nice one for these kinds of effects.

[00:17:54]
And the other thing we're doing on the y position, this is when the mouse is going up and down on the y position, we're changing the wet value of our effect node. So the wet value, remember, the higher the wet value, the more we're using that effect. And the lower the wet value, the less we're gonna hear, and that affects your that FeedbackDelay.

[00:18:19]
So if we use fully wet, then all we're gonna hear is the feedback. If it's fully dry or there's no wetness, all we're gonna hear is the synth itself.

[00:18:29]
[MUSIC]

[00:18:31]
So up here, there's no feedback, down here, there's a lot of feedback

[00:18:41]
[MUSIC]

[00:18:43]
And we can start to create some really interesting soundscapes, just by modulating these and by using different parameters here.

[00:18:54]
[MUSIC]

[00:18:57]
So I'm just tapping in different places. But you can imagine some sort of algorithmic system that might be automatically triggering these nodes with different parameters to create these really rich and atmospheric sounding outputs. So that's just a little bit about the filtering.