Juce Tutorial 25- Building a Synthesizer Part 5 (Creating a Switchable Osc with the ComboBox Class)

hey what's up everybody I'd like to welcome you to another juice tutorial and a Happy New Year to you I hope that you've all had great holiday it's been a couple weeks since I've done last tutorial and reason being I didn't really have much of a holiday myself I was really busy finishing up final projects and all of that business for university but now all my final projects are done and we're ready to kind of move forward with this so you'll be seeing a lot more of me so what we're gonna do today is we're just going to continue on with our synthesizer tutorials here what I'm going to do is I'm going to create an oscillator class and what that's going to do that's gonna hold a menu where we're going to be able to switch between three different types of oscillator waves will do like a sine wave saw wave and a square wave and then what we'll also do is we'll try to refactor this code out that we set out last tutorial so if you recall we set out a code that just set up our envelope parameters our attack decay sustain and release and so at the moment we have all of the UI code residing in our main plugin editor and what we're going to do is we're just going to create a class for that and then that class is going to hold all of our all of our UI information for the envelope and the reason that we're going to do it like this is because as what what I'm what I'm looking to do is I'm looking to set up each class as kind of an individual component and then depending on how I want the UI I'm going to be able to rearrange that quite easily if I have them separated out into classes otherwise the code is just gonna be really jumbled and everything's gonna be mixed up so we're just trying to get a little bit of organization into the code here so I'm just going to go ahead and first thing I'm going to do is I'm going to add a oscillator class so what we're gonna do since it's going to be a UI this is it's gonna hold UI information I'm going to add it as a new component class split between a cpp and header I'm just gonna call this oscillator create this now let's forget to do this but here we are I'm going to open it up in Xcode I'm just going to do a real quick build make sure that we're all good so while we're doing that I just wanted to let you guys know once again about this core group that we have so we have this discord audio programming discussion group so we have programming we have developers of all different levels that are helping each other out and just talking shop about about audio programming and DSP so a lot of great developers in there so come join us I'll put the link below so here we are built fine okay so we'll go ahead and we'll start start this off so just to let you know a little bit about kind of the workflow that I'm looking to do so there are a couple different ways that you can start kind of passing variables because if you recall we have a UI component where we're holding all of our graphical information and then what we want is when the user selects something with the graphical information we need to take a variable and we need to pass that to the processor side to let the processor side know that hey something's going on he hit a button he moved the filter he changed the resonance something that something happened and we need to wait a way to pass those numbers between our different classes so there are a few different ways that you can do this I'm going to show you the way that I prefer I prefer to do it using the audio processor value state tree and what that does is that when I have a value that's being changed in a slider or in a menu then that automatically goes over I have that connected to the processor and then the processor can then register the value and then in turn that will take the value and it'll relay it to my synth voice class so I'll show you I'll show you a little bit more about how I do that so I'll try to keep this tutorial as short as possible but not move too quick at the same time so I'm just gonna erase some of this kind of boilerplate text here that we have going on and so the first thing that we're going to do is we're going to we're going to use the combo box class to create a menu where we can switch between these different types of oscillators so first thing that we'll do is we'll just open the API up and start doing that so so if we go here back to the API I'm just gonna type combo box so we can open that up and we can start seeing what we need to do to get this integrated so we see that it gives us the drop-down list of choices and then we see that kind of like the slider class there's a listener class that we need to use so it can register the events from the combo box and register those over to our processor side so so let's go ahead and start doing that so I'm gonna set up a combo box and I'm gonna call it OSC menu and so now we have a menu and we need to have ways that what we need to let the we have to let it know what we want to populate that menu with what do we want them to select so if we scroll down here a little bit we see this function here called add item and then we it just takes a string which is going to be the string of what we want that text to be and then it has new item ID now one thing that I'm going to show you here is if we scroll down to the function itself it says here note that this value cannot be 0 ok so so when we do a combo box object the index actually starts from 1 and not 0 so that's just something to keep in mind as we're passing around but I'll show you how to kind of do with that so we're gonna add we're gonna add three items here so we'll do oscy menu which is the name of our combo box and then I'll just do add item and then first item we'll just call signed okay because that's gonna be our sine wave that's gonna be item number one and then we'll do the same thing for the saw wave and the square wave so Saul that's two that's then let's just do this for the square wave and that's gonna be called square and that's going to be item number three okay and then we have to let it know I don't know if we have to let it know but we should let it know what type of justification we want the text to show in our menu so we have this set justification type so let's see menu set justification and then I'll just put justification and then we're going to put it centered just so centered in the menu okay and then what we could do is we could set a resized component here so these are some numbers that I've kind of worked out before a little bit because I've actually gone through and just created this synthesizer like the way that I want to finish it up but I'm going to go through these one at a time but rather than kind of going back and forth about like what the bounds and what the measurements are gonna be I'm just gonna kind of write this in here so first thing I'm going to do is I'm going to create a rectangle object rect and go and then that's gonna be of type int I'm just gonna call this area and then this is gonna be get local bounds so what we're going to do is we're going to set we're gonna set some values for the size of the rectangle itself I'm just going to do that quick we're here before I forget so I'll just do set size I'm just going to make this this whole window 200 by 200 okay so we'll go get local bounds and then I can use this I can I can use this measurement club reduced so what this does is this actually just kind of shrinks the measurement of so so I have the area which is get local bounds which is 200 200 and now I can shrink it in all dimension in both dimensions by 40 pixels so I'm just gonna so that just gives me a little bit where I'm not actually just on the edge on on the very edge of my boundary okay so it just it just takes the local bounds which is 200 200 and then it shrinks it in every way 40 pixels okay so I hope that makes sense and then I'm gonna do osce so we're just gonna draw the menu itself so we got OSC menu dot set bounds and then I could say area dot listen let me take a look here I got removed from top and then I'm gonna just put that to 20 pixels okay so this is something that I've kind of worked out already and that I'm just basically going 20 pixels so I've taken the area I've reduced it all by 40 pixels and then I'm taking and then from that 20 pixels that that 40 pixel reduction then I'm going a further 20 pixels down and that's where I'm gonna draw the menu itself okay so I hope that makes sense so now we have the menu itself so now we need to register it as a listener so we're going to go back here and then if we go and we just add the functionality so what we're doing now is we're just actually we're just adding functionality that that that registers the combo box is a listener so when that makes a change then we can register it to the processor that a the user wants to use a sine wave or they want to use a square wave now so so this combo box listener okay I'm sure some of you are probably asking how did I know that so if we just go up to the combo box class reference here you'll see that there are these classes here that we use that we can use in conjunction with the combo box so we have this listener class here so if I go over to this listener this combo box listener class you'll see that we have a pure virtual function that we need to implement for this okay so combo box changed okay it's kind of similar to the slider slider value changed so we just have to let it know okay when the user has made a change what change has been made and actually funny enough I'm not actually going to I need to implement it because it's a pure virtual function that things aren't going to work without it but I'm not actually going to put anything in there because I'm going to actually relay these changes using the audio value processor state tree and I'll show you how I'm going to do that so we got void combo box changed and then that's just gonna be combo box that's gonna be a combo box and then I'm gonna call it over I'm gonna call the override function here because that is what we need to do when we are implementing a pure virtual function so I just want make sure I have my capitals fine here okay so was it complaining okay cool so now I just need to implement this function here so I just have to name it void oscillator combo combo box changed so we could just say combo box oh don't like when it does that so I can just go combo box I'll just call this box and so I just put that in there because we have to implement it too for for things to work just let you know if you don't implement this function but you put it but you put it in but but you put you write it in the dot H file you'll get you'll get an error you'll get like all kinds of weird kind of errors but it won't actually tell you that hey you need to implement your combo box changed object combo box changed function here so so so just something to be on the lookout for just in case you're getting like some crazy errors and you're not quite sure what's going on so now we got this all implemented we've drawn it we need to register it as listener so we can say add and make visible so this is going to be a child of this component so I'll say o SC menu here and then o SC menu add listener and I think that's what I need and then I can just say this I think that's what I need to do just make sure this hall works so just compiling now okay everything appears to be fine okay so now we have the menu and now what we need to do is we need to draw it we can draw it in the editor itself okay so what I'm going to do now is I'm going to include so we need to include the oscillator class because it's a component class and we're taking it and we're drawing it within the plugin editor so I'm going to now include the oscillator class in my includes at the top so I hope that's clear to you why I've done that because I need to draw the oscillator within the plug-in within the plugin editor and so that's why I need to include that header file otherwise it's not going to know what I mean when I say oscillator okay so now what I can do is I can just say oscillator because now it knows what I'm talking about I'm just gonna call this I'm just gonna call this ask GUI maybe there we go so another thing that I'm going to do here is I'm going to now start commenting out the envelope itself here because I'm going to put that in its own class later so I can do this with all of these values here and then I'm going to do this with all of this code that we set up last tutorial I'm just going to comment it out for now and then I'm going to change the size to 400 200 this is something that I've kind of predetermined before and then what I need to do so now the oscillator the this this UI that I've used to draw the oscillator menu is going to now be a child of the plugin editor so now the plugin editor is basically going to hold all of these individual components that I'm creating so I can say add and make visible and that's going to be the oscillator what did I call it oscillator GUI okay so here we go and now I can go down here into my resize method and now I can actually draw the I control the oscillator so I could draw oscillator menu dot set bounds so some of you might be thinking hold on you've already set the bounds for the oscillator menu well I've set it within the oscillator class itself but now I have to now I have to show where am i drawing it remember respect to the whole window and the whole window size is 400 200 okay so actually I'm going to first do the same thing that I did before with the other class which is I'm gonna do a rectangle object rectangle and it's gonna be of type int I'll call this area and then I'm just gonna say get local bounds here okay so now I've got a rectangle that's the size of my whole UI okay so that's so it's got the same dimensions it's got so it's set at 400 200 400 by 200 okay I'm just gonna compile this quick because I see that it's making a complaint oh yeah I'm not gonna capitalize G I'm not gonna capitalize the UI I'm just gonna call that a UI like that okay so let's see if it compiles all right for us now cool thanks so okay great so now I've got this so now I've got this rectangle object and now what I can do is I can actually lay out these components quite neatly and quite efficiently just by using kind of a dynamic way of dividing up this this rectangle if you're not quite sure what I'm what I mean I'd advise you to go back to one of my very early tutorials I think it's called the rectangle class and it shows how I how I do this so now I can say OSC GUI dot set bounds okay and then we got this rec we got this rectangle object that we can put in there which is the area so I'm going to set up a component with just just a just these variables called component with a component height because when I have these different components like the oscillator or the filter and the envelope I'm going to assign the same area the same amount of space to each one of these components so I'm just going to set up a Const int component with and we're just going to set that to 200 so each one of our components is going to be 200 pixels wide and then I'm going to do a constant component height and that's also going to be 200 and you'll see how I'm going to use these right now because what I'm gonna do so I'm gonna say so now I'm saying okay well how big do I want that the oscillator UI to be in this in the scheme of this bigger rectangle which covers a whole UI which is now 400 by 200 okay so what I can say is I can say area and now I just want to lay out to a 200 by 200 rectangle that's gonna hold that oscillator that there's going to be the area from my oscillator so it is remove from left so I'm just gonna go on the x-axis now how much space do I want to set out for the oscillator itself I can say component with and then I can say remove from top as well and then I'm gonna put 200 there okay so what that's done is that oh we're gonna change component height and so the reason that I've done this is that this is something that I learned at the audio developer conference in one of the UI seminars and that is that when let's say that at a later point we want to take this and we want to build it for iPad or for your iPhone or something else rather than going and having all these static numbers what we can do is we can just use these kind of dynamic measurements and then we can actually just change - if I just go and not change two numbers well that goes in and that can change all of my UI component measurements and that makes it a lot more efficient and easy to kind of scale things up scale things down as we need to so I think now I've made it visible I just want to make sure that I'm not missing anything and I've drawn the UI itself so I'm going to go ahead and try to build this and see if the combo box actually has shown up in the UI so so you will see that here it is here's here's our combo box we have our three menu items okay it's not doing anything in a moment because we haven't attached it to the processor to let or to the synth voice class but I'm gonna show you how we're going to do that but here's our here's our menu itself okay we haven't given it a default value either that's why it's like okay so next part is we're going to go to the processor and now if you recall we have these different we have our audio processor values state tree object here this holds all of our parameters and now what I can do or the way that I'm going to prefer to do this is that I want to pass these values using using the tree rather than using rather than using the combo box combo box changed slider value changed methods I'm going to do it via the tree and I don't know if there's any sort of advantage or disadvantage to this if anybody knows or if anybody has any justification to do it one way versus another way I'd love to hear any sort of arguments for that and just leave me a comment so what I could do is I could just say I'm gonna go ahead and add a parameter I just like doing it this way because it feels a lot cleaner it feels a lot cleaner to me feels a lot like okay I can just add this one line of code I can add a line of code to the oscillator back in the oscillator class and I can link those two things up and now it knows what I'm talking about rather than having to go through a lot more code if the slider is this slider than that chain that that that value needs to change so on and so forth just feels a lot cleaner and a lot more straightforward to me so I'm just gonna call this wave type then I'll do wave type with capital and then I'm gonna call this wave type here and then this takes as you probably remember from last tutorial takes a normalizable range object so I'm just gonna call this wave type program and then I'm gonna create that very shortly and then I'm gonna put this to a default value of zero and then these are just gonna not point anywhere because we don't need them okay now it's it's we need to create this normalizable and range range of type float because it takes a float type of normalizable range I'm gonna call this wave type per am and then this is gonna go from zero to two so now this is a little bit kind of confusing took me a second to really kind of suss it out but if you remember when I if we go back to the oscillator class when I have the the actual combo box selection the combo box selection starts from one there's the two and three okay but when it passes the when it when it passes the value over to the value tree it's going to actually pass the value of zero one and two so it's actually going to index the way that we normally index in computer science from zero rather than rather than from one so that's a little bit confusing took me a second to really kind of figure out why I wasn't getting the right wave type and why it wasn't kind of working but that's the reason when it when you're passing when you actually select it so so the index is from one when you're adding is an item on in a combo box it starts from one but when it actually passes the value to the processor it actually passes a value of zero okay and we're setting the initial value to zero okay so now we're going to have so now we need to go back to the oscillator class and we need to basically tell the oscillator we need to tell the oscillator component okay when when I make a change in the menu I want to register it to this parameter so this menu means this particular parameter that we're calling wave type okay so what we're gonna do is if I go so so we need to do a couple things in order to do that so we need to be able to access the processor first of all okay and there are a few things that we need to do in order to make that happen okay first thing we need to do is if we go to our parent plug-in editor you'll see that we have this object that was created for us originally with the boilerplate code that was juice synth from audio processor processor okay so that allows us normally in the the audio editor to access the parameters in the processor so what I can do is I can just copy this okay I'm just gonna copy it okay and then I'm gonna paste it here I'm just gonna put it down here okay now it's going to complain because it's gonna say I don't know I don't know what you're talking about I don't know what this is so what we need to do is we need to include the plug-in processor header file okay so we need to do that so that this actually this object here actually knows what I'm talking about okay now the default the the default program constructor the way that's needs to be set up in order for this to work is that if we go to the editor let me see where is it so if we look here we can see that we have a Jusuf framework audio processor object that we need to declare in our oscillator class okay so what I need to do is I need to change the constructor so I'm going to change it in the header file first so there are a few things that we just need to do to make this work so I just take that and I paste that in okay so that so that makes the constructor because it's gonna say because because it's gonna say the default constructor isn't right so that's what I need to do to make that to make that work and then now now here it's going to get a given error because it's going to say okay the the constructor values are different between the header file and the CPP file so now I'm just going to call this processor P and now I'm going to use a initialization list so I can say processor so processor is what I'm talking about here okay just talking about this processor and I'm just linking these values up just what this means is okay by P I'm saying by processor I'm saying this object here P okay and I think that's fine I think that's fine okay I'm just going to build this real quick make sure I've got a complaint okay so must explicitly initialize the member OS c GUI which does not have a default constructor uh yeah so so what so what's happened here is I've changed so okay so I've changed the constructor now to this okay where I say okay anytime I say anytime I say oscillator I need to be talking about I need to create this argument so what I need to do now is when I go back over here to my plugin processor cpp in this in here i need to create the argument for the object that I've called wait wait wait wait sorry oh let me make sure I got this right no no not not in here let me go back and remove that comma that's not gonna work in the editor sorry about that and the editor you'll see that I have these initialized and I need to actually add this here so this is called this object is called OSC GUI I'm just gonna say OSC GUI P and let's just build that see if that works okay cuz I just have to initialize that with the P argument there okay and you'll see that it succeeds now okay so now we have we have the value tree that we've created on the processor side and now we need to link it with the oscillator side so it knows so it knows that when I change something on the menu it lets the processor know that hey I've made a change so I'm gonna go here and OH I'm gonna go back here and if you recall I created a scoped if we look back to our plugin editor when we were creating the adsr I've made a scoped pointer of slider attachment audio processor values tree state slider attachment type and then I called that attack Val and then I set up and then I set it up and I linked it with the with the sliders okay so we just need to do the same thing here in the oscillator class except it needs to be a combo box type so I can say scoped pointer and that is audio processor value tree state and then that is combo we actually have one that's for the combo box and you'll see I'll show you here because I think it's quite important here combo box attachment so it's audio processor value tree state combo box attachment class ok and so we're back here so we got combo box attachment ok and I will just call that OSC menu is that can I use that oh no that's the name of my combo box itself so so so I'll call that wave selection and so then down here I can just say so this is all my code here I'm going to put this up here because it just feels more correct and then I could say waves selection since I'm using a pointer here I can use new and the script pointer automatically delete it when it's back out of scope so I could say new audio process audio processor sorry about this audio processor value tree state combo box attachment then there are some arguments that I need here so it says state the control ok so it's saying okay cool you want to control you want to control the parameter let me know what parameter that you want to control okay so if I go back to my processor here just to remind you this is the parameter that we want to control so we need to access the object called process plug-in processor okay that we created so that's so that's what we use with the processor object that we created and then the name of the object in the actual name of the object we called it tree okay so just to just to show you if I go down here you'll see that I've created the the object name is called tree so I'm just going into the processor and I'm saying I'm talking about this particular object the tree object okay and then the next parameter is the string for the parameter ID which is called wave type so wave type and then it's gonna say what combo box do we want to attach it to and that is OSC menu which is the name that we've given to our particular combo box okay so this just says okay cool what two things do you want to connect between the UI side and the processor side and I'm saying okay I want to go into my tree state I want to grab the parameter the parameter is called wave type and then I'm going to connect it with the with the combo box that I called OSC menu and that is actually making the connection those two things so when I make a change in the in the menu is going to take and it's going to register that change back to this parameter that I've created okay called wave type okay so let's just see and I've given it a default value of zero so when we pull up the menu this time it should show a value the the first item in the list which is signed hopefully so here we go and then you will see here that it shows it now shows the first menu in the list which is signed and now I can select these okay and I can make my wave choice okay so now the menu part itself is actually set up so now I've set this up so now I need to go and now I need to relay the value that this is and I need to relay it to where my oscillator my actual oscillator actually resides which is here in synth voice okay so we've taken the menu we've created the menu in this oscillator class we've we've connected it with the processor value that we've called wave type and now we need to take that value and we need to relay it to synth voice because this is where kind of all of the meat of our DSP is actually being called okay so the way that we're going to do that is we're going to create a function okay kind of similar to the way we did with get envelope params okay I'm gonna call this void get auth type and then we'll just do float selection okay and then we're just gonna do we're just gonna do that for now okay because then what I could do is I can go over here and I can go to my plugin processor and you recall I set up this this if function which was the dynamic cast where what I've done is now it when I get when I get the voice if it successfully casts as a synth voice then it passes it says hey okay we're gonna get ready we're gonna get ready to play the voice but we need to know what parameters we need we need to know what type of attack decay sustain release we need to know what wave type it is okay so now what I'm doing is I'm going to say my voice which is the type which is my object that I've created in the plug-in processor okay this synth voice called my voice so I'm going into here and now I need to go and I need to call this function called get OspA type so what I'm gonna do is I'm gonna actually pass this value I'm gonna pass the value from the value tree the value tree up here called wave type and I'm going to actually pass that parameter into synth voice so I'm gonna relay it over to synth so get ask type is that was that what I called it get us type okay and then from here it's gonna say okay what what float so I so you remember I mean I created the function with a float pointer okay so now it's gonna say okay we need a float pointer for the argument so I could say get raw parameter value and then here I'm gonna say wave type is the parameter that I'm looking for here okay so let's just test this out real quick so I'm gonna do is I'm going to just do AC out since it's a pointer I need to dereference it by using the star operator here which is going to give me the value oh no is it gonna freeze okay cool it's gonna give me the value that resides at this memory location that I've called selection so we'll just try this here make sure that everything is kind of relaying properly here okay so we've pulled this out we'll pull our synthesizer up here we see that it has a selection of 0 now that it's passing and then if I change this menu item it should change to 1 and it changes to 1 and now it changes to 2 when I select the square wave so now that works properly so one thing one thing that I think somebody in the in the discord group mentioned was that would probably shouldn't need to actually pass past these values in the audio callback where so you see that it's passing it audio is passing these values at audio rate I don't know if that's the case because my thinking is that it needs to know that if you change the selection if you change the attack or if you change one of the parameters it kind of needs to know what that value is at audio rate so that's why to me that that feels that feels right the way that I'm doing this feels right but if there's a better way I would love to know it and let me know in the comments or in the discord group so you'll see that this is fine ok so I can now erase this console out so what I'm going to do is I'm going to create a parameter here I'm just going to call this I'm gonna actually call this the wave which is a which is what I've created here I'm just gonna comment this out I'm just going to change it to int because it just needs to be an int and so I'm just gonna create this global variable so that I can take this value and I can pass it between functions so I can say the wave equals the value that resides at selection okay at this place in memory that I've called selection okay so that should be fine so now we have this so so now we have this this number coming in there properly so now we need to do something we need to do something with that okay so we need to say okay when the user selects the first menu on the on the item list or the first item on the menu list we need it to be a sine wave and when they select the second one we needed to be assault wave and the third one needs to be a square wave okay so if you recall the the actual oscillator object itself is of type double okay so what I can do is I can just say I can create a function here that's going to return a double okay because that's what I need to read that's what I need to return I need to return the actual oscillator to to this function so that so that I can kind of pass it in to my audio callback so I'm gonna call this set ask type it's not gonna have any parameters or arguments rather so what I can say so you recall that I'm getting so so now I've got this global variable I've called the wave and now I can say now I can say if the wave value is equal to zero okay return ask one so that's the name of our oscillator our Maxie asked object okay that we're using to generate the actual oscillator waves so I'm gonna call this oscillator one sine wave then we just pass in our frequency object argument okay and then if I then I could say if the wave equals one return ask one dots all I think it's just called dots all okay and then we could just say double the frequency and then if the wave is equal to two return ask 1 dot square frequency okay then we just need a condition if something went wrong so we need an else just to make sure that we're able to account for all situations else the wave else return ask one sine wave frequency so it'll just return the first selection if if none of these other ones were selected in some sort of weird situation okay so now what I can do is I can go down here to my function and I could say double the sound right here I have the wave okay I kind of race this because it takes it takes a a double as an argument and I can just put set off type as the argument okay because what that's going to do that that's gonna return that's going to return a number that's gonna return this series of numbers that refers to the sine waves all waves per the square wave okay and that's how we do that I'm just gonna take this copy this over here and paste it just so we have it separated out here a little bit so I think this is good to go so let's go ahead and try this so now what we should have we should be able to play the different waves hopefully I've done all of this correctly so let's go ahead pull up our synthesizer then I can just connect these values here I always worry that I've done something wrong and it's gonna blow my ears out or something cool so so the first selection there you can see that it defaults to the sine wave which is selection0 then i can go to saw wave see if that works and you can see that that works and then I can go to square wave and that works as well so that's great we've got that up and running and that works properly so now what we can do really quickly and I'm just putting this at the end of the tutorial here one thing that I'm gonna mention here is I've got I've actually got this code this code is gonna go up on github so I'll put the link to my github below and you can go and you can download the code and change it or do whatever you want with it and so it's available to you there and if you want to follow along as well from the from the beginning of this tutorial in the state that I had that I had it in at the beginning of this tutorial my last commit was the was the way that the synthesizer was at the very beginning of the tutorial so you can grab that as well if you wish okay so what we're gonna do now is I'm just gonna get out of Xcode for a second and I'm actually gonna go back into the framework itself so anytime that we're creating any sort of classes we need to create it within the juicer itself so it registers so now what we're going to do is if you remember the adsr settings that we had and the UI and all of the UI information I'm just going to take that now and I'm gonna put it into its own class so I'm gonna I'm gonna do this I'm gonna try to do it super fast and it's just going to be it's just gonna be kind of a repeat of what I've done with the with the oscillator class just now so I'm just gonna call this envelope and they're up there I have my classes as usual I've got to do this just so it's nice and neat then I'm gonna open it up in Xcode and now it's just a matter of really taking a lot of this and copying it and pasting it into the into the envelope class and then making sure everything connects up nice nicely so I think I thought I hit the button okay let's just try it now just Xcode is being funny funny with me it's taking a second okay what's going on Xcode I'm gonna force it to quit here and now I'm gonna try it again third time's the charm okay Xcode is opening up and here we are okay great cool I'm just gonna build this because the first build takes a long time and then while it's doing that I'm gonna just start going through and thinking about what I need to do here so we just need to replicate a lot of the things that we did with the with the oscillator with the oscillator class so if you recall so we have this juice juice synth framework audio processor you just need to replicate that object in the constructor here so the build succeeded okay that's cool I'm just gonna go ahead and stop all that so I'm gonna put this I'm not gonna I'm not going to go through and explain it again because I just kind of explained it over the past however long this tutorial was so I'm just gonna kind of try to fly through this and try to fly through it without making any glaring mistakes and getting stuck so so I'm just gonna copy the processor object in here and do this so that so now I need to make sure that the envelope constructor is correct which I could do like this okay and then I can just paste that in here I'm just gonna call that object P and then what else do I need to do here so I need to declare this processor objects that knows what I'm referring to so we've got the initialization list here I could do that and then what else do I need so this is so I'm gonna go ahead and I'm gonna go in here and start copying and pasting all of my all of my all of my object creations from what's now in the editor in the main plugin editor and now I'm just gonna put all of this in to the class itself okay and I could just take this just uncommon in it now okay I'm gonna make it try to make it all nice and neat without taking too much time so it doesn't know what processor I'm talking about so I need to go once again back in here I need to include the header file okay and then I need to go back into the plug-in editor don't think I need this anymore because we don't need all this slider this the slider listener class is now going to be here in this class I'm going to take that I could tab it make it nice and neat and then we can go back to our CPP we can just take all of this business we can exit out cut it and then just paste it all in here and just uncomment all of this okay I'm not gonna take the time to format it properly here because don't want to take too much time doing this and then we need to go back in and we need to we need to just cut this out of here because now this needs to slider value changed virtual function is now here and that's the same thing with the actual slider value changed function implementation here I can actually just take that I can now put that down here and then I can just go and get rid of all this and get rid of all this I'm just gonna fill it I'm just gonna do a G dot fill all colors black like that and then my resized what I'm gonna do is I'm going to where is the what am I looking for here I'm looking for my actual sliders themselves where they're drawn you can actually just take that out put that over here and my resized and I can uncomment all of this and then let's see what if I missed I've missed I've missed something I've missed something let me just build see if it'll give me any idea of what I've what I've missed so oh oh what I've done in here this needs to be envelope envelope okay and then let's build again see what happens okay so so far so far we're good to go okay but the only thing is we just need to go back and we need to change the dimensions of this so at the moment we don't have any sort of size or anything for this so I can say set size and remember we've agreed to make the components 200 by 200 apiece and then if we go here I can do the same thing that I did for the other for my oscillator object in that I created a rectangle of int type of called it area equals get local bounds so I'm just getting that the bounds of the component that I'm in which is 200 200 and then we're going to use that reduced call again which is gonna we're going to reduce it forty pixels okay and then I think I think this is good so now we need to go back to our processor and then I not process or not processor the editor so now I need to add it so it's gonna be a child component now of my main plug-in editor I'm just gonna call this and I'm just gonna do include envelope header file so it knows what I'm talking about and then I can just say envelope not that envelope um g ey okay and then if I go in here now I can just make it add it and make it visible as a child of the main component and G I like so and now what I could do is em gee Y dot set downs and now basically what I could do is I can actually copy this because this is gonna be this is gonna be the same size as the as the oscillator okay if I put if I put the envelope before the oscillator when it would then paint the envelope and then paint the oscillator but what we want the oscillator to reserve 200 by 200 of this of this 400 by 200 window and then and then I want the envelope of the the UI for the envelope to reserve the other 200 by 200 space that we have remaining okay this is complaining because we need to initialize this because remember our constructor has the argument for the processor for the processor so I can say mgu I use the processor as the argument so that should fix that and then we're just going to try to build this here and what we should see is we should see an oscillator an oscillator component that has a that has its own section and then the envelope right beside it so if I go and I connect these up quickly and now you can see that we have the oscillator section I could I could I could paint these different colors just so you can see the division between it but I'm not going to do that so we have the oscillator section here that's taking up 200 by 200 we have the envelope section that's taken the other 200 by 200 okay so if I just press this okay you can see it's a sine wave if I just adjust the attack alright make sure that our that our release is right change it to a saw make sure saw works beautiful square wave and there we have it we have the switchable oscillator and an envelope component together and then we can later on take this and kind of make it a little make the UI a little bit more fancy but that's what I'm gonna go ahead and end it today so next time what we'll do is we'll go ahead and add a filter and then we'll also start making it look a little bit a little bit neater make the UI look a little bit neater and a little bit more kind of presentable so I hope you enjoyed this tutorial if you have any questions or any comments or feedback just drop me in line on the comments below and I will see you next time

Channel: The Audio Programmer

Views: 4,375

Keywords: juce, juce framework, c++, audio, tutorial, audio programming, creative programming, creative coding, dsp, digital signal processing, vst, create vst, create plugin, audio plugin, oscillator, synthesizer, maximilian, openframeworks, software development, beginner, easy, max msp

Id: yuTBRx1L7l4

Length: 63min 36sec (3816 seconds)

Published: Thu Jan 11 2018