All language subtitles for Learn-Modern-C-by-Building-an-Audio-Plugin-w-JUCE-Framework-Full-Course_en

we are gonna build this plug-in from

and the juice framework in this free

course check the description for links

to the repository and to download the

okay what is this thing this is the

other plugin which is my new course for

plus four musicians which is where you

which is also where you can learn modern

c plus and the juice framework from

scratch taught from the context of

in a mentored environment you're not

following videos you're not watching

someone else code and you're not copying

you're coding it yourself and i'm

all right enough about those let's learn

about what we are going to build

today this is a 3-band equalizer with a

it has a low-cut band it has a high cut

band and has a parametric band in the

the low-cut band lets you cut out all of

you can also control the steepness of

the high cut band lets you remove all

and you can also control how steep that

the parametric band lets you add notches

and we can also control how wide or how

narrow those boosts are and we can

everybody's familiar with this type of

above that there are bypass buttons

which allow you to disable individual

bands which is always helpful when

and above that is the response curve

which gives us a visual representation

of what the filters are doing then

is the spectrum analyzer and this shows

and these always use a bunch of cpu so

there's a bypass button for that as well

we're going to learn all the dsp that's

that makes this thing work we're going

to learn how to draw everything how to

draw the sliders the bypass buttons how

to draw the response curve and make it

whenever we adjust the sliders and how

okay that's the feature set for this

plugin and for this free course

my name is chuck i go by the name matcat

once again check the description for

and to download the final build of this

and write some audio software using

modern c plus plus and the juice

all right the first thing we need to do

is get set up with the juice framework

now if you've never done any audio

the only things you need are two tools

the juice framework and then an ide to

that could be xcode or it could be

visual studio it depends on what

operating system you're running i'm on

mac so i'm going to be using xcode for

if you've never set yourself up with an

i have two videos linked in the

description they take you through the

of setting up your computer with an ide

framework setting up producer setting up

making your first project and then um

and um yeah it basically gets you

with the workflow that goes in with

in the context of writing audio software

okay so the first thing we're going to

do is go get the juice framework so

right now i'm going to open up safari

just um this is like just a blank os

and i'm gonna install um i'm gonna grab

framework just gonna search for it it is

so i'm gonna go grab it here now what

i'm going to do is i'm going to clone

the repository and the reason is because

um this is an active repository they

make a lot of changes to it okay

so especially on the develop branch we

want to make sure that we have all of

these changes because stuff's getting

features are being added that sort of

the repository cloned i'm able to pull

this is different from if i had just

so that's why i'm going to do that okay

if you don't have terminal open just you

know terminal open it like that or open

prompt shell okay then i'm going to uh

um my users folder right here and i'm

just going to clone the repository right

just like that that's going to make the

juice folder and it's going to download

into this folder and it's in it's going

to include all of the commit changes as

well so let's just wait for this to

all right there it goes there's the

what we want to do is switch to the

develop branch because as i had shown it

um more it contains more recent changes

than the other branch you can see that

19 commits ahead of the master branch so

type in terminal uh first we need to go

so let's do that right now cd juice

dot slash juice and now we need to do

all right switch to a new branch develop

okay cool now i prefer to use a git gui

so i'm going to be using fork from now

simple eq that we will be building so

i'm going to open that now so we can see

what this repository looks like in that

so i'm going to open up fork fork is

okay so here is the repository i had

um and you can see here's all the

and all the basically all the work that

they've been doing on it and you can see

the develop branch okay our next job is

producer to make a project pro juicer is

inside producer now inside here you're

and in there is a project file for each

linux you got mac and you got windows so

if you're on windows open the solution

depending on which version of visual

studio you're running if you're on mac

you're going to open up the xcode file

if you're on linux there's a make file

and you linux users know what to do with

so i'm not going to talk about that okay

the solution file that's going to open

up xcode and now all i need to do is

okay so we just need to wait for this to

apologies if i start speaking fast

i like doing this stuff a lot and when i

get excited i start to speak really fast

speak too fast i'm probably gonna take a

step back and repeat what i say

slower so just apologies in advance if i

start speaking really really fast

all right so let's wait for this to

now it's going to run it and then we

uh this stuff all right so let's get

okay we are presented with the new

before we do that we want to go to

producer and we want to configure our

and these need to point to the juice

and the modules folder now the juice

folder by default if you clone the

repository to your users folder

automatically it's going to go right to

your users folder and the juice thing

however if you decide to put it

somewhere else you need to customize

these modules so click on this button

and then navigate to wherever your juice

for setting the path to juice then do

the same thing for the modules

click click that button navigate to your

juice folder and then navigate to the

modules button to the modules folder

okay and then if you rescan it'll tell

you if there's any issues or not

once that is done now you can go to the

basic and we're going to create a

simple eq and then we can do create

project and it's going to ask me where

create project i want to save it to this

and there it goes it's going to save it

it's going to make it and now if i

here is my project so i'm going to make

a git repository next before i actually

around at the code because it's always

important to set yourself up with the

in case you have to backtrack and undo

so i'm going to do that next all right

of keeping everything neutral i will not

be creating the repository in fork

but i will be doing it in terminal

because everybody's computer has a shell

so what i need to do is first navigate

to the folder that my repository is in

so i'm going to do that cd i'm just

going to drag this folder in here

now i'm inside that folder and now i'm

like that okay now uh i'm not seeing it

um hidden files and now here is my git

so what i need to do next is create

a i need to do an initial commit and

now i do not want to include everything

and i do not want to include uh

everything that's in this juice library

because a juice library code folder

this producer file it recreates these

folders the only thing we want to keep

the juicer file and the source file so

i'm going to add a git init file

first or a git ignore file sorry so i

nor like that that creates a document

which i can open with a text editor

and specify that i want to exclude this

and this juice library code so let me go

do that i'm going to open this with uh

i'm going to open it with text edit

and i want to write star star slash

library code okay that's the name of

and then uh because this is os x i'm

star star slash dot d s underscore store

we're not seeing any of those files

sometimes we will that's um basically

the if i can figure how this folder

looks um it's gonna get stored as a ds

and those are super annoying to include

um in your repository so it's very good

git um let's see git commit dash

m this is my initial commit let's do a

let's see what we got get status we can

see that there are no tracked files so

our files git add and you'll notice that

the untracked files does not include

anything in the builds folder and the

library code folder and that's because

of the git ignore file it's doing its

let me just move this out of here so you

so if i do that again um let's see let's

get status we can see we've got these

but it's also not tracking these guys so

there's a builds folder and there's a

as i said before we don't want those

included so i'm going to put that back

and then we'll do git status one more

time okay so we've got our git ignore

the juicer file and then the four source

code files all right now that we have

ready to be committed let's make a

whoops i forgot the closing quote all

that's fine good enough okay now i can

in fork i can do file open repository

so now i can actually see what's going

and here's right here's my initial

okay so if we want we can go make a

repository on github and push the code

um or you know just keep it local but

either way now we can keep track of

okay so i'm going to give you a quick

overview of where everything happens in

before we actually start work on this

so this is going to be a brief overview

of how these plugins work and um

what where we will primarily be spending

doing edits in the code so we have four

source files right here we've got

plug-in processor.cpp pluginprocessor.h

plugineditor.cpp and plugineditor.h

in uh let me pull up the assistant

so that we can see what's going on on

plugin processor.h um in a juice plugin

you've got two main functions that are

there's your prepare to play function

and then there is your process block

prepare to play gets called by the host

when it's about to start playback

and then process block is actually what

you hit the play button in the transport

control when you hit that play button

the host just starts sending buffers at

a regular rate into your plug-in and

give it back any finished audio that is

you cannot interrupt that chain of

if you add latency or whatever it can

cause clicks and pops in your speakers

that has the potential to damage

speakers as well as explode eardrums

just imagine this scenario that you're

at a club and the sound system is super

and your plug-in causes a pop or a

the sound you know the sound engineer or

the dj or whatever has their thing

there's this huge pop and everybody's

like that so that's why um that's the

big thing about audio processing is you

um interrupt this process block and

anything that goes on inside it you have

um you got to figure out how to get all

the all the work that you need done by

done within a fixed amount of time okay

so those are the two big functions we're

going to be spending most of our time

and then process block now um let's take

a look at what happens over there so in

use this as the place to do any

pre-playback initialization that you

and then in process block this is where

you get your actual block of audio data

um and if you're using a midi controller

these are where the midi messages are

but basically um this is where we do all

typing all a bunch of code here and we

doesn't happen in like more time than we

okay let's go take a look at plugin

is where we set up all of our visual

elements and um there's some basic stuff

you got your paint function your resized

uh painting you know it's what we're

showing a hello world if i run this real

so before i get into showing how to run

yeah right now we're just going to see a

hello world displayed at the center of

um and then if we have any child

sub components or anything like that

we'll lay them out here in the resized

okay so that's a basic overview we're

going to be basically making child

components to represent the knobs and

and the spectrum analyzer and the

and then we're going to be you know

some you know audio parameters that

okay so let's run this for the first

time what we need to do is go to

our particular scheme we have a few

targets we've got a vst3 format

we have an audio unit format if we are

on os x and then we have the standalone

okay so i'm going to put this on

in visual studio you'll do something

target to run to be the standalone

all we need to do is just run it build

and run it's going to compile these four

files it's going to compile any module

all right here's our standard plug-in

it's not doing anything it's just

displaying hello world but it is

so yeah that's it there's our basic

plugin we're going to turn this into

the thing i showed at the very beginning

i wanted to add a quick note right

before we get started writing actual

what you need to do is go to producer

click on this gear right now for the

click on this gear scroll down and you

language type to be c plus plus

17 okay a lot of the stuff we're going

plus plus 17. okay once you've done that

just click save and open in ide

all right let's start coding navigate to

to the plugin processor.h file because

we need to declare some variables

audio plugins depend on parameters to

control the various parts of the dsp

juice uses an object called the audio

to coordinate syncing these parameters

with the knobs on the gui and the

so we need one of these in our audio

processor and it needs to be public so

can attach all of its knobs and sliders

and buttons and combo boxes and stuff to

all right so let's declare one of those

all right we need to give it a name i'm

and then we need to make sure that we

not parameter not parentheses when we

all right uh the audio processor to

connect to is going to be this

audio processor we are not going to use

an undo manager uh we're going to just

parameters and then we need to provide

a function here to give us a parameter

layout so the ap vts expects us to

provide the list of all parameters

when it is created so we need a function

that will provide that for us

in the form of an ap vts parameter

all right and we can just call it and

actually let's make it static

since it doesn't use any member

variables and i have an extra colon

okay let's declare this guy right here

now for this project we will keep the

we are only going to have three

low cut high cut and peak for the low

cut and high cut bands we will be able

to control the frequency cutoff as well

slope of the cut off for the peak or

parametric band we will be able to

the gain and the quality meaning how

the peak is all right so we will start

with the low cut and high cut frequency

and juice has an audio processor

and let me pull up the documentation for

all right so juice has an audio

this class is a generic interface

towards all the different audio

parameter formats that different plug-in

for example audio unit on os x

is used by apps like logic or final cut

vst 3 on windows and osx is used

in apps like cubase or ableton live

or bit wig and then there's aax

for pro tools okay now the audio

processor parameter class has several

that represent things like sliders and

and for our needs the audio parameter

flow type is used to represent

parameters that should be represented on

of some kind so we want our frequency

over a wide range so we are going to use

our let's declare one of these

and i hope the font is big enough for

you to be able to see what's going on

we're going to return our layout

and now we can now we can add

um an audio parameter float to this so

add and these things want unique

pointers so we'll use uh make unique for

make unique and we want a juice

audio parameter float we want that guy

all right the name of this is going to

freak the parameter name will also be

cut freak um the normalizable range is

now the human ear has a range of roughly

you can pick up sounds from 20 hertz to

so that will define the range for our

parameter let's uh create one of these

oops normalizable range here's the

that takes parameters this is the one

uh we're going to make it use type float

range start is going to be 20 and the

000. now the interval value we're going

interval value of 1 and what that means

is that our slider will change the

one we could use bigger steps if we

wanted to for example we could drag the

um if this was set to 10 then our slider

go from like 20 to 30 to 40 to 50 every

but as we get in the upper uh range

of frequencies that could be helpful

the audible effects of like 20 hertz

versus 25 hertz like they sound like

whereas 2000 to 2050 does not really

sound like different notes on the piano

so we're going to keep this at a step

okay the skew factor now the skew

parameter lets us change how the slider

responds what that means is that we can

skew the slider such that the majority

are covering the lower part of this

for example i'm reading my notes over

for example i could set this skew value

of the sliders range covers the values

1000 hertz leaving the last 25 percent

to cover the remaining frequencies one

twenty thousand hertz or i could skew it

differently so that the slider's bottom

twenty hertz to one thousand hertz and

the remaining ninety percent of the

one thousand and one hertz to twenty

and since i don't wanna be doing any

skewing right now i'm gonna leave this

set to one all right and then

the last thing is that um the default

value for this parameter now this

is the low cut parameter so we will give

20 hertz because that's the bottom of

the hearing range and we don't want to

hear this parameter do anything

unless we actually move it all right so

that takes care of the low-cut parameter

plug-in processor and just show the

plug-in plug-in thing so you can see the

full name of this guy right here

all right we've got our name we've got

our parameter name and we've got our

and this is our default value we are

going to do the same thing with the high

the only difference will be that we will

000 hertz because it's at the top of the

human hearing range and we don't want to

hear this parameter do anything

unless we decide to change the value so

i'm going to change the name to high cut

high cut and then this needs to be 20

000. now let's do the same thing for the

frequency we will use the same range of

um the same step size of one and the

same skew value of one the only

difference is we will set the center

frequency to a default of 750 hertz

and let's change the name to peak

for the peak gain we will be expressing

and a good range of values to use here

positive 24. a step size of 0.5 means

back and forth it will represent a

and we want this slider to behave in a

linear fashion so we will use a skew of

and we don't want this to by default add

or cut so we're going to use a default

value of zero so i'm going to copy this

we're going to change the name to peak

range is going to be negative 24.f

with a max of 24.f uh our step size

next the peak band's quality control

the quality controls how tight or how

this is kind of an abstract number and

you can have a pretty narrow q which is

reflected by having a high q value

or you can have a very wide q which is

reflected by having a very low

q value so let's give ourselves a low

though i'm going to copy this let's copy

change this to quality change that's

so we will um yeah so we're going to

give it a low value of 0.1 and a high

10. i'm going to use a step size of 0.05

which means when we drag the slider

these can be pretty granular sizes which

means we can have a lot of control which

and always we want a linear response so

to one and on top of it we want to use a

f all right for the low cut and high cut

i want to have the ability to change the

so i will give myself some four

okay our cut filters are normally

uh decibels per octaves or their

normally expressed in decibels per

the way the math behind the filter

equations works ends up expressing these

choices in multiples of 6 or 12.

so that means we can have choices like

24 36 so for this project we're going to

so because we are using specific choices

and not a range of values like with

this means we get to use the audio

object so i'll show you what that's like

audio parameter choice so that's this

this thing uh it needs a string array

and because both the low cut and high

cut will use the same set of choices

i only need to create this string array

once so we're going to do that

first let me get rid of this line let me

up okay so let's make our string array

and now we're gonna do four choices and

now we're going to construct uh

per oct or 24 and we can do that like

all right that should make a lot of

so we've got i'm sorry i's first value

is zero so we've got 12 plus zero then

12 plus 24 12 plus 36 that gives us 12

36 48 and then we're just sticking uh db

per octave on the end of that string all

right now we just need to create the

and give it the string array of choices

and use the default value of 0

meaning the filter will have a default

12 db per octave let's create that now

choice is going to be our string array

and our default index will be zero

all right and we just need to duplicate

this line for the high cut as well

all right now we have got our parameters

set up in our parameter layout so we

can just return it and pass it to the

audio processor tree value state

constructor which we have already done

we already did that right here all right

now if we run the app as it is right now

we are not going to see anything other

and that's because we haven't added

if i go up to the create editor function

audio processor editor to see what our

so let's do that we're going to comment

that line out we're going to write

audio processor editor and it's going to

uh this okay so if we run it and take a

first of all make sure you are in

if we run it we are going to see

some good stuff okay if we look at our

combo boxes we can see that our slope

show up this way there's our 12 24 36

peak control default value of one we can

see it goes you know zero point one

one five two five all the way up to ten

and then for our gain we've got twenty

we can see that it's stepping by um half

okay so next we will work on the signal

that's the next step to make all these

parameters actually do something

all right we've got some parameters set

up now this would be a good time to make

you know commit what we've done so that

what we do in the next step gets messed

up we can always revert back to here and

try again so added parameters

we can see what we did we created the

created the parameter layout then we

added our parameters and created the

made it give us the generic audio

whenever we go to look at stuff and then

and did an export for in my case os x in

perhaps it's osx or windows um anyway

we'll add those things stage those and

all right so the next thing we're gonna

now before we do that before we actually

start writing dsp code we need to add

module so go to producer click on the

then click the plus button and you're

global juice global juice paths

and go to juice dsp all right once that

and now we have access to all of the uh

i'm going to switch back to the single

view for right now so let me hide this

and then go back to pluginprocessor.h

back to my script if you have never

software before or used any type of

audio software then you might not be

familiar with the concept of audio

so stereo means there's two channels

now each of the signal processing

is set up to process mono audio

unless it's declared as stereo in the

so what that means is that it's only

going to process a single channel of

and since this plugin is going to be

we need to duplicate all of the stuff we

and the dsp namespace uses a lot

of template meta programming and nested

namespaces so let's help ourselves out

let's create some type aliases to

eliminate a lot of those namespace and

first thing we're going to create is a

filter alias we're going to be

processing floats and not doubles in

that's our first alias now i said before

set the slope of our cut filters to be

each of the filter types on in the iir

filter class has a response of 12 db per

octave when it is configured as a low

so if we want to have a chain with a

response of 48 decibels per octave

we are going to need four of those

central concept of the dsp namespace in

the juice framework is to define a chain

and then pass in a processing context

pass in a processing context which will

run through each element of the chain

so we can put four of these filters

in a processor chain which will allow us

and have it process all of the audio

automatically so let's do that

using cut filter equals so third chain

and then this is where we do one filter

i mentioned earlier if you configure the

filter as low pass or high pass

it will have a 12 db per octave slope

we can also configure that filter to

shelf or notch or band pass or all pass

this means we can use one of these

parametric filter so now that we have

the peak filter and the cut filters

we can define a chain to represent the

mono signal path so we'll do that using

processor chain and we will do a

cut filter then a normal filter and then

now we need two instances of this mono

to have access to the filter instances

in order to adjust their cutoff

gain quality or slope so let's declare

mono chain we got the left channel

now before we can use our um our filter

so let's go over to our prepare to play

and do that we must prepare our filters

and we do this by passing a process spec

to the chains which will then pass it to

in the chain so let's declare one of

and it needs to know the maximum number

process at one time it needs to know the

mono chains can only handle one channel

and it needs to know the sample rate now

we can pass it to each chain and they

prepared and ready for processing

and let's just make sure everything's

build succeeded okay step number three

this requires us to jump down to our

now the processor chain requires a

processing context to be passed

to it in order to run the audio through

in order to make a processing context we

audio block instance now the process

is called by the host and it is given a

any number of channels so we need to

extract the left channel and the right

from this buffer and the left and right

channels 0 and 1 respectively so the

first thing we have to do is create an

which wraps this buffer so let's do that

first we're going to get rid of this

right here and this is a block and it is

now we can use the helper function in

the audio block class to extract

individual channels from the buffer

which will then be wrapped inside more

auto left block equals block dot

get single channel block we want channel

do the same thing for the right channel

representing each individual channel we

can create processing contexts that wrap

process context replacing it's a float

it's going to be initialized with the

so we have our block representing an

individual channel we have a context

that kind of provides a wrapper around

chain can use now we can pass these

to our mono filter chains left chain dot

and we want the left context and then

it will work but we will not hear our

filters do anything because we have not

so this is going to be a good time to

set up the audio plugin host so we can

actual audio through our plugin and show

are not doing anything but until then we

can actually just run this and you'll

see that it's not going to do anything

cool so we can drag all this stuff

there's no audio running through it so

we're not going to hear it do anything

okay let's get set up with audio plugin

this is uh this comes with juice

folder and then go to extras and now go

and now open the you can open the juicer

i'll do that now i've got this here it's

just like the other thing where we have

all our source and our modules and

so all we're going to do is just save

wait for this to open and now we just

to build it all right build succeeded

so we are done with um this project now

that was very easy okay what we have to

is run it outside of our project

so go to the builds folder go to your

particular operating system i'm going to

go to build debug and now run it

all right it's going to want access to

what we have to do now is scan our

i haven't built it yet i've only built

the standalone version so i'm going to

to all and i'm going to build it now

and what it's going to do is it's going

to create a vst3 it's going to create an

and it's going to copy them to the

relevant locations on the computer

now i can go back to audio plug and host

and now i can go to the options menu and

edit the list of available plugins

and now under these options button here

this is where you're going to scan for

if you're on mac audio unit and vst3 so

it's going to find our simple eq because

for audio unit do the same thing my case

so it's going to find all of that okay

so now that we have all of our audio

units that are built into the computer

and our vst3 close this available

list window now we can right click

right here go to the uh your company

unless you put something else in

and pick um vst3 for right now

here's our plugin so those good times

now we want to run some audio through it

so what we want to do is right click

x you're going to go to the apple menu

audio file player now this little plugin

lets us load files and play them

yeah we can load sound files and then

play them so we're gonna wire this

up connected to our audio output

hear audio running through our plugin so

like this and drag that to our audio

and um the other thing to do is you need

to make sure that under your um

options go to your audio device settings

and this is where you're going to

configure your audio on what you have

now i'm going to set this up with an

feel free to set it up with your own i'm

just pulling something that i got from

youtube's free audio library so that way

this video doesn't cause any sort of

copyright issues or anything set it up

and then um i'm also gonna configure it

through um so that the audio that i play

instead of just going out of the audio

output all right so standby for that

okay i've got my au audio file player

with a file that is not going to trigger

youtube i've got it wired up to this

simple eq that we've been working on

and it's connected to the audio output

i'm going to hear it through the

speakers and you guys are going to hear

through this video so check it out

all right cool so uh obviously this

stuff is not gonna do anything if i

all right so that's the next thing we

are going to work on we need to

set this as what opens by default when

we run our application so we will

do that next a good thing to do once you

save the setting save the filter graph

setting i'm going to save it with

my project that's a good place to put it

programming put it right here and just

okay so now i can save that now i can

quit this and now i can configure

the audio um configure my project to run

audio plug and host when ever i run the

project so i'm going to do that with a

go here for os x you're going to go here

you're going to go to edits the scheme

and you're going to configure the

and then just search for audio plugin

and there it is choose close

and now if we run it it's going to run

and it should load our saved file

there it is okay so now we can um

now what we can do is actually debug our

stuff so if we add a break point right

um it's gonna pause execution right on

so now we can actually debug our code

and whatnot while it's running in there

okay so we are done with audio plug and

okay we are going to connect some

filters but before we do that let's make

a commit and just you know jot down what

so we went through this and we

and we got our chains up and running

right so here's where we created our

here is where we initialized our chains

started running audio through our chains

this is where we did this is where we

filter graph and then here is where we

okay with that out of the way now we can

start configuring our filter chain so go

h and we're going to go up to the top

now let's start by extracting our

parameters from the audio processor

and a data structure representing all of

will keep our code nice and readable so

and now next let's write a helper

function that will give us all of these

parameter values in our little data

struct all right let's go to our cpp

now i'm going to implement this near

where i created the parameter layout so

so i'm going to put that right above

this we'll just add this here

okay now there are two ways to get

from the ap vts the first way is to call

get parameter and then get value like

some parameter name like low cut freak

and then get value but the problem with

is that we are given a normalized value

all of the functions that produce

coefficients for our filter expect

real-world values not normalized values

so we're not going to use this one what

we can use is a different function

we can use apvts.getraw parameter value

now this function returns the parameter

care about units based on the ranges

that we set up when we defined the

so for instance for the low cut

frequency it's going to return a unit

that's within this range instead of a

normalized value between these two

so let's initialize all of our data

all of the properties in our data

these raw parameter values are atomic

which is handy when we are interacting

i'm not going to talk about any of the

thread safety issues that come along

in this particular course but you can

in my course which teaches how to build

and in several talks on youtube from the

so let's go through these and start

okay there's all the parameters getting

them all low cut free high cut freak

making sure we're using all the names

let's go up to our prepare to play

all right we're going to do this after

we've prepared our chain now that we

start producing coefficients using the

statter static helper functions

that are part of the iir coefficients

so we can do this auto chain

now we can do auto peak efficience

and our center frequency which is going

dot peak freak chain settings

for the gain parameter this particular

parameter expects a value in gain units

not decibels so we must convert our

decibel value to gain thankfully there

is a handy helper function to do just

so that's juice decibels class and then

this function and we feed it

change settings dot peak gain in

all right let's put all that stuff on

its own line so it's easy to look at

now that we have our coefficients for

the peak filter we can set our filters

now you can access links in the

a get function like this left chain dot

and it's templated this function wants

index to a particular element in the

via its template argument so let's help

and define an enum that represents each

link's position in the chain and use it

here all right so we're just going to

the way it is let's go back to our

we'll go down here to where our chain is

and enum here enum chain positions

and we're going to have low cut peak

and high cut and this goes along with

what we have here we have a low cut

the peak band and then the cut area

right here we could change this to

okay now that we have that let's go back

to our cpp file go back to prepare to

all right let's use it to access our

peak filter link and assign some

so we're going to go chain positions

peak like that all right that's how we

get that particular filter link

all right now the coefficients object

is basically a reference counted wrapper

around an array that is allocated on the

now we want to copy its values over so

and don't ask me why the juice people

decided to design their coefficients

allocating on the heap in an audio

but we're going to ignore that design

flaw for right now and just keep moving

alright so we are going to access the

and we're going to assign it across peak

and now we just need to de-reference

them and then we'll do the same thing

okay at this point our peak filter has

audible changes to the audio running

through it if the gain parameter is not

zero however any changes we make to

will not cause audible changes because

we are not updating the filter with new

whenever the slider changes so let's do

in our process block so let's go on to

our processing process block

and we need to do this before we run

always update your parameters before you

okay so let's just copy the code we

right where we created our coefficients

we can refactor this later let's just

go to process block put this right after

clear stuff happens after that put it

okay again we can refactor this later

the only thing you need to change is

this guy let's fix this so we can just

get sample rate and now if we run it and

adjust the gain q and frequency

sliders we will hear some audible

okay i have run it and let's see what it

gets see what it gets us okay we're just

going to mess around with the peak

okay all right it did something

cool so you might notice that the filter

wonky that's because our ears hear

sorry that's because of how our ears

frequencies work if the sound goes up

the frequency doubles so this is an

instance of where we want to change the

skew parameter of our frequency slider

let's play around with some different

values until we find something we like

so we go down to where our parameters

um let's see which parameter was the

i think it was that's step size yeah

that's step size so it's the last

parameter so i'm gonna just try 0.5

for the um let's see i'm messing with

the peak frequency so we'll do that one

go like that let's rerun this stop

i'm going to change it to 0.5 basically

what it's going to do is adjust how the

all right now this is going to be more

messing with um actual like an actual

that you're designing versus these um

so either way i'm gonna keep messing

with this and we'll see what value i end

so something you might notice here is

like um the range is 20 to 20 000.

um if the slider's in the middle you

would think that a value of 0.5 would

10 000 hertz but we don't actually see

that until we're way over here

this is what i was saying before about

based on this skew that i have right

the um from 20 hertz to 10 000 hertz is

spread out across this range and then 10

fits here in this little range right

what the skew parameter lets us deal

okay so something that i'm noticing when

really far down like 0.15 or whatever

is i hit the bottom of the range here

and it doesn't go up to the next

until right there so that's a big chunk

usable based on this skew valid

sku value of 0.15 so i'm going to put

this back to 0.25 and i'm going to use

every other frequency parameter okay

so with that said we you know added a

let's go ahead and make a commit this is

all right sorry we connected the peak

all right let's go ahead and commit that

stuff all right on to the next step

okay we are going to get the low cut

low cut parameters now if you remember

if we jump back over here the cut

their own processor chain instance

filters within it as i said before each

filters has a 12 db per octave response

low pass or high pass filter we are

going to use a helper function from the

juice framework that allows us to define

filters with custom orders and we've

in terms of decibels per octave but the

cut filters is also known as its order

okay also a low cut filter is also

likewise a high cut filter is also

filter so let's go take a look at the

helper function we're going to use let's

plugin processor go to the end of

prepare to play and we're going to

we're just going to call it so we can

all right just give us some default

iir high pass high order butterworth

okay so just jump to the definition of

that's going to take us to the

declaration but we want the actual

okay if we take a quick look at the

for example this little loop right here

we'll do this loop because we're going

if we look at the implementation you

iir filter coefficient object for every

two orders so if the order is two

we are only going to get one of these

uh this gives us a 12 db per octave cut

four if our order is four we are going

to get two sets of coefficients if our

order is six we will get three et cetera

so what we need to do is produce the

required number of coefficient

objects that are needed based on what

parameter is set to now remember the

this parameter had four choices it was

24 36 48 let me jump over to plugin

processor and go down to where

we created our parameters i was down

all right so the first choice is at

if our choice is 12 db per octave

which is index zero we want to get back

and to do that that means we need to

an order of two okay if our choice is 24

like if we're doing i equals one

we need to supply an order of four in

two coefficients back okay ergo

as in i'm talking about this parameter

6 and 8 okay so we need to add 1 to our

and then multiply that by two

to get the order to use when calling

okay once we have done that we can get

our array of coefficients from this

okay i'm going to say that one more time

our possible orders are 2 4 6

8. so remember our slope choices are 0 1

3 so what we have to do is add 1

to our slope choice and multiply that

2 in order to get the correct order to

to this function okay let's do that now

go back up to the prepare to play

and we're going to just get rid of this

auto cut coefficients equals and now

all right our frequency is going to be

low cut frequency sample rate sample

and our order is going to be remember

chain settings our slope for the low cut

we're going to add 1 to it we're going

all right let's put these all in their

their own line so it's easy to look at

okay chain settings remember this is a

zero one two and three so we're gonna

add one to that that's gonna give us one

two three four and then we're gonna

double it which is gonna give us two

let's start by initializing the left

all right so let's get the low cut

so we'll just do auto left low cut

we're gonna get it chain position whoops

all right now first we are going to

all right remember there are four

positions so we need to bypass all four

right now it would be ideal to be able

based on the slope setting so to make

the code more readable let's define

another enum that represents our slope

since enums decay to integers which is

what our choice parameter is expressed

let's go to the top of our plugin

we're going to define an enum up here so

slope amount in the enums member names

use numbers to begin identifiers in c

plus i'm going to put slope before that

all right now let's um let's adjust what

the filter chain slopes are specified as

let's change this guy right here so

instead of it being low cut slope

expressed with an integer let's express

all right we'll do the same thing for

the high cut okay now if we try to

let's fix this error next all right what

change the data type right here to uh

we're just going to cast this to that

do the same thing for this line and try

now we have our enum which gives us you

know specific types that we can switch

let's go back to our prepare to play

oops all right that's down here now we

switch and we want to do uh chain

i'm too lazy to type the switch types so

i'm going to let the autocomplete do it

all right add missing switch cases yes

okay now we just need to fill them in if

meaning a 12 db per octave slope

the helper function will return an array

coefficient object only so we will

assign those coefficients to the

first filter in the cut filter chain and

bypassing that filter chain so we will

um let's see left low cut dot get

first filter in that chain we want the

coefficients and we're going to assign

our cut coefficients the first element

now remember we have to dereference and

this particular chain all right

now for the next choice we will do the

same thing that we did when the slope

however the helper function will return

coefficient objects so we will find we

to the first two links in the filter

all right i'm just going to copy this

and change these to one all right we're

going to repeat for the third

and fourth option when the slope is 36

all right now that's obviously not you

know optimized there's a lot of

repetition in the code going on we'll

okay all we have to do now is repeat

and our slider and combo box for the low

will configure the filter properly

so we are going to get the right chain

and let's just copy all of this

and replace all of the left low cut with

okay all right as i said there is a lot

and it could do with some refactoring

but let's not do that just yet okay

first let's copy this chunk of code to

our process block just like we did with

and we should be able to run it and test

the sliders in the combo box and hear

it adjusting the low cut filter all

grab cut coefficients like that

jump to process block we're going to put

this after our peak coefficient stuff

right like that okay the only difference

sample rate we need to call get sample

okay we should be able to adjust the low

cut frequency as well as the low cut

slope and here it make a difference

all right let's adjust the slope

i'm going to put it around 2500 put it

we can definitely hear there's more

a more gentle slope versus a steeper

okay let's uh make a commit since we did

we added the uh let's see we connected

low cut parameters to the filter

we made our enum we adjusted our chain

and we added our coefficients and we got

um working with the filter and then we

also updated how we pulled them from the

from the process block or from the apvts

all right cool on to the next thing we

okay let's start the refactor with

cleaning up the stuff that configures

let's just do a uh a function here at

all right we're going to update the peak

filter with the change settings

i'm going to implement this beneath

implementation from the process block

paste it here replace it in the process

block and then do the same thing in

i'm just gonna copy this stuff paste it

and now i'm gonna call this i'm gonna do

the same thing in prepare to play

very easy now let's add a helper

function since we will be updating lots

of coefficients like we are updating

here we're updating them here here

here here okay so let's go back to our

and let's do that here now i'm not sure

of the exact type that the dsp iir

filter class uses for its coefficients

if we take a look over here it uses this

thing which is an alias to whatever this

but we can make an alias to that alias

and now it's very easy to declare this

helper function that will update those

now it doesn't use any member variables

so it could be a free function or it

could be a static member variable

a static member function so i'm going to

particular instance because i'm already

right here i don't want to have to

scroll up to make a free function

all right and let's go implement that

below where we implemented our

update peak code okay remember they're

um reference counted objects allocated

on the heap so we need to de-reference

them to get the underlying object

the old ones are going to be this thing

the replacements are going to be this

we'll do the same thing for the right

okay let's run this and then move the

sliders make sure it works and if it's

cool then we'll delete this old code

and then do the low cut filter next

okay so we're just going to mess with

all right it's making changes make it

give it a little sleepy heat

cool all right let's clean this up and

let's build just to make sure that what

all right let's make a commit all right

here we go commit that stage all this

boom okay we can refactor how the low

cut filter gets configured next and then

we can use that same code to configure

let's refactor how the low cut filter is

so we'll be able to use this later for

now i'm not sure what type names to use

so i'm going to use a templated function

so let's go to our header file

and put this down here template type

void update cut filter now a trick one

refactoring something like this is to

use the same names you were using in the

so i'm going to use uh if we go take a

i'm going to use the same names here

where i've got cut coefficients

and then left low cut and then

low cut slope i'm going to use those

okay so we're going to do a chain type

left low cut i'm going to use a

cut coefficients and then i've got my

chain settings const chain settings

chain settings all right so let's copy

from process block first and call it in

and then comment and comment out the old

stuff and we will fix any errors along

plug-in processor we're going to grab

and then all of this code right here

and now let's comment it out and

call our function all right we want to

uh left low cut let me call this

after this point so i still need this

all right so let's see and i still need

okay cut filter we're going to call it

with left low cut we're going to call it

and our chain settings let's uh give

that a quick build just to make sure

that that works as expected all right we

errors going on here oh yes okay so

we're not passing this and we're not

so comment that out and that should be

so we need to add some template keywords

and that also needs to go here

in front of these since these are

template functions we have to express

we have to explicitly declare that they

templated like this it's one of the more

uh c plus plus rules all right

okay cool build succeeded all right the

left cut filter is configured so we can

with our helper function now so we just

comment out all of this code call our

and use the right low cut we'll do a

build succeeded all right cool now we

chain settings object we're only using

so let's go back and change our switch

statement okay we're going to get rid of

and we're going to change our parameter

so we're going to get rid of this we're

slope and now we can change this line to

low cut slope let's build it we should

because we need to change what we're

calling it with this is where we need to

low cut slope and then on the next one

as well all right and if we build it we

okay cool no errors so let's revise

let's go up here to prepare to play and

we need our coefficients our left

low cut as well as our right low cut so

and now let's call uh we'll get rid of

and now we can call our code we can call

function we'll start with the left low

update cut filter with the left low cut

and our cut coefficients and our left

low cut uh this is where we need our

dot um low cut slope and then do the

same thing for the high cut or for the

low cut our slider and combo box

for the low cut filter should configure

uh dsp filter properly all right let's

and if it's cool we will delete all this

do commit okay let's run it and see what

okay so we are going to mess with the

all right i am very happy with that

let's clean this up and make a commit

all right let's clean up our header file

okay let's build it just to make sure

all right looking good updated

configuration load code filter

configuration all right this is where we

this is where we deleted our helper our

and now call the updated stuff

now this is obviously very verbose so

we're going to use a special trick just

if we reverse the switch order we can

case path uh we can leverage case

pass-through to eliminate a ton of code

so i'm going to do that first all right

we're just going to put the cases in the

okay the way this works is like if it's

if it's if our slope is 48 we wanted to

and then we also wanted to do all of

instead of making it break out of the

switch we can just do okay if it's 48

do this do that one here and then and

then do also do the one that is required

we can also write a templated helper

function to eliminate even more

because we're doing this thing and yeah

all right so let's write that next right

all right so we're going to do template

we'll add these parameters next uh

void update so we're gonna need our

we're gonna need the coefficients

and then um so we're gonna need our

chain type and our coefficients

and then if you notice all of these make

get or set bypass and use as a parameter

so we are going to make this be the

if you didn't notice when we called this

function we didn't have to provide any

so the compiler deduced what to put here

leave these as the later template

arguments the compiler can deduce them

for us and we only need to provide uh

that index so we're gonna do that int

index okay now we can just do that

update coefficients function

update coefficients and our old one is

dot this thing right here template get

replacement type is going to be the

coefficients uh cut coefficients is that

the name i'm using there i'm going to

and the index that we use if you notice

it's always when it's get zero

we always use the zero with cut

coefficient index when it's one we use

the index one okay so whatever we put

our index is the same thing we're going

index all right how convenient is that

we need to set the bypass state to false

chain dot template set bypassed

cool all right now we just need to call

all right so remember if we're doing the

degree slope we want to call this

all right and this is being replaced by

this is where we want index three and

is left low cut and our coefficient type

coefficient all right let me spell that

all right that gets rid of these lines

all right we do the same thing three two

let's test that out make sure that works

if it does then we can clean this

up all right so we're gonna run it we're

gonna adjust this and adjust this

all right that's filtering put this on

and we'll change the slope and we hear

let's make a commit of that after we

all right cool is there anything in here

i don't think there is prepare to play

update cut filter code very cool

got some more advanced c plus plus stuff

all right now we can uh connect the high

to the um to the filters all right so

processor.cpp and go up to the um

go to the prepare to play function first

go back to my notes here uh we need to

coefficients before we dig into high cut

filter configuration so let's change

all right now that we've done that now

we can configure the high cut chain

we're going to follow the same pattern

uh we're going to call the helper

function to get coefficients and then

we're going to call the helper function

to update the filters with those

so we're going to do auto high cut

okay we want the design low pass high

all right same thing it's going to be

dot the high cut frequency same sample

and then our order is going to be this

but it's going to be the high cut slope

okay now we can get our left chain in

okay and now we can just call this uh

call this guy call it with left high cut

and then do it again for the right side

and then we need to use our high cut

and then we will do the same thing uh we

can obviously refactor this later

we can do the same thing in our process

process block let's just put this at the

filter code here and then oh we need our

and now uh now this is in place we can

all right so we're going to be testing

the high cut frequency and the high cut

all right so i'm going to set this

now if i change the slope i should hear

less and less high frequency

let's do a um don't repeat yourself

and um that'll wrap it up for the dsp

that was easier than probably you

so the first thing we are going to do is

go to our plugin processor dot h

down here let's make a function that's

now we need a pair of functions one for

the low cut and one for the high cut and

these will be called by the uh by this

all right takes care of those let's go

over to our plugin processor dot cpp

i'm going to jump to after the updates

function update coefficients function

i'm going to copy the relevant code

from processblock to the implementation

let me grab that from processblock

paste that here make sure we're getting

the coefficients and then updating both

we're going to do the same thing for the

let's go grab that code from the process

i cut coefficients update cut filter

all right now we need to implement our

so i'm going to do that below this

now i just need to get the chain

change settings equals get chain

now i can call update low cut filters

now we just need to replace all of that

with a call to that update filters

all right we don't need our chain

settings anymore we don't need any of

update filters okay let's do the

same thing in uh prepare to play

all right we lose all of this code which

all right let's run it just to make sure

all right we're going to adjust all the

is the high cut working get rid of some

okay high cuts working let's mess with

cool all right that works let's clean

delete that code go to our process block

delete all this code all right let's see

if there's anything else that's

not just those guys just those guys okay

so that wraps it up for the dsp side of

okay so that's awesome all right

the next stuff we get to work on is the

gui side of things we get to design a

interface and knobs and get the response

fft analysis showing up in the

okay before we start on the gui let's

saving and loading of our plugins

it's very easy to do because the plug-in

let me show you what that looks like all

right so right down here there's a

okay this is where all of the um

basically the generic values are stored

okay so let's go back to our plugin

and we're going to go to the what's the

get state information the state member

it's an instance of a juice value tree

to memory very easily so we can use a

to handle the busy work needed to write

state to the memory block that this

function has been given by the host

talking about this memory block right

here alright so we can just make a

take one that uh writes to a memory

yes we want to append to the existing

let's call it mls for memory output

now we just write it a p v t s dot

that's it how simple is that likewise we

we can restore our plug-in state from

memory using a value tree helper

the only thing we need to check for is

if the tree uh that was pulled from

is valid before we copy it to our

so let's use that function all right we

we're gonna pass it data we're gonna

okay once we know the tree is valid

then we can replace our plug-in state

and also update our filters with these

parameter values so apbts.replacestate

with the new one and then update filters

how simple is that so now if we run this

we should be able to tweak the

it will be restored oh this i changed

the folder name so i need to reload

okay so for example i'm going to change

to whatever that number is okay save it

we're going to reopen and it's no longer

4573 cool all right we can double click

to reset it back to the default value

our parameters are saved between loads

cool okay let's get back to using

our editor instead of the generic one so

uncomment this line or we're gonna

comment this line out and uncomment this

all right so now we are gonna be shown

um it just says hello world okay so

we're back to this all right so we're

knobs and sliders and all that kind of

stuff okay so the first thing that i

first thing i want to do is give

ourselves some more room so we're going

600 by 400. all right we're also going

plugin instead of the host for right now

okay if we run this we're going to see

a bigger window cool all right

now let's go to plugineditor.h now i

don't want to have to type this base

class initialization for every slider

that i'm going to make because they're

all going to be rotary sliders and

they're not going to have a text box so

i'm going to create a class that does

automatically in the constructor and

just use that for every slider in the

i'm going to put that right here

we're inheriting from slider and then

we're going to set it so that it's using

the rotary horizontal vertical drag

style and then a no text box position

now we need to add some sliders so let's

right here okay we're going to deal with

for right now we're just going to show

the frequency and gain and quality

and we want our peak freak slider

we want our peak quality slider

we want our low cut freak slider

we want our high cut freak slider

now when i have a bunch of components

that are going to be have that are going

to have the same thing done to them all

i like to add a function that's going to

give me all of them in a vector

so that way i can just iterate through

them easily so i'm going to do that next

all right now it's very easy to

implement let's go to plug-in editor

we'll put this after resized

and all we have to do is just return a

vector with um all of our components in

that's super easy to use we just need to

we call set size so we're gonna do that

and then we can do add and make visible

all right the next thing we need to do

now juice live constant is a very useful

we're going to put these right here yeah

when it's time to dial in specific

juice live constant because it basically

lets me adjust positions of things

while the editor is visible which is

very handy but for right now what i'm

going to do is reserve the top third of

third of the display for showing the

of the filter chain and then the bottom

it's going to be dedicated to the

placement of all the sliders so i'm

all right so the way this works is i've

got my bounding box for the component

i'm dedicating an area for the top

basically like i'm chopping off a

chopping off uh 33 of the height

that's going to get stored in this

response area now i'm going to put the

on the left so i'm chopping out 33

of the bounding box in its current form

that's going to go to the left and then

so if you remember i've got basically

100 this is taking up 33 percent

and so this is rep this bounds right now

so i want to take half of that which

that's going to be the right third of

the display now i just set my um

my low cut frequency slider and my high

to be in the left side and right side

for my peak slider i'm going to set that

at the top of that center column it's

same thing's going to happen here this

of two-thirds of what it used to be so

half of that to give us one-third for

the peak gain and then one third for the

okay so if we run this we're going to

or sliders or whatever we want to call

so here's our big old low cut slider

here's our high cut slider and then

here is our um peak frequency here's our

peak gain and then here's our peak

quality and you can see these guys are

of the um of their allotted space

all right next we're going to add these

all right let's go back to our header

over here they're just going to be

they're going to use the same custom

rotary thing these are going to be low

cut slope slider and we got to add them

and then we need to position them so

let's put them after our low cut

we are going to make this uh let's see

this is going to be low cut area we're

we're gonna cut we're gonna divide the

low cut uh side of things in half

and then we'll do the same thing uh

let's see this is where we're gonna do

cut slope slider not set bounds

low cut area and then for the high cut

we're gonna do the same thing we're

make sure it's that guy and now we can

high cut slope slider dot set bounds

all right so we are removing we're

basically removing from the top of this

um a a rectangle that is half

of its original size and giving that to

and then using what that leftover piece

to the low cut slope slider right

check it out we're going to run it

you'll see those two sliders have the

same size on either side all right

yeah these guys have the same size these

all right cool so though those are the

uh sliders they have now been positioned

okay the next thing we need to do is um

to our um to our parameters so let's

all right let us connect the parameters

let's go down to um our plugin editor.h

okay uh below where all of our sliders

attachment class which makes it very

easy to connect sliders to the audio

however the name is very long so let's

use a type name alias to help out with

and using ap vts equals that super long

and now we can create an attachment

right now we just need to declare one

attachment for every one of these

all right the next step is to initialize

properly so we go up to our constructor

and we have to initialize all of them

write um they take three parameters so

um peak freak slider attachment

all right it needs the audio processor

value tree state to use we're gonna use

processor abvts the parameter id

peak freak and if we're not quite sure

about that we can go back over here

and double check so we got low cut free

peak freak peak gain peak quality low

so the good thing about this project is

there are not a lot of parameters

um which means we can kind of get away

typing them like this um if our project

parameters in it we would want to

they are named um and use some kind of

with std map or something so that way

um it's impossible to spell them wrong

that sort of thing we can yeah just use

the lookup table and some kind of enum

index into the uh parameters okay

so let's connect this to the proper

slider all right that's one so we need

for all of these guys here okay that was

this one we need to do it for all of

okay once we get to this point

uh all we have to do is just test it and

see that our sliders work as expected

and their value is preserved when

or closing and reopening the app so

right now i'm just gonna do the

okay uh we're just gonna adjust this guy

i'm gonna close it and reopen it

cool that's at the same spot let's do it

in um uh audio plug and host

all right let's run some audio through

reopening the gui where it needs to be

save and click that and reopen it just

all right that was at 12 o'clock and now

db all right so that is working as

cool so we have successfully connected

uh default sliders to their parameters

save and load whenever we open and close

let's make a commit of that connected

all right that's where we added the

attachments here's where we resave

here is where we initialized all those

our next goal is to display the response

so to do that we need to give the editor

its own instance of the mono chain

and to do that we need to make all of

the stuff that makes the mono chain

public so we will move all of those type

out of the audio processor and also make

the chain positions enum public

so head on over to public to a plugin

we're gonna grab all this stuff we're

put it uh below your chain settings and

edom chain positions copy this guy

and put that here oh now we're gonna

have some duplicate definitions so let's

and we need to give ourselves an

instance of this we can put that right

all right let's just give her a little

make sure it's cool all right cool build

let's make a little commit of that gave

its own mono chain stage stage

now we're going to start drawing the uh

we're gonna go to the paint function and

that's this guy right here now the first

is fill it with black so get rid of this

actually i'm gonna we're gonna use the

so now we don't have to type juice colon

black all right we're gonna fill it with

um black background all right let's get

first we need the area that we will draw

auto bounds equals get local bounds

and our response area was this thing so

and then our width is something that we

equals response area dot get width

next we will need the individual chain

and then we will call the function get

for each filter in the chain so let's

so to use that function we are going to

need the sample rate we can get that

audio processor to use that get

magnitude for frequency function

so this is where we can do audio

and we are going to need a place to

which are returned from that function as

now we are computing one magnitude per

pixel so let's pre-allocate the space

now we just need to iterate through each

pixel and compute the magnitude at that

now magnitude is expressed as gain

units and gain units are multiplicative

unlike decibels which are additive so we

of 1. now we just need to call the

magnitude function for a particular

mapped from pixel space to frequency

and we will use a special helper

called map to log base 10. we're mapping

the normalized pixel number to its

frequency within the human hearing range

that looks like this our value our

oops let me be consistent with how i'm

and our minimum range is 20 and our max

000. all right now we just need to call

the magnitude function with this

uh what's it called get magnitude for

and multiply the results with our

okay so we just need to check if a band

because if the band is bypassed we're

not going to do that multiplication

so if mono chain dot is bypassed

all right if it's bypassed ignore it all

right if it's not bypassed then we're

times equals and here's where we do the

coefficients and this is where we're

going to call that get magnitude for

all right our frequency is this thing

and our sample rate is this thing we

just need to do the same thing for every

other filter in the low and high cut

all right so i'm going to do that now

and the thing to remember is that the

low cut if you remember how it's defined

it is defined as a its own processor

chain so we need to get each individual

element of it versus getting it from the

all right so i've got that for the low

cut so i'm just going to do that for all

four of the filters in the low cut

and then do the same thing for the high

all right now we just need to convert

this magnitude into decibels and store

now that we've got our magnitudes we can

uh vector of magnitudes into a path

and we can build this path from the

vector of decibels and then draw it okay

so let's do the first thing let's build

now we need to map our decibel value to

and a helper lambda will do the job we

could also use a free function but

i'm right here so i'm just going to do

it right here let me define some

maximum and minimum positions in the

i'm going to use jmap to map from my

source input which is a range of

and my output is where it's going to map

now i came up with this negative 24 and

the peak control can go from plus 24 to

negative 24. so i want my response curve

the window for it to have a range of

so that's where these figures come from

so let's see output min output max

all right now we can start a new subpass

with the first magnitude start new sub

path we're going to start it at

our response area dot get x this is the

edge of the component and the first

so we're going to run the first value in

through this map function and we're

to screen coordinates now we just need

line twos for every other every other

all right response curve line two and we

response curve uh response area

get x plus i and then we want to do

now let's give ourselves a nice

background border and then draw the path

g.draw rounded rectangle we're going to

it wants a float rectangle corner size

let's use a corner size of four

and a line thickness of one now we can

let's use a white color all right g dot

and now we can draw our path i'm gonna

stroke type of two this is gonna draw a

rounded rectangle with a line thickness

one pixel wide this is gonna draw with a

line thickness of two pixels wide

all right let's run this and let's see

let's open our gui all right cool we

have a nice flat line inside a rounded

rectangle right at the middle

okay now why aren't we seeing anything

this is because these sliders only

update the filter chain in the audio

we also need to make them update the

filter chain in the editor because it's

so let's do that next okay we need to do

that whenever the parameters change

all right oops i'm going to leave that

this opens automatically we get to see

all right so we are going to set up the

to follow the parameters next okay make

plugin editor dot h now the easiest way

to respond to parameter changes is to

all of them so let's do that

we're going to inherit from audio

now it says here important note this

will be called synchronously whenever a

parameter changes and many audio

processors will change their parameters

this means that this this means that not

handler code need to be completely

thread safe it's got to be very

okay what this means is that callbacks

on the audio thread most likely and this

means we cannot do any gui stuff

in any of these callbacks like update

the editor's filter chain here

and trigger a repaint but what we can do

is set an atomic flag that the timer can

and update based on that flag so that's

so first things first let's copy these

callbacks all right let's go back to our

all right we'll put them right here

they're no longer virtual because we are

let's mark this as override all right

add um let's add our timer we're going

to inherit from that so that way we can

do the atomic flag thing i'm talking

juice timer now we need to include the

callback we go to timer we can see the

virtual void and it's pure virtual so we

let's see all right so in this timer

callback we are going to query an atomic

to decide if the chain needs updating

needs to be repainted so let's add that

right here below our processor

changed it's a good name for it give it

all right now we don't care about um if

so we can just give that an empty

implementation the callback parameter

is this one right here all right now

callbacks all right below our um

we're going to do this below our resized

editor.cpp so first things first let's

let's set up that parameter value

parameter value changed and the only

next we are going to just check if it's

in the timer callback if parameters

changed dot and then here is where we

true and if it is we want to set it back

um we don't want to you know just like

always be doing this because if we don't

make any changes to the parameter we

don't need to refresh the curve

okay we're going to call that guy we

if it is if our parameters changed is

true then we want it to be set to

false okay now if the parameters changed

we need to update the mono chain

from the ap vts we need to signal a

and yeah we need to signal a repaint so

unfortunately all the stuff that updates

the mono chain from the ap vts

is private in the audio processor so we

first before we can do this and then

do this all right so let's do that next

now all of these uh where are those

okay yes all right all of these update

need to be made into free functions so

those member variables need to become

so we're going to start with the

function that updates the peak filter

all right so what we will actually do is

um we're going to start by turning the

into a free function and then that way

peak guy can uh be turned into producing

we can change it to produce a peak

so let's grab these guys we're going to

copy these we're going to move these

up to the top here and put it below your

and we can get rid of that static

keyword and now we can make a

uh function that returns coefficients

and it makes a peak filter from chain

all right let's go over to our plugin

we're going to go to our update peak

all right and this is where we're going

to implement that free function because

just convenient to put it right there

coefficients make peak filter

and this is where we want our chain

settings and our sample rate

okay so all we need to do is just return

and instead of doing get sample rate we

sample rate like that okay now we need

use that helper function here oh and

we need to change this as well we can

all right so we just need to call this

here all right let's comment this out

and call it auto peak coefficient

equals make peak filter chain settings

get sample rate and let's do a quick

test to make sure that everything

all right we're going to make sure the

let me open up the high pass

i hear some sleeping let's do a boost

all right cool all right next we will

uh this function let's clean this up uh

since this is kind of getting into you

that sort of thing let's get rid of that

we will say refactored how peak uh

peak coefficient generation all right

okay we migrated this stuff up to there

and made this uh make peak filter helper

yes uh then we implemented that stuff

then here we implemented from uh

parameter listener and timer and added

necessary callbacks and the atomic flag

and then here is where we uh displayed

response curve oh that i forgot to

commit that stuff so let's do that first

all right because we want that step

separated let's see here is where we

let's add it let's do that first

response curve that's going to be this

that's all that is that's all that is we

definitely want to separate that stuff

because that was a big chunk of code

okay so i was saying this is where we um

yeah what did we do we refactored how

uh how peak coefficients how peak

coefficients are generated refactored

how peak coefficients are generated

all right and this is where we also did

that part as well and then here is where

set up for uh responding to parameter

changes in the editor okay this is where

we inherited from those things this is

where we implemented the callback and

the atomic flag that we will be checking

and here is where we um updated that

all right make your way over to the

dot cpp um specifically the constructor

yes how can i can i help you okay

now that we can update any peak filter

link with the chain settings we need to

the parameters actually change so let's

grab all the parameters from the audio

processor and add our cells as a

all right and now let's just loop

through them uh this function returns

an array of pointers now if we register

as a listener we need to deregister as a

we'll do this same chunk of code here

this okay so let's go to our timer

now that we are listening to our

if the parameter changed we need to

update the mono chain so let's do that

let's grab the chain settings let's make

new coefficients and then let's update

chain settings let's make our

for the peak band all right our chain

and our sample rate and now we can

chain's coefficients our old ones are

and then our replacements are going to

all right and now we just repaint

oh i forgot to call uh coefficients

that's what we needed there we go

all right let's give that a test see if

all right so if i adjust this are we

all right soon enough okay we'll get

we can add a debug statement ram's

and we should see something down here if

and we are not okay that is because

that is because we did not start our

okay so we need to go up to our

constructor and start our timer

all right let's do a 60 hertz refresh

rate i knew there was something i was

okay let's try this now this should work

perfectly all right so i'm just going to

all right so now we need to get the cut

filters uh the cut filter functions

usable by the editor so head on over to

and we need to jump down to all of these

okay we need to make all of these public

grab the grab these template functions

all right and we're just going to cut

we can put them after our uh make peak

uh let's do a little build just to make

sure that um we don't have to change

all right those so those could have been

public from they could have been free

so now we just need to add two helper

for producing the coefficients all right

we're going to basically do the same

thing we did this with this make peak

and we're going to be able to call them

so we can put them right here if we want

to implement these functions in header

in two places such as the uh plugin

and plugineditor.h if we want to do that

we need to use the inline keyword

otherwise the compiler will produce a

definition for this function

everywhere that this header file is

included and the linker will not know

compiled cpp file to use for the

so that's why we're going to write

inline auto i'm not sure what type to

what's being returned make low cut

we need our chain settings again we need

and then we're going to use our filter

i can just go copy this from the plug-in

that's uh this thing right here let's

low cut so i need this thing and here's

all right let's just do a quick build on

that make sure that we're not getting an

cool all right let's do the same thing

go back to plug-in processor i'm going

update high cut filter is going to copy

oops this is what we want that goes here

this is just our parameter sample rate

all right and we need a return like that

format that properly and do a little

build make sure we don't have an error

okay cool now we just need to update our

head on over to the update low cut

and let's change this to make low

chain settings get sample rate

same thing for the high cut we're just

going to do make high cut get sample

all right let's do a quick test before

all right this should still work

okay rolling off all the bottom as

for this one rolling off all the top end

perfect let's make a commit of that

because it's good to good to have it

okay this is where we connected our

got the display updating all right

uh let's see this is refactored how

cut filters are created that's what

get rid of that code same thing happened

and now this is where we um updated

let's see this is where the um gui

cool all right we've tested our editor

now let's update the response curve all

right so go to your plugin editor dot

and we're going to do uh the same

coefficient update that we did here

equals make low cut filter chain

sample rate um let's cache that sample

i'm feeling a little lazy i'm just going

to copy that this can all be refactored

so we don't dry so we don't repeat

ourselves we always want to not repeat

dry don't repeat yourself okay here we

make high cut filter chain settings

copy that thing right there all right

now we can update our cut filter

our chain is going to be the mono chain

low cut coefficients are going to be the

and our slope is going to be the chain

and then our update our cut filter we

high cut mono chain.get we want the high

cut position we want the high cut

and with the high cut slope okay let's

all right so i'm going to adjust this

okay we are drawing outside of our

we are drawing though that's cool so the

response area should be its own

components cannot draw outside of their

balance unless you set a flag that

we will do that next but this is a good

sign that our display is responding to

controls and that what we are hearing

sounds like what we are seeing or the

other said the other way what we are

sounds like what we are hearing okay

cool all right let's commit that

migrating this code from the editor to a

is relatively easy we need to inherit

from the things the editor is inheriting

and yeah we're really not writing any

really we're just refactoring what we

header file first of all let's go up

basically inherit from all this stuff so

let's do that first let's do struct

uh response curve let me spell it right

component and then we need to inherit

okay we're gonna need the same uh

basically the same constructor

and we're gonna need to migrate over all

of those callbacks let's just copy these

all right we're not going to need this

comment let's go to our cpp file

now our callback migration we're going

to need our parameter changed in our

so i'm just going to copy these two guys

directly move them up to the top

put them up here and just change this to

curve component same for that we get a

it's fine we'll fix those in just a

second and we need to migrate over the

that registered as a listener so let's

here let's give ourselves uh let's see

initialize we need to provide ourselves

same the same thing okay now we can

audio processor all right now

we need to migrate over the code that

okay so let's do that next where was

that was all of this stuff right here

it's name for the timer we need that too

we need the destructor we need that code

all right so let's copy this okay we're

going to need a paint function

so let's declare one of those void paint

we can just migrate over the entire

paint function from the plugin editor

so we can literally just rename this

i'm not going to do that though i'm

going to copy it and do the proper thing

but literally we can just literally copy

this whole thing and put it down here

we'll fix all those variables in just a

all those error messages number eight we

need to migrate over the parameter

value so let's grab this from here

that should go here we also need to

now once we've done these things we need

give ourselves an instance so let's do

i'm just going to put that here response

component and then we can also get rid

we can also get rid of our atomic in our

plugin editor.cpp we need to go down to

as one of our components all right now

editor constructor pretty sure it's

going to tell me that it needs to be

the other response curve component audio

yes this needs to be initialized before

for all the attachments finally we need

to give it some bounds so let's go to

our plug-in editor resized function

and now we can actually use our response

cool all right so let's go to our plugin

all right this is not going to inherit

from uh parameter listener or timer

so we don't need any of these callbacks

um we don't need this atomic we don't

uh the chain so that means we can get

uh get rid of those functions as well

all right so let's go to our plugin

uh we are no longer listening for those

so those go away same for the destructor

and then we're not doing any of this so

filling it entirely with black so we can

all of this stuff and then we don't need

all right and i believe that's most of

the errors let's build it and see what

that may have been it all right yep okay

so let's run and test it all right so

this is tiny for some reason that's way

let's go to our resized function uh

bounds dot get height oh you know why

it's because um our response area here

in this um our response area should not

33 of the actual component it should

just be the get local bounce so i'm just

do that and then get rid of this line

all right now if we run it we should be

okay cool so let's check if we are

drawing outside of our bounds anymore

and no we are not so that's fantastic

i told you that would be easy okay let's

oh created response curve component

that's a fairly uh fairly aggressive

amount of code surgery here's our

response curve component with all the

here's where we gutted the editor

same for right here all right we've come

a long way we've done a lot of stuff

okay we are going to customize the

for this slider class i want it to show

the following okay i want to see the min

and max range at either end of the

slider and i want to see the parameters

value in the center of the slider

i want the slider to have some

customized visuals outside of those

so i'm going to change this slider class

let me go to my editor first i'm going

slider class right here to have a custom

look and feel that will do those things

so a bit of planning before we actually

and the juice look and feel system works

here we go all right look and feel

methods for these slider clasps

now the look and feel system works as

okay inside the component paint function

let me go to slider or paint

all right here's what happens in the

when you're painting your components now

things are a little bit different with

the general practice works like this in

your components paint function

you're going to call get look and feel

inside of that you're going to call

one of the look and feel member

functions sorry in the look and feel

there are several member functions for

drawing different things and it's the

way it's organized is kind of strange

basically like we're in the slider class

the slider has look and feel methods

there's a look and feel bass class which

narratives from all these things i can

pull it up in the docs and you'll see

what i'm talking about if we go over

okay so you can see the look and feel

class inherits from all of these

different base classes you know button

text editor has their own tree view

so what happens is the components they

instance and then they call one of these

so let me go to the slider.cpp and show

in the sliders case it uses a pimple to

deal with the implementation so i'm

that so we can see what's going on okay

as shown here it's using a look and feel

one of those look and feel member

i'll go back to this so we can see what

i'm talking about uh slider look and

okay here we go draw a linear slider the

if it's like a slider that's got

multiple thumbs and stuff on it if it's

where to draw the text box what kind of

display that sort of thing okay so it's

member functions and then inside this

member function is where all that stuff

okay so for example the vertical slider

is going to call get look and feel in

the paint function if i go back here

all right here's the get look and feel

it's going to pass it to the pimples

all right and then that's going to call

okay on that returned object okay now

the idea is that anything you want to

slider part of the component is drawn

with that look and feel member function

everything that is drawn outside of it

is drawn in the component's paint

okay regardless of that i don't want to

details as i said everything that is

the slider area is going to be drawn

in um it's going to be drawn in the

paint function everything that's part of

the slider is going to be drawn in the

get look and feel draw rotary slider

now i want the parameter value to be

displayed in the center of the slider

so for this reason i am going to display

that in the look and feel member

function since i consider it to be part

okay i'm going to draw the min and max

parameters in the paint function

and call that look and feel member

function from the paint function

okay i know i need a bit of room for the

text labels showing the range to be

so that means the actual area that the

slider will be drawn in needs to be

than the component itself i'm also going

to want to use a uniform text height for

displayed here so i'm going to need a

function that's going to give me that as

okay now the reason for this is because

my paint function and the look and feel

will need to call this get text type

function since i'm going to be drawing

in both places and i want it to just

okay i also want to customize the suffix

that is displayed for each parameter

so this way i will see things like 2.85

kilohertz or 12 db per octave

all right we will figure out what to do

for the quality parameter when we get to

since that doesn't have any units at all

okay and then finally i'm going to need

i'm going to need a parameter so that

way i can get its value so let's go back

all right so we're going to just this

class is going to have a lot of surgery

first let's rename this class and we're

rotary slider with labels okay

so the next thing we need is we need to

give ourselves a parameter and a suffix

so juice ranged audio parameter

we're gonna do pointer to it the only

the reason i'm using this thing

is because this this is the base class

for all of these um all of these guys

even though and it derives from audio

processor parameter and it contains a

whole bunch of member functions that

let me pull information out of this if i

there's like let's see they're like i'm

going to need these convert to

zero to one and convert from zero to one

that sort of thing and then there's a

whole bunch of like you know get value

that it comes from the base class okay

getting a little sidetracked some

let's not get too lost in the minutia

about that and just focus on following

the code that is going to be written

all right so there's my parameter i'm

going to give myself a suffix

all right now i'm going to update this

to initialize these two member variables

look and feel class okay we need an

actual look and feel class that we can

provide our um draw rotary slider

function all right if we jump back over

um jump back over to this thing this is

go to that slider class here's the look

so we want to implement a rotary slider

function okay so that's what we need to

provide here let's make a look and feel

all right these inherit from uh there's

a few different versions we're going to

inherit from the most recent one

look and feel the version four and

then this is where we are going to

so let's go to the slider class and

look for that look and feel methods

and we're gonna draw that uh rotary

slider so just copy this guy

declare it here override it and give

ourselves a default implementation for

and then make this um we gotta have that

cool all right we have our look and feel

or our look and feel class we need to

and then we can set that as our look and

all right now if we are setting a look

and feel we have to remember to

now as i said we're going to need a

paint function because we're going to

i had said we're going to need the

slider bounds which is going to be

what we're actually going to it's going

to be slightly smaller than the

component bounds itself so we need

some function that can provide that

rectangle we're going to need that text

so um that's just going to be an integer

and then we're going gonna need to get

okay that's what that's what's gonna

um you know decibels if we're doing the

did all of these change if we go down to

our plugin editor.h go way down here

all of these rotary slider with labels

all right now we need to initialize all

of these guys so go to plugineditor.cpp

and all these are declared before the

response curve so they need to be

initialized before the response curve

okay now if you remember this thing

this thing needs uh what's it called it

and then it also needs the suffix that's

going to get displayed at the end

so let's do the first one so that's

so the wants a parameter so let's

use our ap vts to get a parameter

and we already know the name this is the

peak frequency slider so it's going to

and the suffix is going to be hertz

okay that's one slider we got to do the

oh this one's a reference not a pointer

dereference that okay let's do the rest

and then we need our our units all right

this is decibels quality has no units

okay if we build it we should not have

oh we have an error what's the problem

why did that give us an undefined symbol

oh we're missing a pain function

that's why okay let's go to our plugin

so just we'll just leave it empty for

all right awesome build succeeded okay

we're not going to our sliders are going

to be blank because their look and feel

our pain function is empty okay so

that's why we don't see any sliders

but that's okay because we implemented

the skeleton so we can start drawing

all right let's make a commit of that

visuals all right here's our where we

here's where we did all this code

surgery it doesn't look like we wrote

it's a lot you know it's a fairly big

first thing we are going to do is make

this just a declaration and we will also

draw rotary slider all right now let's

which we need to implement now so let's

let's use one of these to add a space

visual delineation so let's implement

we're going to use that namespace trick

okay we will begin by setting up the

visually have a range of seven o'clock

to five o'clock okay seven o'clock so

we're gonna go seven all the way to five

this is probably backwards for you with

i'm looking at it if i had a clock in

seven o'clock and then this would be

okay seven o'clock will be where the

slider draws the value of zero

five o'clock will be where it draws the

start by setting up some angles that

represent seven o'clock and five o'clock

and remember that twelve o'clock is zero

degrees and we have to use radians here

which is annoying auto start ang

equals degrees to radians thank

thankfully that function exists okay we

all right so this is 12 this is gonna be

and then we're gonna go halfway uh so

it's more like 7 30 not seven

but either way you know like this this

this is six o'clock so 7 30 is

45 degrees away okay that's the start

our end angle is going to be going this

way and because we need it to be bigger

one circle around which is two pi and

uh this same value but going

the other way and then added a um added

draw rotary slider function wants a

passed to it so we will use the sliders

and then even though we haven't

implemented this let's prepare for this

and just assume we'll be drawing the

rotary part of the slider inside the

slider bounce so auto slider bounds

equals get slider bounce okay let's

now all right let's put that right here

i remember this is const oh let's just

make it return local bounds for right

adjust this later so we have some basic

information we can call the look and

and now draw rotary slider and now we

just start filling this in okay first

for the graphic context x is going to be

same for the width same for the height

our slider position proportional

if you don't forget that we said we

needed a normalized value here so we're

map the slider's value we're going to

slider's value from the start of the

to the end of the range and we need to

to 1 all right and then our start angle

we already have that and our end angle

that's an annoying function to look at

and fill in all the blanks if you don't

all right the important thing is this

one this line right here this is where

our sliders this is where we turn our

sliders value into a normalized value

so now that we've done this we can

implement the draw rotary slider

function let's do that up here void

look and feel draw rotary come on

all right let's put that all on its own

all right we'll do the same using j uh

namespace juice trick here's what we're

in this draw rotary slider class we're

and it's going to act as the slider

background we're going to draw a border

and we're going to convert the sliders

angle in radians and that's going to be

between the rotary start angle and the

we're going to create a small vertical

rectangle and then we're going to rotate

in radians and then draw it okay so

before we do anything else we need a

height okay so let's first create some

circles that represent the rotariness

of the slider now for these colors i

and it lets me you know just pick some

you know maybe i like this yellow color

maybe i like this greenish color

or this color right here that's what i

use to pick my colors so i'm just going

and use them here so g dot set color

i don't know what that looks like right

first sketched this project out i liked

after i found it somewhere okay so g dot

and this is where we want fill the

let's do the same thing again with a

different color and we're going to draw

the ellipse which is going to give us

we said we were going to create let's

take a look at that we'll just see some

cool circles let's make a narrow

rectangle that goes from the center of

up to the 12 o'clock position now if we

something that's going to be drawn we

inside of a path so let's create a path

and i like using the rectangle member

rectangles as opposed to using the

that takes an x y width and height

easier to visualize mentally where

okay so i'm gonna do that rectangle

left and the right are gonna be a couple

of the center so we can do r dot set

and then two pixels off of that we can

center dot get x two pixels to the right

and then we'll just make the top be the

top will be the top and the bottom will

be the center okay so r dot set top

this is going to be bounds dot get y

and then r dot set bottom is going to be

center dot get y now let's add it to our

now we get ready to rotate so the first

is that this thing is less than this

thing otherwise we'll get some weird

explosions so let's just add a quick j

rotary start angle it's less than rotary

angle this is what i was saying of how

a full cycle to it because otherwise we

would have 180 minus 45 as our start

or 180 plus 45 which is like 225 or

and then this one would give us like um

less than this it becomes a problem when

so now we need to map our slider's

angle right so we've got autoslider

are we are mapping from our slider

and we're going to map it from i'm sorry

that's one dot f our target major in is

our target range min is going to be the

rotary start angle and our end range is

end angle okay so we are mapping

our normalized slider value to be

these two rotary positions which we

we can rotate the narrow rectangle to

radian angle using an afine transform

and we have to do it around the center

all right so p dot apply transform

a fine transform we're going to rotate

we want the one that allows us to rotate

it around a particular location

we've got our angle in radians and our

center dot get x center dot get y

now we just need to draw it let's build

just remember you know they're not we're

not we're just drawing them within their

okay but it is doing it and the when the

the notch is straight up and down so

cool all right so as i said let's see

this is where it's at the five o'clock

here's where it's at the seven o'clock

awesome okay so they look a little wonky

that next but they are working

okay we've implemented a customized look

the next thing i would like to do is add

showing the parameters value next

okay we'll figure out that bounding

let's make a commit of that added basic

slider visuals here's where we

implementations into declarations

then here's where we implemented our

paint function which calls the rotary

and then here in the rotary sliders

the things okay okay let's start by

drawing the slider bounds and start

slider bounds function until it gives us

usable size okay so let's go to where

we're getting our slider bounds

draw the slider bounds as well as our

g dot set color red and we'll draw our

local bounds and then we'll use a

different color for the slider bounds

now uh before we start tweaking this

let's just shrink this a little bit

okay we're gonna want a square so our

circles so let's do auto size equals

um and we'll find the minimum dimension

of whatever bounding box is returned to

all right so we've got our bounds dot

get width balance don't get height

oh we need to get rid of this line

that's right okay so auto bounds

equals get local bounce so now

we know we're going to display some text

so let's shrink our bounding box by that

let's shrink our size our square size by

minus equals get text height do it

times two all right now we just need to

towards the top of our component we need

slider bounds towards the top so let's

our size but the top of it is it's so

that it's positioned at the top of our

r dot set size give it a size of

give it a width and height of size so

and then we need to set um i don't know

x and y to give it for the actual

position because that's based on the

upper left corner but i can specify

where the center is and that's not going

so i'm going to do that r dot set center

i know i want that to be bounds dot get

so that's going to put it in the center

it's going to put the center of this

rectangle in the center of my component

and then i can set the y position

set y zero or just below the top i'm not

going to do zero i'm going to do two so

it's two pixels below the top of the

and the sent the center of our rectangle

is going to be in the center of our

now let's just return it let's build and

boom circles at the top slightly below

and they're in a square bounding box

all right let's make a commit of that

circles oh let's get rid of this

um this line right there let's amend

oh wait no i don't want to amend it

there we go okay let's display the

next we will keep the circles for right

look and feel we're gonna keep these

uh but for now we need uh the text

height from our slider as well as the

so we already had some stubs for these

when we decided we were to do

get text height and then get display

string right because we wanted to be

able to figure out you know what do we

so in order for us to call that we need

get a rotary slider with labels out of

so to do that we are going to have to

okay so after we get our um after we

we'll do a cast all right if we can cast

it then we know we can call those

functions all right so this is where we

do this put that there we're going to

need our same path and our same

all right and then actually since our

text is going to be in the center we

need to adjust the bottom of our narrow

not cover it up so it's going to be

yeah the bottom it's no longer going to

be the center it's going to be the

uh sorry it's not gonna going to be the

bounding box oh yes sorry it's going to

be um it's going to be where our center

is and then we're going to subtract the

which will put us back towards the top

get height is the bottom okay so we're

and we're going to go uh up by

some text height amount okay so we'll

we'll have to see how it looks okay all

right so this is where i'm gonna change

this from being a regular rectangle

i'm gonna add a rounded rectangle p dot

you know let's dial it up a little bit

our let's do a corner size of two

all right now this is where we do all of

so now let's make a now let's make a

little rectangle that's a little bit

and a little bit taller than our text is

have a nice we know how roughly how much

we're going to need to display so let's

make a bounding box that fits around it

and then we're going to put that right

slider okay so let's first get let's

set our font accordingly and we're going

to just use that text height as the font

it's going to keep displaying whatever

default font is currently being used

get text height all right this is going

this is going to use the default font at

all right now let's get our text and

then let's get our string width

equals g dot get current font

okay that tells us how wide we are all

same rectangle so r dot set size

we're going to go str width a little bit

and then the font height our swl

get text height oops get text height

a little bit taller than that okay so

rectangle r is now has this bound it's

it's gonna basically be a little bit

the bounding box for our text okay we

need to just set the center of it to be

the center of our bounds right here

that's this guy right here or if we

don't trust that we can always write

all right and then let's just make a

black background for right now

and then uh we're gonna fill it in uh g

let's use white text and just paint our

so g dot set color colors white

our text inside of r and r is a float

get it to um an int to let's see what do

good enough and then we want it centered

now it's not going to build because we

haven't implemented yet display string

okay so we need to implement that next

all right let's put this near where um

build our slider bounds all right so

rotary slider get display string

this was const if you remember and we

string and we're just going to return

let's build and test we should see a

rectangle in all black with white text

in the center of every slider

showing some numeric value okay cool

it's working as expected all right this

three these are the indexes in that

of choices we created at the very

alright and here's our here's our gain

for our slider okay cool so we are not

seeing suffixes but we are seeing our

values okay the only thing we're not

seeing is the proper slope okay we

we will deal with that next let's make a

cool okay we are trying to represent

two parameter types a float param and a

and the choice param has a list that we

directly if our parameter is a choice

then let's just use that choice param so

and we can do if auto choice param

equals dynamic cast um let's see

if we can convert our ranged audio

parameter to an audio parameter choice

then just return that choice param get

uh what's it called get current choice

parameters we need to amend our suffix

also i want to truncate the hertz value

if the frequency is over 1000 so that it

instead so first we need a string object

and if we and then we need to specify if

we're going to add uh the k or not

so let's assume we are not going to okay

now i don't like to make guesses about

what type of derived class my parameter

so i'm going to use a cast here to check

if it's actually an audio parameter

now i know i haven't added any other

types in this project but just in case

i'm going to add a little j assert

in case one happens to sneak in later in

if you recall the values that our

you know that the hertz parameter is the

only one that can possibly get over

1000 so that means we can just check if

over that and then divide by a thousand

once we have that then we can say yes

k to the suffix and we can convey that

with that boolean flag we used earlier

so if value uh first we need to get our

float value equals getvalue if

our value is greater than um if our

then um this is when we want to display

it as kilohertz so we will say

divided by a thousand so if it's

um if the value is one thousand hertz

true okay now the string class

in juice has a constructor which lets

a floating point number into a string

and one of the parameters is how many

now if i'm displaying a value as

two decimal places we already know that

one thousand and one divided by a

thousand is going to give us

let's see one thousand one thousand one

will give us one point zero zero i don't

want to see that okay i just want to see

so according to this constructor let me

this one right here float value okay

it says number of decimal places if this

the number will be formatted using that

adding trailing zeros if required if the

the number will be formatted using the c

standard library default format which

uses scientific notation for large and

numbers according to the documentation

if you go back over here according to

the documentation for this constructor

if a 0 is provided for the number of

the number will be formatted uh using

the stl with however many decimal places

are needed so this will work out when we

decibels or quality versus the hertz

okay so we're going to do str equals

um where is that one it's down here

this one float okay our float val

for our number of decimal places if we

we want to see two decimal places

stl formatting is will be just fine

so add add k for adding the k give me

give me however many are actually needed

to display the parameters value

all right now the final thing is that we

had said that the quality property

does not have any units which means we

did not supply a suffix if you go back

here you'll see what i'm talking about

hertz and decibels have a suffix but

quality does not have a suffix

let's add a space after the number and

we can do str um add the space

and then um if we are doing a hertz

value which is over one kilohertz let's

add that little k like that now we just

add the suffix and then we're done

let's run that and check it out

boom 121hz and let's raise that to be

awesome okay and then these guys

cool all right i'm not too mad about

when it's showing a negative and

it's not showing it the rectangle is

changing size it's you know

that's just like a minor detail that we

don't need to fix and now this is

the correct slope values so that's cool

all right let's ditch those bounding

boxes that we're showing the rectangles

it's these guys right here i'm gonna

leave them in as comments though

um because you know if we ever need to

good to just you know it makes it easy

to uncomment them and display them later

let's take a look one more time and see

what we've got all right that's nice and

cool let's make a commit of that

alright so implemented implemented

displaying the parameter value

cool let's add the labels next that will

show the minimum and maximum values that

i would like the minimum value to be

drawn right outside of that

seven o'clock position on the slider and

to be drawn outside of the five o'clock

position here is how i have decided to

okay we're going to have a simple data

structure which will hold a normalized

and the string that should be positioned

okay so we'll put that let's see let me

all right we're going to put that right

label position give it that normalized

and then the string that's going to get

all right now that we have this

structure we can just give ourselves an

and then all we have to do is add some

values to that array and then draw them

in our paint function all right let's

paint function okay we're going to draw

so let's see what we need to do is

create a bounding box that can

encompass our text and then put the

center of that bounding box at whatever

normalized position we decided

we have decided on around our sliders

once we have that bounding box we can

just use the graphics function

draw fitted text like we did right here

we can do the same thing to we can do

that to draw our label inside the

so first things first let's get the

our slider bounce auto center

equals slider bounds dot to float

dot get center okay we want this in

floating point numbers and then let's

auto radius equals slider bounds

dot get width and then give me half of

okay now let's set up the text color and

i'm going to use the same text color uh

no i'm gonna use a different text color

i'm gonna use like a greenish looking

again i figured this out using that

color meter app this thing right here i

found a nice green that i liked

and just jotted down the rgb values

g dot set color i've got a value of zero

172 right here for that and then

one for the blue and then we need to set

okay we're going to use the default font

we need to iterate through our labels so

equals zero i is less than num choices

plus i all right now let's convert that

normalized position into a radian

labels okay and we want to make sure

that it's between zero and one just in

all right now let's j-map it like we j

this thing right here actually we can

auto angle equals this thing and this is

position and our start ang is going to

um what we set up here same for the

end okay now we can use one of the

point class member functions uh

i'll show you the member function get

point on circumference we can use this

to find the center point we will use for

this particular radian angle we have our

so center dot get point on circumference

yeah we want it to be a little bit

rectangle so we'll do like half

the um text height maybe a little bit of

and then our angle is gonna be like that

so if you're wondering where this

number came from let me turn this back

draw this okay so i'm talking about

here's our center of um that bounding

if if i go if i go radius away from this

angle i'm gonna end up like right at

this point right here so that's why i'm

because text height is this amount so i

away that's going to kind of put me near

it's going to be different you know it's

not going to be it's going to be like

vertical distance away from this angle

that's why that's going to do that

that's what this line of code does it's

auto c equals that okay we have our

now we can get the width of our string

from the currently used font like we did

up here i'm going to do that same same

and then we're going to make a rectangle

width as well as our text height to

define its bounce so let's do

rectangle float r um we need our label

uh do we need that yet yes we need our

label because we need to do r

dot set size so auto str equals

labels label okay and then we can do r

now we will use the size using that get

string width helper function like we

uh this is going to be g dot get current

string width str and then our height is

text height now we can just set our

and then um maybe shift it down a little

just in case so it doesn't collide r dot

okay we'll get the current y as it is r

and we'll just add a little bit um you

know just shift it down just a little

okay and then now we can just draw our

fitted text and hopefully this will be

our text is going to be our string area

r is a float rectangle type so we want

get the nearest end we need to convert

we'll do the same centered and

one line try to fit all the text on one

we are drawing where we've got the

right here we're going to go at some

like this and then this would put us

right on the edge of the circle and we

don't want our rectangle to be centered

on the edge of that circle we want it to

a little bit further out and then down a

little bit so that way it doesn't

okay so this uh this gets it right on

this gets it a little bit past the

shifts it down from the circle all right

okay why is this not displaying anything

oh because we didn't initialize it

duh we need to actually provide some

labels first so let's do that next

36 step number 36 so we need to go to

let's go to our constructor in our um

where is this this is in our plug-in

plug-in editor okay so we will do this

before we make our components visible

let's add um our min and max ranges so

we'll start with the peak freq

peak freak slider okay and this is where

we'll just add one of these label

at position zero i want to display 20

hertz and then at position 1.0 we will

and then we'll do khc like that let's

see if that looks like anything

okay cool 20 hertz 20 kilohertz nice

all right let's make a commit of that

all right let's do the rest of them we

um let's see negative 24 db and plus 24.

okay cool so my gain slider uh whoops i

okay so my gain slider is going to show

my quality will show 0.1 and 10.0

and then low cut and high cut are going

to show 20 hertz and 20 kilohertz

and then the um slope sliders are going

12 and 48 and i don't think there i

don't see a need to make it display the

decibels per octave thing um anyway

okay oh let's get rid of these bounding

boxes where was that that's up here

that's right here they're handy to have

um handy to be able to just pop them in

there to help debug your visuals

okay cool that's looking pretty clean

all right let's adjust these positions a

adjust these positions a little bit i'm

going to make the display a little bit

and then and i'm going to do that

okay it's a little it's a little bit

so i'm going to make this just a little

and then we're going to use juice live

change the height of the response

area okay so get a little look at how

so we'll do float h ratio height ratio

i'm going to use juice live constant

we're currently using 33 okay

so now we can do this here and we're

our height ratio to figure out what size

okay cool so now we are looking at

all right okay i'm doing that because

when this goes like that it covers up

so if i shrink this a little bit does

all right that seems okay i need the

text to not overlap but it's doing it

perhaps i need to shrink this length so

or maybe it's not a thing either way 25

percent looks good the knobs are a

i mean if we wanted to we could just

make this like really big but that just

looks kind of weird and we don't even

so that's the big problem is i want to

see more of the slider's thumb

than i'm currently seeing right now

if that's like that i want to make this

i want to see more of the thumb okay so

makes it's pretty easy to see where the

so we'll stick with that we'll do 25 for

okay so we'll change this to 25.f

divided by 100.f and we'll just comment

out because it's always you know it's

always useful to be able to uncomment

that and use it to dial in those other

okay now i think if we take a look at

there's one other graphic change i want

now i don't like this gap right here so

i want to put a little bit of room

between where the sliders are

and where this component where this

response curve component ends

so we can do that by just removing a

this bounce before we do all of this

that's pretty easy bounce dot remove

i'm gonna just remove five pixels

let's see what that looks like okay

yeah that's clean i'm happy with that

so let's open this up now i'm gonna

i'm just gonna customize this a little

close this okay so these parameters are

drawn on here right away okay so that's

so let's uh let's open this back up

let's see if we can solve that okay so

let's go look at our um timer callback

code response curve command okay the

determines that this parameter is true

and this parameter is only set to true

whenever the parameter values change so

have the parameters changed from the

since they were initially loaded no they

okay so there's a couple ways we can do

to do this would be to say you know what

has changed the first time the gui loads

kind of hacky okay what we need to do is

that stuff gets set in the first place

make an update chain function

and now we can just call this in our

and from our constructor all right so

this is going to update the chain during

construction which means the chain will

give us the proper magnitude values

when we paint it for the very first time

so let's do that let's add a uh

let's put that right here okay we're

just going to move that code out of

void response curve component update

chain we can just grab all this stuff

we're not going to repaint though okay

now we're just going to call it

update chain and then we can call it in

let's call it before we do our timer

all right let's run it and we should see

uh the chain get updated automatically

whenever we close and reopen the gui

okay so that's showing up is correct i'm

going to change this param to that

okay that's on 90b so notice there's a

bump right there i'm going to close this

reopen it and that bump is there cool

bug solved all right let's make a commit

what do we have going on here uh fixed

we have our um this is where we started

star values and then this is where we

those labels here's where we dialed in

the um the final position for all the

components and then here's where we

fixed the response curve issue by

refactoring what happens in timer

callback into its own function

that we can call from our constructor

okay cool that wraps up the

response curve and customizing the knob

visuals okay the next thing to do is to

behind the response curve and then after

spectrum analyzer and then after we do

that we can add the bypass buttons

okay so we got three big things to do

before we are done with this component

almost done with this project so

awesome it's progressing very quickly

okay let's give this response curve a

that's going to show the frequency plot

and since we don't need to recreate this

every time the curve is updated we are

pre-render it into an image so let's

head over to our plugin editor.h

and we will do that right here

now we need a place to make this

and the resized function is a good place

it is called whenever the component

bounds change and it is called before

the first time that paint is called

so let's declare that guy here all right

let's put this after our paint function

the first thing we will do in this

is make a new background image based on

component okay so first let's declare

uh response curve component resized

so okay we're going to create a new

background image then we will create a

which we'll draw into this background

image and then from there we can just do

except we are drawing into this

directly using the graphics context that

we'll start with that okay we're going

an rgb pixel format the width and the

height for the dimensions and then we

all right now we just need the graphics

now i want to draw frequency lines

so i'm going to create an array that i

can loop through and convert these

frequencies to window space and then

vertical lines and these values that i'm

using for the frequencies are the

standard values people use when

producing these types of plots

yeah i mean you can come up with

whatever you want but these are the

um values that people use and they're in

uh are they um they um they scale up

by a factor of 10 each time so let's do

so i'm going to do 20 30 40 50

100. i'm gonna multiply that uh by

since that's the top of the human

all right now i'm going to uh set my

color to white i'm going to loop through

map them from i'm going to map them from

space to a normalized position and then

i'm going to draw a vertical line

all right let's take a look at that uh

we need to display it in pain but before

show some gain lines as well so i'm

i'm going to create an array i'm going

to loop through it and i'm going to draw

i'm going to convert each value in the

a window position and then draw it as a

i'm going to do i'm going to do lines

okay so remember i'm using 24

and negative 24 as my range because

slider can um our gain slider can

those are the ranges of that gain slider

and then it's important to remember that

of the window at the bottom we want this

negative 24 to be mapped to the bottom

and then we want the positive 24 to be

mapped to the top of our component

and then we're just drawing a horizontal

to the right side all right now we just

need to go to our paint function

g dot draw image image to draw as

it wants a float rectangle so get local

to float all right let's take a look

all right cool it looks like something

um so for this graphic stuff we're going

to switch to the standalone plugin

so that way um we don't need to deal

with audio plug and host at the moment

looking at graphics changes let's look

okay so the first problem is that

there's a lot of collision happening

like our plus 24 line and our negative

uh we don't even see them so we need to

shrink the bounding box that we are

to compute these values within which

means we also need to adjust how our

is going to get produced so let's go to

and then below this let's add a function

that will give us the area we will draw

our background grid in and also our

i'm going to call mine get render area

now go to our plugin editor.cpp and

let's go to the bot um go to the bottom

all right so let's use some juice live

bounding box of this all we know is that

we are going to reduce our local

not by how much so this will be a good

we're going to use the reduce function

start with five i'm going to reduce both

and the y and it's important to make

sure you put juice live constant on its

okay for right now we're going to stop

as well as the horizontal lines

and we're just going to draw the render

okay so let's run this and let's dial in

let's move this out of the way okay so

we shrink it we shrink the width

and then if we do this one we shrink the

height okay so let's figure out what

i know i'm going to want to have some

and on this side showing like the actual

like you know 0 db plus 24 and minus 24

and then whatever i'm going to come up

with here and then we need our

uh to get displayed either above or

somewhere so let's dial this in

all right and i like shrinking it by 10

i think this is a good width and then

height wise i don't think i need that

i'm going to go with 8. so 10

for the width reduction and then 8 for

so let me just make that change here 10

put this on its own line for right now

okay i'm happy with that so let's make

this rectangle now all right let's go to

now all we have to do is change this

response area is going to be get

render area auto response area equals

render area talk about easy i am glad we

planned ahead on that by using this

response area to represent what we are

okay cool so this is being drawn inside

we're getting a little bit of the path

being drawn outside of it because

is smaller than our component and this

you know the entire component so we'll

figure that out in a little bit but

this is cool all right we're making

now i'm going to change this from being

being reduced mainly on the top and the

sides we want to leave room for the

and the db levels on the sides but for

the bottom i don't really care about

uh we're going to get rid of that we're

going to do bounce dot remove from top

we're going to give us a gap of 12 at

from the bottom we're just going to do a

little gap maybe something like that and

um my i think we need more than 10

so we'll do 20 pounds.remove from left

20 and then bounce.remove from right

20. all right let's take a look at that

okay cool so we've got two pixels of

we got our 20 here this is plenty of

and then same for on the top we can put

um yeah like use a font that's not very

okay so let's go um let's separate the

render area from the actual analysis

so let's add another function here

and it's going to be called get analysis

area and that's actually going to be

what we draw the response curve within

when we see our you'll have to just

imagine the grid lines for right now

but just imagine that like we're not

going to have the plus 24 be underneath

this like right at this orange line it's

going to be slightly less than it

and same for the bottom our negative 24

is not going to be on this orange line

it's going to be slightly above it

so that's what i mean when i say our

analysis area is going to be a little

all right so let's implement this back

to our cpp file put this right here

all right we're going to start with our

and then we're going to trim some off

the top and trim off the bottom

so that way we can see the um the top

um grid as i had explained as i had

explained a moment ago balance dot

remove from top a gap of four should be

bounce down remove from bottom same size

all right now let's use this instead of

response area uh not get local bounds

or not get render area let's use get

all right so let's take a look at that

okay all right so we're still we're

seeing our orange rectangle in the wrong

uh wrong spot so let's take care of that

um that's at the bottom that's this guy

right here so instead of using the

response area we want to use the render

and let's draw our analysis area

right yes let's display our analysis

so we have an idea of where this

all right cool so yes um it's slightly

slightly set inside our um orange

okay so let's see let's go up to our

we want to be drawing inside of this

analysis area instead of the local bound

some information about this analysis

area let's do this right here we'll go

area equals get analysis area and now

okay because we need the left and the

right for our horizontal lines we need

the top and the bottom for our vertical

um and then we also need the width for

uh is it this thing um well either way

all right let's just start caching them

since the frequency labels as well as

the vertical lines we'll need this

x position let's just um cache this

all right so we're going to use the same

mapping code where we convert our

frequency value to a a normalized

and then just compute that to a

a window x position um based off of this

all right now we can actually draw our

vertical lines let's get rid of this

i'm going to use uh i'm not going to use

white i'm going to use dim gray for this

so instead of looping through our

let's loop through our x positions

and we don't need this line anymore

instead we need uh this right here

we're going to draw x and from the top

all right now let's go to our gain and

instead of using our get height and zero

uh i want to make the zero db line

um have the same color as our min and

max slider labels and everything else is

going to be grace that will be

it'll you know we'll be able to visually

so we will do g dot set color

if it's zero then we're gonna use that

one color otherwise we're gonna use um a

it could you know dark gray is cool all

right let's go find that green color

where is that order slider paint uh this

and this should probably be standardized

static color at some point you know

define it at the top of the header file

but for right now this is good enough

all right so we're going to use that

all right and we don't need this border

anymore so let's run it and take a look

oh i forgot to uh draw the line so g dot

so we should see a green line in the

okay so the next thing to do is to draw

let's make a little commit of what we've

right we basically roughed out the grid

so uh let's see we actually um we added

grid lines we also um pre-rendered

cool okay so frequency labels let's draw

get rid of that line we'll do a clean up

at the end okay so i want to draw these

so that way they pop out a little bit so

we want to use a font height of 10. if

um our render area we gave ourselves a

12 between the top of our component and

is so i'm going to draw inside that

gap so that's why i'm going to use a

if i need to tweak that i can tweak it

what we will do is loop through our

frequencies and x's and draw the text

above the grid at those particular

now i'm gonna use the same trick um that

uh labels uh for the min and the max

use that same trick right here

all right then we can just assemble our

all right and we're gonna do the same

trick that we used with the string width

and building a rectangle around it

very simple stuff we've got a rectangle

we're going to give it a particular size

i know where i want the center x but not

and that's okay because i can set the y

the x position all right all we need to

all right let's run it and take a look

all right cool uh we got some collision

that's okay though figure that out next

all right so it looks like the 40

and the 30 and the 40 are getting pretty

collide a lot 3k and 4k collide a lot so

and let's try that again ah much

these are much easier to see now that

they're not colliding on each other

cool all right so let's add a commit for

all right let's do the gain labels next

all right let's go to where we are

looping through our gain labels

that right here so we're actually going

all right we're going to loop through

our gain labels the exact same way we're

all right now we need to make a string

with the gain value if it's greater than

if it's and if it's not it's going to be

a negative number so let's do the same

is greater than zero uh add the plus

and then just feed in that gain value

all right let's get the width like we

did before and then we're going to build

just like we did before same thing here

okay now we're going to draw these on

the right side of the screen so our x

is going to be the width get width

minus our text width and then our height

uh let's see we're going to i'm not sure

where i want the y position to be but i

do know that i want the center of this

to be lined up with this so i'm going to

thing i know i wanted to use the current

and i know i want um this to be y

okay so like i said i know where i want

left edge of this to be i don't know

y position to be but i do know that i

the center of this text to be at this y

position which is the same position we

lines so i can do that same trick where

i know the x um the rectangle has the

get the center x of the rectangle and

i can set the center with this y value

okay now let's just set our color i want

trick i used here where i set it to

should be green the only difference is

i'm going to draw the text as light gray

the other color i used for this

text all right so this is going to give

a greenish text color for the 0db

it's this thing right here all right

all right cool we got plus 24 plus 12 0

uh minus 24 minus 12. awesome

all right let's make a little note about

okay let's add another scale let me pull

since we are going to be doing an

analyzer let's add another scale on this

for that okay now our gain range for the

uh 48 you know we could do from plus 24

to -24 so let's do the same for the

we'll do 0 to negative 48. so this is

easy all we have to do is subtract

just do that right here we can go

clear out our string um let's fill it in

since we we're not going to have any

values over zero we don't need to worry

so we can just do g db minus

uh let's just adjust the text bounding

so we know our x position is going to be

not on the actual left but like one

pixel off from it so r dot set x

one uh we need to recompute our string

then we need to set our size accordingly

um we can set our color to just always

then let's just draw our fitted text

inside this rectangle all right so

that's good times all we are changing is

and then the actual size of it all right

all right cool we got our 0 minus 12

all right so that takes care of that

and then um yeah do that clean up

let's take a quick look through all this

here we go get rid of that line get rid

okay that takes care of those guys so

is the fft analyzer and then the bypass

what we added here this is a code

and then we also added analyzer decibel

marks cleaned up code awesome

all right let's head on over to

okay go up to the top now our analyzer

display two fft curves one for each

that's because the fft algorithm

uh we are going to express that

all right this is uh effectively

okay now the fft operates the fft

fixed number of samples the host is

passing in buffers which can have a

variety of different sizes so we need a

way to collect them into blocks

of fixed sizes that's what this class

that's what this class right here does

i'll zoom out a little bit i'm not going

right if you want to know how this class

you can check it out in my uh pfm

explain how to make every little part of

this and how to get it all to work

next while our single sample fifo is

collecting individual samples

from the buffers into blocks we need a

fifo that the gui thread can use to

that this single channel sample fifo has

that's what this class does that's what

all right if you want to know how to

make this or how to write it you can

how this gets put together in my course

pfm c-plus plus for musicians

all right you can check those guys out

links in the description and all that

let's go to the next part all right we

need some instances of these things so

let's go to our class down here

now we're going to need one instance of

audio channel remember we are working on

because it is a templated class i'm

going to create a type alias to the type

into it so we don't have to type so much

okay these also need to be public

because the gui is going to need to

access them okay we are going to need

pointers to this class in the gui side

and this alias will make it easier to

instances to declare pointer instances

of that single channel sample fifo so

and then let's declare our instances

all right the single channel fifos need

to be prepared so let's go do that in

prepare to play a lot of pete words

prepare to play go to the bottom of it

after our filters this is where we're

samples per block same thing for the

okay now we just need to push buffers

into it so go to the process block

and at the very end after our processing

we're going to update it with our buffer

same for the right side okay let's go to

and we're going to go to our uh response

the bottom of it we are going to convert

some audio samples into fft data

this is not going to be simple okay we

um this system let's see i have this

on this grid i'll let me make it bigger

because it's important to know what's

okay we are basically going to build

so here's what happens the audio buffers

single channel sample fifo right here

okay the single channel uh single

channel sample fifo spits out

then these fixed size blocks go into an

right and this thing spits out fft data

the fft data blocks go into a path

producer right here and then the path

path instances and finally the gui

and renders the paths okay so

buffers of random size are fed into the

single channel sample fifo right here

size blocks then those go into an fft

the fft data generator spits out fft

then those get run through a path

producer which produces juice

paths and those get rendered and

okay that's what we're gonna build okay

so let's give ourselves a pointer to one

of the audio processors single channel

channel sample fifo uh it's that block

block type this is gonna and we're doing

left channel fifo we're just gonna do

let's go to our cpp file let's go to our

uh response curve constructor

and we need to initialize this guy let's

um this is where we're going to do left

channel fifo and we want to pass it the

audio processor dot what's the name of

that thing the left channel fifo

okay let's go to our timer callback

now this is where we are going to

coordinate all of those pieces of the

let me pull this back up we are going to

with this with this and with this okay

we're gonna coordinate all those little

first thing we're gonna do is the single

uh sample fifo so here's the logic we

while there are buffers to pull if we

can pull a buffer we're going to send it

data generator so the first thing we

need is a temp buffer to pull into

okay we're going to do this um before

all of this uh parameters change stuff

okay let's make our temporary buffer

all right uh just before we do that

actually let me go through and just

um for our fifo guy single channel

sample fifo all we need care about is

uh how do we feed it buffers how do we

buffers from it okay this is how we know

how many we have and this is how we

actually get a buffer from it

okay very simple to use same thing for

we just push stuff into it and pull

and make sure that we've prepared it

pre-allocated space we need okay

all right so we need to um go through

you know while there are buffers to pull

from the single channel sample fifo

if we can pull it then we're going to

send it to the fft data generator

all right so let's add our while loop

get num buffers available if that's

there are more than zero buffers

give me that audio buffer temp incoming

if we can pull one of these then we are

going to send it to the fft data

all right now it is very important that

we maintain the order of the blocks

coming in from the audio thread

so before we send audio samples to the

fft data generator which we have not

we have to make sure that they stay in

the same order okay we also need to make

sure that the blocks being sent to the

uh data generator is the right size so

let's create a mono buffer first for

all right let's go over to our header

so this is what we are this is what the

buffer we are going to create now is

blocks of audio from right to left

so um let me see let me just draw a

quick graph of what i'm talking about

okay so what i was saying about how the

buffers need to be ferried from the

so this is an example of like of

equals zero and then all the way to the

end of it okay so what happens is

the buffers are passed to us from the

that's what these a b and c blocks are

so what happens is we're given a and

we need to basically when we consume

things with our fft and our um

single channel sample fifo we're

basically taking one of these blocks and

then running it through that

chain that i showed before and then the

whole thing needs to shift over

uh this direction okay so the a block

right it was just consumed by the gui

block b and c they get shifted over like

this so you can see the continuity

of this point right here to this point

right there same for that point right

here's the new data from the host it's

added to the waveform right here so it's

and that gets now we consume this part

right here okay then the same thing

happens this little chunk of audio gets

stuff and produce is turned into a path

consumed and then the whole thing gets

shifted over again so that's why

you can see that this piece gets shifted

to block number two then it gets shifted

to block number one and then it gets

consumed okay so that's what i meant

uh the blocks um to the end of it and

uh towards the front of the vector

okay so we're going to implement that

so uh we are going to need a uh

we're going to need a monobuffer because

remember these are mono channels of

um newest blocks are going to get stuck

at the end and the oldest blocks are

going to go at the front so that way

everything gets kind of you know

shifted over this way okay step

14. all right let's go back to our cpp

file now that we have declared a mono

all right first we are going to shift

everything in the mono buffer

forward by however many samples there

are in that temporary incoming buffer

okay so let's get our size first

all right now let's do the copy

everything from this point which is

size samples across let me pull this

okay so let's pretend that this is our

monobuffer right here it contains this

okay our new chunk of data um is going

to get appended here so what we need to

basically copy all these samples

shift them over by however much this is

this direction so that's what we do here

we're going to copy everything to the

zero with uh index right there

and then we're gonna start reading from

okay that's what this thing does that's

that's our index um right there and then

uh this many samples so if our buffer is

holding this long and we are going to

this many samples from it that's how

much we have to shift over so

we need to keep this much okay i didn't

you can see from the code here what's

happening so once we have done that now

our temp buffer uh copy all the samples

from that to the end of our mono buffer

so our size we're going to copy that

put this on its own line our source is

going to be the temp incoming buffer

um it's going to be the zeroth channel

zero with index and we're going to copy

to our monobuffer get right pointer

copying it to the zeros channel and our

is going to be this position okay if

this doesn't make much sense to you

i suggest that you get out a a line

uh draw a number line and then

you know just like manually draw a block

of data moving from one part

to earlier in the chain to earlier in

the chain and data being added after it

and use varying sizes so you can see how

what we how far we have it have to move

uh sorry how far we have to move it

is dependent upon what size of our block

is okay so that takes care of those

we're shifting over the data and then

we're copying this to the end

and the good thing um about this is that

um the monobuffer never actually changes

so the next thing to do is to write the

however if you remember what i said

requires a specific number of samples in

order to do its processing so we must

have that same size and this is good

because we don't know how big to make

for us to be able to copy into it and to

like at this point based on our current

code this is not going to work it's

going to explode because the monobuffer

doesn't have any channels and it doesn't

so we're going to try to do like a

negative we're going to copy like

negative samples and it's just going to

so once the fft data generator is built

what size to use for the monobuffer so

once we are done with those two things

then we can start sending buffers

from uh the we can start sending mono

generator okay so let's make this next

all right this is going to go up here

all right this is the fft data

generator all right let's take a quick

it's got a lot of good stuff in it it's

complicated piece of uh software

now if you want to know how to build it

yourself i go through the entire process

in the pfm project 11 course all we need

for our purposes is how do we feed it

how do we get fft data out of it and

then how do we configure it

okay so let's do the configuration first

uh configuration depends on this stuff

here's how we feed audio into it

and then here's how we get our fft data

see how much ffdata fft data we have

that's the basic interface all right

let's give ourselves an instance of this

after our monobuffer all right now the

operates on vectors of floats not audio

okay let's go to our constructor

so we can initialize this thing okay go

to our response curve constructor

okay we're going to do this before we

start updating our chain all right let's

2048 that'll give us some really nice

in the uh uh that'll give us average

um in the uh lower end of the spectrum

okay we're basically going to be

splitting the audio spectrum up into

basically whatever value we pick from

4096 8192 basically what we are doing is

spectrum from 20 hertz to 20 000 hertz

2048 equally sized frequency bins now

store the magnitude level for a

particular range of frequencies

i'm not going to get into the math

behind this but here's the simple

okay if we have 2048 bins and a sample

48 000 then each bin represents roughly

23 hertz in our spectrum okay so that's

very simple math if our sample rate is

and then we have 2048 bins each bin

roughly accounts for 23 hertz so that

we're going to let this means we're

gonna get a lot of resolution at the

and not a lot of resolution at the

just take a look um at our plot so you

can see what i'm talking about okay you

whoops yeah this is what i meant about

let me comment out that code this stuff

right here let's comment this out so

this is what i meant how like if each

represents 23 hertz between 20 and 50

between this part of the display and

that's how big one bin is way down here

but way up here we've got 2 000 to 5

000. how many bins are there

let's find out so 5 thousand minus two

okay divided by oops divided by 23.

there's a hundred and thirty bins that

so we're going to get a lot of

uh way up here but not a lot of

okay this is the big problem with fft

it's just that's just how it works okay

so the lowest five percent of this fee

frequency spectrum is going to represent

50 percent of the display and the

is going to represent the other

um yeah and it's going to represent the

uh 50 what is that referring to i am

where we've got one kilohertz is 50 of

the display from zero to one kilohertz

range is 20 kilohertz so that means this

from right here to right here we cover

five percent of our frequency range

and then this part the other half of the

display is covering the remaining 95

okay so all this is saying that you know

our we're going to get a ton of

not a lot of resolution here the only

improve that is to increase the fft

when you do that the fft ends up

needing more and more cpu so there's a

versus 8192 in terms of these

the order that the fft is configured in

okay um that was kind of confusing but

when you make the order higher you get

more resolution in the lower end at the

more cpu okay so we're gonna put it at

uh frequency bins for right now just so

we don't have major performance impacts

when we actually use this thing let's

let's go back to our constructor and now

left channel fifo left channel fft data

change order and we're going to use fft

order and 2048. all right now that our

fft data generator has been configured

we can initialize the monobuffer with

size so we can do monobuffer dot set

we are processing one channel and our

is whatever size this thing needs

left get fft size we can uncomment these

guys these guys are uncommented

all right now that we have this and the

monobuffer is set up and the fft data

generator is ready to receive buffers we

mono buffers to the generator so we can

left channel fft data generator dot

some fft data we're going to pass it the

and we want to use negative infinity

we want to use our negative 48 as where

negative infinity is or we can change

okay so let's check this out i'll just

put negative 48 because i want the

bottom of my spectrum analyzer that grid

um i had set the scale to negative 48 so

i'm going to use that right now for

the concept of negative infinity okay so

let's build it and see what happens

all right build failed why are we

expect to call aha this is because our

fifo class needs a second prepare

handle when the type is vector not audio

that's over here in our plug-in

processor all right it wants this

we are currently using this let's see

what's going on prepares declared here

we are instantiating it um where is this

it's being called right here where we've

where was this declared this was being

okay so that means this fifo has a block

of std vector okay and so obviously

std vector does not have a set size

create a new prepare function all right

all right let's use some static asserts

to remind us which prepare function to

assert our expression is going to be std

is same there it is all right

um we want to only use this prepare

okay it's helpful helping ourselves

so check it out if we build it now

so that's fantastic failed to meet

and then we can see the message it

okay that's good times and it says right

instantiation of member std uh fifo std

okay so we can you know help ourselves

let's write the other uh prepare

and this is gonna be size t num elements

vector uses size t internally we'll do

static assert we'll change the message a

instead of this we will use std

vector and this should be num elements

num elements should only be used when

std vector float all right let's uh loop

here we're gonna go for auto buffer

dot clear clear at first then buffer dot

num elements and fill it with zeros

all right now let's build it all right

let's head on over to plugineditor.cpp

now the fft data generator let's go down

okay the fft data generator is producing

so now we need to turn those blocks into

instance okay so let's write a path

all right let's go up to our header file

fft data generator before the look and

now this class is going to take in this

a bounding box info about the fft size

and the bin width and it's going to spit

now this is the this is a simplified

version of the path producer in

project 11 so if you want to learn how

check out the course you're going to

learn to make all this stuff from

by yourself i'm going to give you the

instructions and then review your code

which is pretty cool all right let's do

all right i'm just going to paste it

right here okay we can check this out in

okay all we need to know is how to feed

our data via the generatepath function

paths out of it that's what this does

okay so we've got our number available

uh our function that gives us any paths

and then here's how it actually converts

that into data so again if you want to

learn how to actually write this from

and learn how it actually works this is

a simplified version of the big one

in the full course okay all right

obviously we are going to need an

instance so let's give ourselves one of

that goes down here analyzer

path generator we want to feed it

juice paths or we want it to produce

now we can go back to our timer callback

familiar logic while there are fft

data buffers to pull if we can pull a

let's generate a path okay so i'll just

make a little comment myself

if there are fft data buffers

to pull if we can pull a buffer

generate a path all right very simple

okay now the path producer will produce

a path inside of whatever bounding box

okay let's just take a look at this

interface real quick all right so we've

it wants some rendered data it's going

to want a bounding box and it wants to

the bin width and where negative

or what value is being considered

okay so let's provide those things

so our bounding box is going to be our

fft bounds get analysis area

and it wants it to be to float all right

and it needs to know the fft

size and the bin width and frequencies

the fft size as we showed in the

we can just get it right from the

constructor like that or right from that

fft generator class auto fft

size oh these should be const because

okay and then we need to know our bin

and that's going to be as we showed up

here our sample rate divided by our

fft size let me just copy this down here

so const auto bin width equals

audio processor i'll get the sample rate

divide that by our fft size convert it

now we can implement our logic here

left channel f50 data generator

um while it has fft blocks whoops

right if it has more than zero blocks

let's try to get one okay we need a

put past that here all right if we're

then we can pass our vector of

to our path producer sorry okay one more

so we're going to check if we have more

um if we if there are more than zero fft

blocks available let's try to pull one

and if we are able to pull one this

vector now contains our fft data which

feed to our paths producer okay

so let's pass that along fft data we

know our bounds that's that fft bounds

we know our fft size we know our bin

and we'll use that negative 48 again for

concept of negative infinity all right

that should build without errors

all right good times i'll let you see

fft this path generator one more time so

try to copy the code real quickly scroll

down a little bit you can just pause the

video if you need to to see it

good times same for this one right here

there's the path there's the data

okay all right so this builds currently

um we are almost there we just need to

and then draw them all right go to your

okay go down to after where we added our

all right we have at this point we are

producing paths in our path generator

now we just need a path to draw and to

because remember we're pulling it from

the timer callback we need to get it

so it needs to be a member variable

that's makes sense why we have that

all right let's go to our plugin editor

so at this point a path producer has

potentially created a path for us

so we need to try to pull them

now what happens if we are producing

faster than we can consume them we just

want the most recent one so our logic is

while there are paths that can be pulled

pull as many as we can because we only

we're only going to display the most

path producer get num paths available

get path and we can use our left channel

that has successfully pulled that path

previously we were only repainting

parameters were changed but because

we're pulling paths all the time

we need to repaint all the time so this

this goes here repaint like that

all right now we just need to paint the

let's go here all right let's go to our

let's go to our paint function and let's

where are we going to draw this let's

draw this before we draw our

uh where is this let's draw this before

we draw our rendered area so it's behind

okay let's do let's i'm going to use a

all right and we can just do g stroke

left channel fft data fft path and then

i'm just going to use a path stroke type

with a thickness of one and let's run it

we should see something oh my fault what

is going on here i spelled that wrong i

did spell that wrong okay let's run this

um not as the standalone but as the

has the plugin in the audio plugin host

okay we should see something

once we actually press play okay

all right we have a blue line what

happens if we actually run audio through

all right it's doing something

okay cool that is an fft that is a

okay now it's in the wrong place but it

which is awesome so we can fix that

let's make a commit of that because that

okay of course in the description i will

the links in the description the links

will um there will be a link to this

repository so you can check out the code

and then you can get the code for the

single channel sample fifo the fft data

generator and the analyzer path

okay all right now there's a small bug

with the way this stuff is getting

mapped we are currently mapping from

um we're mapping our bin frequency from

1 to 20 hertz but our frequency range is

20 to 20 hertz so that's the first bug

okay if we run this and check it out it

should look a little bit different

or the x positions should look a little

okay now it's hard to tell but basically

we weren't seeing a lot of left

stuff on the left side okay so that's a

all right let's close that let's save

this so our parameters are saved

and we if we want we can use a different

color to make the paths more

visible it's you know that blue color is

okay let's start making this show up in

okay let's go to our paint function okay

now when the path generator creates a

it does not take into account the origin

of the rectangle that defines

the bounding box so we need to translate

to the analysis bounding boxes origin

okay right now this path is drawn at

comma 0 and we need it to be drawn at um

our response areas x and y that needs to

be the left side of the path okay

so we need to do a translate first so

apply transform so we're going to do a

normal a fine transform and we're going

so we want to do response area dot get x

okay what does that do if we run it

that should be all we need to do okay

right the right on the negative 48 so

cool so it's now drawing in the right

spot i'm gonna use a different

use like sky blue or something for this

so we can see it a little bit better oh

what happened here oh there's a bug for

that's right it's gonna do that for a

um we'll figure it out the fft data is

nands i'll just comment that out for

okay let's press play all right that's

that's all i'm trying to show

okay cool all right we'll figure that

all right let's make a commit showing um

that we fixed the positioning

because sometimes those types of bugs

to diagnose and then solve okay so

stage that stage that stage that

okay next we need to verify the accuracy

now to do this we are going to go to our

we are going to well we're going to

switch to the standalone version

and then we are going to we're going to

use an oscillator to do this

and we need to initialize it prepare it

and then use it in the process block

so we're going to feed it a test signal

right down to the bottom after our

like that okay that is now declared

make this produce a sine wave at a

particular frequency and we want it to

we want it to line up on our grid where

okay so let's go to our um where do we

we go we need to prepare it so let's go

to our prepare to play function

let's do this at the end uh the

that returns a value when you feed it a

okay so std sine wrapped in a lambda

oscillator dot initialize here it wants

uh lambda that takes in a number and

so let's do that here's our number that

and then here's what it's going to

okay now we need to prepare it and we

can use the same spec for our chain as

the number of channels okay previously

um we were saying our spec only had one

channel we just need to change that

spec.num channels equals get total

and then we can prepare it ask.prepair

the spec then let's give it a frequency

because that's one of our points in the

grid ask.set frequency we'll be changing

for a while just to verify the accuracy

and let's see what comes next

all right let's go to our prepare our

process block because we want to

use our oscillator to fill the buffer

okay so we're going to do this before

we um we're going to do this after our

are configured but before we actually

the filters we don't want to hear any of

the audio that's currently coming in

and then we need to make a stereo

context and then give it to our

that's all we have to do so let's see

this block is already stereo

okay buffer's clear we need let's make

our stereo context for this block

stereo context from the block and then

context all right that's it okay and we

so apologies in advance for the annoying

sine waves we're going to hear

okay so our frequency was 200 so let's

5k and see what it looks like so i'm

a thousand we should see a little blip

all right that's good for me thousand

yep right at 5k yikes that's painful

let's make this 50. this will be the

all right i'm not seeing anything at 50

all right there's our 100 okay so 50 was

pretty low for some reason it's pretty

it you know it's showing a peak at 100

that's good times um if we want to do

more resolution in the lower end we

of the fft generator but this is good

enough for this project you know like

we're just trying to get our feet wet

and understand how some of these

uh things get put together in audio

so the next thing to do is to add a

second set of generators that can

for the right audio channel all right

let's get rid of that process block

this stuff right here let's just comment

that out in case you know we're gonna

leave the code in in case we ever need

that's you know we're going to turn that

who wants to listen to those sine waves

okay let's grab everything we used in

the single channel version of the fft

and put it into its own class this is

single channel fifo buffer the

analyzer path generator and the path

so let's make a new class we're just

going to migrate these things over there

first okay so i'm just going to

cut these we're going to go up here

we're going to put it right here

put them right there all right so we

okay this is going to produce a ton of

errors if we try to build it right now

now we just need to give our response

curve a path producer for both channels

okay next we need to add a process

function that's going to basically do

let's jump to that so we can kind of get

a feel of what i'm talking about

um this process function is going to do

this stuff and it's going to do this

um actually let's take a look at this so

um the only things we actually need from

uh this temp buffer uh fft bounds and

and bin width um yeah okay so we just

and even then like this this fft size

comes from this member variable

um fft bounds that's just a rectangle we

and then um we need the sample rate

okay so let's do that let's go back here

let's make these guys private private

void process let's give it our rectangle

now we need a way to retrieve the path

all right now we need to do what the

response curve constructor did to

the monobuffer so let's add a

all right let's go out of constructor

let's do it in class for right now

s c s f and let's initialize that

scsf okay now let's just migrate over

that code from the constructor

over here where was that that's this

grab these two lines cut them

paste them here all right now we just

our um path producers from our

response curve so let's get rid of this

left path producer and this is where we

left channel fifo address of that

or not the address it wants a reference

right channel path producer this one's

right channel fifo all right let's

um path producer process function

let's put that right above our um

right above this actually let's just put

it right above this timer callback

it'll make copying the code easier so

okay so we need our temp buffer these

guys just go like that copy and paste it

do the same thing with the fft bounds

through the path producer loops

and now instead of doing auto fft equals

get analysis area this is a function

so let's get rid of that and then our

using the sample rate very convenient

all right so we took all of that code

and now we are going to call our process

equals get analysis area dot to float

and then auto sample rate equals

audio processor dot get sample rate

and then we can do left path producer

sample rate and then right path

sample rate now we just need to grab the

in our paint function and draw them so

let's go up to our paint function

go to where those paths are drawn it's

uh we will do auto left path fft

sorry left channel fft path fft path

equals leftpathproducer.getpath

okay that takes care of that and then we

uh let's see we're doing sky blue for

that that's cool and now we can do the

same thing with the right path

path equals right channel uh

get path and do the same transform

and then draw it the same way

i'm going to do yellow for this guy

i'll do a light yellow all right let's

we should be able to see two analyzer

ah actually this is the standalone

let me quit this and then run

the vst version and now we can run some

and it should be good to go okay let's

press play we should hear some audio

all right cool all right cool so i'm i'm

seeing that so the solution well i'm

seeing a yellow i'm seeing a yellow path

um i guess our file is our file is this

file that uses file that i'm using is

interesting interesting we're not seeing

we're not writing our right channel for

all right let's see if we can figure

let's see if we can figure that out

i found the error so the problem was i

twice that's all it was pretty dumb

that's what i get for copying and

pasting and not being thorough the way i

went about actually trying to debug it

was going over to my plug-in processor

and then in my process block function

going back to using my test oscillator

and i'm clearing the buffer and i'm

writing the oscillators samples to only

one channel particularly the left

and then from there i was just checking

to see like hey is this actually getting

proper audio so it turns out it was

and then after looking at all the other

code that was copied over it literally

twice okay so let me go turn off the

turn off this code right here and then

let's run this in the vst and we should

let's run this in audio plug and host

both the left and right channel

all right let's try this again let's try

all right right definitely have a blue

and yellow line that is fantastic that

and if we roll out of the roll off

behind all the behind all the high-end

same for real for falling off we get to

frequency our frequency responder

that get dipped out as well all right

okay so okay so that's the analyzer you

can check that out we can check that off

make a commit of that commit of that

from spectrum analyzer analyzer

okay let's just stage all this stuff and

okay so the next thing that i want to

add is some bypass buttons for each band

and then a bypass button for the

analyzers always use a ton of cpu

all right time for the bypass buttons

three bands and thus we need three

boolean parameters to enable bypassing

each individual band and i also want to

be able to turn the analyzer on and off

so we're going to need a boolean

so head on over to your plug-in

processor and go down to where your

parameters are created and we're going

some booleans for this okay layout.add

and we want juice audio parameter bool

and a default value of false meaning

all right we're going to do two more of

for the parametric band peak band

whatever you want to call it and the

cut okay and then one more for the

and this one's going to be true meaning

the analyzer is enabled by default

okay let's go over to our plugin

way up near where our chain settings are

we need to supply the bypass states at

three boolean flags to represent that

peak bypassed false and then high

let's go back to our plug-in

processor.cpp let's go to where our

um where we get our parameters get chain

this is where we need to grab these guys

now these are boolean parameters

but the parameters are stored as floats

if the great if the value is greater

that means it's true so we can do

bypass equals then get the parameter

low cut bypassed it's atomic

then it is bypassed and do the same

thing for the other two parameters

okay all right let's go to our update

low cut filter function now all we have

to do here before we update the cut

is set that bypass state so left chain

dot set bypassed and then chain position

low cut and then chain settings

low cut bypassed all right do that for

right chain do the exact same thing for

all right we want the high cut position

and then finally do it for the peak

well let's just copy this copy this line

left chain to set bypass peak

all right that takes care of the dsp our

chains get updated with the bypass

now we just need to add some buttons to

the gui so let's go do that next

head on over to the plugin editor dot h

and we're going to go down to our editor

um we're gonna add some toggle buttons

okay i'm gonna use toggle button for

right now because we can customize those

we can customize those visuals later and

this is just gonna do the job for right

all right i did all four low cut peak

high cut and then the analyzer enabled

now let's go to our plugin editor dot

cpp we're going to go down to our get

we're going to add those four buttons

all right now we need to position them

so for this let's go to our resized

now i want to give them a height of 25 i

want them to sit above each of these

stack of knobs that we got the stack of

so we've got our low cut area our high

cut area so at the top of those is where

i'm going to put this okay so let's

do the left side first the low cut low

set bounds and we're going to do

a low cut area remove from top

25 all right we'll do the same thing for

i cut bypass button set bounds

high cut area remove from top

25 and then our peak bypass button

peak bypass button let's set bounds

equals uh bounds dot remove from top

25. cool we are going to do the um

uh we're going to do the analyzer button

but we have these three let's take a

standalone version for right now should

see three buttons right in the middle

um right in centered among the three

of sliders and there we go here's our

all right cool let's connect them to

all right go back to plugineditor.h and

button attachment equals ap vts

button attachment and now we can declare

i'm just gonna copy these guys

and then put attachment at the end if i

put them all in the same line it'll make

before i line them all up and i can do

cool all right so those are the

attachments we're going to use them the

we did with these sliders we just just

need to connect them to the actual

we go do that in our constructor plug-in

constructor at the end of this list

this is where we need to add the

it's this thing low cut bypass button

all right and we need to do this for the

other four buttons even though we're not

let's give that a quick build make sure

and let's run it to make sure that we

typed our param names correctly

but those should be connected now all

let's run it all right let's run it with

audio plug and host so we can run audio

through it and see if we hear it do

okay so i'm gonna set this up kind of

high run some audio and then bypass

all right so the bypass control

definitely works but the response curve

okay let's take care of that next all

right let's head on up to our update

for the uh response curve component

now we've got our chain settings right

here so we're going to do the same thing

process block we're going to update the

set bypassed and then each of the

low cut bypassed all right do that for

all right once we've got these bypass

um let's go to our paint function

because once we have these bypass states

you know if the chain is not bypassed um

we need to add the magnitude however for

high cut bands even though we bypass the

this right here does not check if that

greater chain is bypassed so we need to

we need to do if mono chain dot is

processor chain is not bypassed then we

individual bands are bypassed we can do

the same thing for the high cut

all right let's test it out oh got this

jscert that's happening we'll take care

of that in just a little bit

for some reason the render data is full

invalid values let's show me my plug-in

all right look at that it does it for

cool let's do it for this guy

all right awesome that is working as

all right let's uh make a commit that we

good times all right we can dial in the

okay for this we want to use the

toggle button um look and feel function

draw toggle button let me pull up the

so look and feel methods version 4.

slider we want to look for toggle button

where is that where are those look and

member functions you know it's part of

the look and feel class okay so we've

got uh draw button text draw a toggle

drawable button all that kind of stuff

okay so we want to implement draw toggle

so let's go up to our plugin editor.h

let's go to where our look and feel

is declared and we're going to add

this draw toggle button function i'm

give me some names for these guys

let's put them on there online and then

juice namespace before them

okay all right and after these

look nice it would be wise to make the

toggle buttons actually disable the

sliders for whatever band they are

to so that's going to be one of the

things we're going to work on as well

all right we just need to give our

editor a look and feel instance

all right and we need to assign it to

we'll do that in our constructor

go down here let's do it after we add

uh make our guys visible peak bypass

and then we need to set these to null

our look and feel implementations

plug plugin editor.cpp go to where that

look and feel implementation is it's way

all right let's clean up this space now

right here what i would like to

do what i would like to create for these

power button type of graphic and this

can be accomplished by using the path

function add centered arc now this

function will let us create an arc which

and then we just need to add a vertical

bar that goes from the top to the center

and that's it okay it's super easy just

wide stroke type when it's time to fill

the path and it will look like a power

so let's do that all right using

because i didn't turn it on in processor

that setting is um here by the way if

then you can do add using namespace

juice to the juiceheader.h it's disabled

the thought is that it's you're less

likely to get collisions with other

such as the point class which is a

it's a it's one of the classes that

turning this off it makes it less likely

that you're going to get those types of

with your class names okay all right

let's see path power button okay

first thing first is we're going to

this rectangle is going to have equal

length sides and in the center of that

um yeah this rectangle is going to be

um center in our component's bounding

uh where's our toggle button we're going

j min thing that we were talking about

up for the um we did that somewhere

somewhere we did a j min so that way our

um one of these rectangles was a square

inside of a non-square bounding box that

right here this is where we did it in

get slider bounce okay we're doing that

all right so instead of it being exactly

exactly a square in the center of it

we're gonna shrink it a little bit maybe

six or so we'll use juice live constant

maybe maybe we'll do four uh no i'm

um if i want to adjust it i can come

back with juice live constant and tweak

all right then auto r equals um bounds

size keeping the center so i'm creating

is the center of our toggle buttons uh

all right now let's specify some angles

to make the gap at the top of the arc

okay i am um yeah we're gonna

yeah we're gonna specify some angles to

make the gap at the top of the arc

and then we're going to shrink this

um we're going to shrink the square just

more we'll play around with it and we'll

live constant and you know get it to

look the way we want it to look

f because it's radians because i don't

know how i mean it's degrees because i

don't know how to think in radians

um we'll shrink this size a little bit

maybe just a little bit more we can use

now let's make our arc power button dot

add centered arc okay so we're going to

r our radius is going to be half

of the size of our box that we have

size times 0.5 that's radius for both

axes all right we're not rotating this

ellipse at all so that means that 12

o'clock is still gonna be right here

as opposed to if we had rotated it then

it would be like negative 30 goes to

here and plus 30 goes that way

okay so we are going to do zero

for that and then our from radians uh

let's see if this is 12 o'clock

right here at the top i want to go

oh no i want to go 30 this way and then

uh 360 minus 30 for the second one

so here we go let's see radians

uh sorry degrees to radians and we've

all right our angle and then the same

uh 360 degrees minus our angle

so if we want we can open this up

and there's no you know we're using

these variables so that way we can

adjust the way these visuals look

and then yeah this says there's

there's an extra let's see power button

there's an extra parameter that's not

uh start as new sub path so this this is

this should be true all right now let's

okay power button start new sub path

and this sub path is going to be

it's going to be at the center of our

rectangle but then at the top

and then we can do a simple power button

we're going center of our box at the top

y equals zero and then we just go

straight down to the center

all right let's just create a path

um norm you know normally when you

draw a path you can do uh juice you can

stroke path like that and then provide a

stroke type that way but i want to

custom stuff so it will help me if i use

um path stroke type constructor

this one right here so i can um use that

okay so i'm going to use a stroke

and then for the joint style if i use a

curved joint style it'll give me rounded

at the gap and then around that

rectangle so i'm going to use that

all right now this just needs a name pst

and now i can use that here pst and then

the path is going to be the power button

and then what is wrong with this why is

oh is that because that needs to be to

this should be a float rectangle um now

if the button is on we're going to use

one color and otherwise we're going to

so what that means when the button is on

bypassed okay so that's so if it's

bypassed let's use a gray color

and then if it's not let's use that

green color that we've been using in

other places because it looks cool

all right so let's see auto color equals

toggle state oh sorry toggle button i

get the toggle state if it is on meaning

the band is bypassed we're going to use

otherwise let's go find that green color

i think that's this i should really

you know it's a tutorial i'm not trying

but i'm trying to show good practices

color all right so we're going to draw

draw a circle around the whole thing

we can do r with a line sigma thickness

all right that should look good all

try that out hey look at that

okay cool so these are currently not

bypassed so i'm going to adjust this and

so that's cool that works as expected if

it's green it means it's active

if it's gray it means it's not i'm happy

that makes sense well that's kind of

as long as we're clicking inside the

uh it's gonna toggle it so something

that we could do that i'm not going to

is to set up the hit test region so that

inside this area it says yes you clicked

um if otherwise if you click out of that

so for reference um i'm gonna just add a

just so we can see the bounding box i'm

bounce so this way you can see what i

mean about if you click outside of it

okay so if we click anywhere in here we

inside that toggle button okay but we

it's not something i'm going to do in

go through and say you know what it's

this there's a special hit test function

and say if we click inside here that

means we actually clicked on the

component if we clicked here we did not

and that's how we can make it only

respond that way but i'm not going to do

it's a little bit beyond the scope of

so i'm just going to get rid of that

a commit for that so customized

um customized the uh graphics

all right before i do that actually i

wanted to show the juice live constant

juice juice live constant this was six

same for this one this was also six and

we can mess with this angle too

um all right so this will be interesting

we can see what that looks like let's

change these numbers move these sliders

we'll get to see what it looks like

all right let's move this out of the way

so we're changing the first one this is

going to make these guys get smaller or

and obviously once we get past a certain

point they start being drawn outside

now here's where we can adjust the angle

so that's kind of neat all right so i

40 or 40 looks kind of cool maybe a

little bit closer like 25 is good and

this shrinks that guy a little bit more

so it's like this one changes the whole

and then this one changes that inner arc

so i'm going to leave those where i had

them because i liked that positioning

but you can do that same thing to

adjust the placement of those guys all

right i'll put this back to um

put this back to 30 put this back to six

and put this guy back to six as well

let's make that commit all right now

what i want to do is reuse that toggle

functionality for the analyzer button as

what i want to do is reuse this toggle

i want to reuse this draw toggle button

functionality for the analyzer button as

but what i want to do is switch based

button type in that draw toggle button

function so i'm going to create two

in my editor i'm going to do this right

i'm going to create two classes that

and that's going to allow me to cast

um it's going to allow me to cast that

let me see let me go up here it's going

argument to determine if it's one of

and then i can switch accordingly um

in the actual implementation of that

function uh just follow the code you'll

see what i'm talking about i'm not

explaining it very well here we go

juice okay very simple struct

so that's step one all right step number

is to make the bypass buttons uh

we'll make the bypass buttons become

and then the analyzer button needs to be

all right now let's go up to our draw

implementation this guy right here all i

cast and everything should work as it

did before okay so i'm just going to

power button path i'm going to cast um

i'm going to make a check and if like i

object to a power button type then i'm

okay so if we run it i'm going to put

on the standalone version because it

um we should be able to run it and now

we can add code that draws the analyzer

after this is verified all right

sure enough we still have our analyzer

buttons our our bypass buttons

so let's add our analyzer code um where

okay we're going to add our analyzer

now i think it would be cool to see a

drawn inside of this button to kind of

you know reflect the fact that it is an

so i'm going to use the same color

settings that i used for the power

green if something is active and gray if

in this instance the toggle button will

that it did with the power button which

this thing i have to flip it around so

uh if else or an else if right here to

make sure i have an analyzer button

go faster if you're walking copy this

and we need to flip that that's all

as i said if the toggle button is on

then that means we want to use this

green color otherwise if it's off let's

all right g dot set color color

okay next i'm going to start by drawing

auto bounds now i'm going to shrink it a

and then i'm going to randomly generate

a path inside of that smaller rectangle

i don't want it to look too crazy so i i

every other pixel so let's start with

random path we'll use a random object

and then now we can um start

we will start it at our inset and our y

height times some random float value

right so our y value is going to be the

top our height is the bottom

so we're going to go remember this is 0

so we're going to go 0 down to height

multiply height by some value between 0

and 1 to give us a random height

between the top and the bottom all right

to perform a line to like this for

x is less than inset rect.get

right plus uh x plus equals two

then we just basically do this

our x position is going to be let's see

get out of here trixie let me just type

random path line two our x is gonna be

x and then our y position is gonna be

this obviously we should pre-cache some

because calling get y and get height

you know it's not ideal but whatever we

always refactor that type of stuff later

okay now let's just draw the path

let's use a thickness of one all right

let's get our analyzer button on the

screen and using this look and feel so

let's provide that look and feel

set look and feel all right and don't

disable it all right now i'm going to

the gui on the left so let's see

i'm gonna go like this i'm gonna go um

auto analyzer enabled area equals bounds

give me the top 25 pixels just a whole

25 pixels wide 25 pixels tall from the

okay now i'm going to do uh analyzer

area dot give me a width of 10

give me an x of five so it's not uh

and then um give me just remove a little

bit from the top of this analyzer

enabled area so there's a gap between

the top of the gui and the top of this

all right now i'm just going to set

that to be my analyzer enabled buttons

and let me give myself a little bit of a

gap between the analyzer button and the

analyzer itself and let's see what it

okay so we should expect to see a

just like that all right okay this is

neat so whenever we mouse over it

it repaints and it produces a new

path so let's make the path be a member

variable of the class that is computed

whenever the instance is resized so we

random path creation process works which

is cool so we're just going to use that

to make this path all right let's do

all right let's add a commit for this

it repaints all right let's head on over

declaration for that class there was

all right so let's set this up with a

this is where we will compute the random

will draw so let's see void resized

override all right we're going to need

we're going to need that bounding box

auto bounds equals get local bounce

we're still going to need to shrink it

and then instead of creating a new

we're just going to clear the existing

one let's add that as a member variable

all right so random path dot clear

it's gonna clear it and then let's go

other code that drew that thing that's

that look and feel stuff where is that

all right let's just copy this comment

plug an editor paste that right here

here's our juice random except it needs

all right there's our random path start

same line two code that we had before

all right let's go back to our plugin

okay so the stuff we need to discard is

get rid of that and now for this we need

oh boy random path like that

okay so we're just going to draw that

path member variable directly

all right let's run it and see what we

all right cool so it's only changing

it only changed once when we use the

this guy i'm going to run it in audio

and see what happens when we open and

so there's like an m right on this right

let's see what happens when we close

this gui all right that's kind of neat

so every time we open and close the gui

uh we get a new path which is you know

okay so the next thing to do is to make

um actually disable elements in the gui

all right when we click on this we want

these sliders to stop working when we

we don't want to see the fft happen in

the background okay we will do those

all right let's get rid of this code and

button analyzer button path is

created only once all right now if we

making it only appear once every time

this path um it could become not an

audio parameter but it could be stored

value tree state state value tree it

could be stored as like just binary data

and then that way whenever the plugin is

first created you get a customized path

and whenever you load that in it just it

so that's you know that's a way to make

it's random the very first time you open

the gui but that's the only time once

um you have to create a new instance of

the class or a new instance of the

in order to get a new path there but you

all right um let's see what are we going

to do we are going to make our buttons

actually enable or disable gui

head on over to the audio processor

and we're going to go down to after our

now we are going to use the on click

lambdas to change the enablement of the

so the reason i'm doing this here is

this is where all of these components

right i'm going to make this button

this button is gonna control this slider

this button is gonna control these three

this button is going to control uh

the high cut buttons this guy and this

guy and then this thing is gonna

send a message to this thing to stop

okay so that's why we're doing this here

inside um maybe we make some macro

that owns the um the sliders and stuff

i'm doing it here because this is where

the the most common place this

this is the place where all the

components can see all the other

so it makes just the communication

now as with all asynchronous callbacks

we need to use a safe pointer to make

in this case the editor is still in

existence when we try to use this

all right so let's get started with that

pointer equals juice component

safe pointer simple eq audio processor

this all right now we can start

declaring these guys so we'll do we'll

peak bypass button and this is where it

lambda with no arguments and here's

where we're going to do the good stuff

first we have to check if our safe

all right if it does once we know it

exists we can get the bypass state

and set our slider's enablement

equals comp peak bypass button to get

easy all right now remember if the band

is bypassed that means the sliders

should not be enabled or said in reverse

if the band is not bypassed the sliders

um peak frequency slider set enabled

it should be enabled if we are not

okay let's do it again for the other

this is the peak gain and the peak

quality all right let's test it before

buttons work all right we did the peak

i'm not seeing it do anything hmm

let's go up to our look and feel all

right so here's our draw rotary slider

what are we not doing uh we are not

setting our colors differently

if we are enabled or disabled so let's

all right we can do that right here auto

enabled equals uh slider dot is enabled

now we can set these colors accordingly

use this cool color otherwise use um

that's for the background circle same

enabled if it's enabled use

that um i guess there's an orangey color

um so we will do colors a different type

all right do we have any other colors

looking for set color that's for the

all right let's try that out one more

okay so i would like the parameter text

also fade out but we can do that after

we get these other lambdas set

up so we're going to follow the same

let's go back down to our constructor

we're going to follow the same pattern

we're going to capture a safe pointer

we're going to check if the component is

valid and then if it is we will get the

bypass state and then change the

of the sliders accordingly so let's do

next look at bypass button.on click

all right first make sure the component

bypass state all right this is the low

and then set the um set the low cut

remember it should be enabled if our

and then same thing for the high cut

all right let's give that a test and see

what's going on see if it's working as

this is high cut high cut high cut low

awesome cool let's add a commit for

that oh i forgot to make i forgot to

all right those let me say um let's see

slider enablements that's what happened

um yeah that's all part of that same

all right our next step is to make the

toggle the um fft analysis the spectrum

see if that make that do something

all right so let's go right here we're

analyzer enabled button on click

i'm going to capture the same safe

all right now we need our enabled state

all right and now let's call a function

um we'll add it in just a second comp

uh enable okay let's that's a good name

for what this function needs to do

all right let's head on over to our

and provide that function so we stop

okay that's um where is that here's our

and now um let's see what do we need to

that it can check so let's put that down

we'll set that to true by default and

then uh we'll just do an implementation

should show fft analysis equals

all right let's head on over to our

paint function and uh that's the wrong

paint function response curve paint

and if our analyzer is enabled

grab those paths and draw them if

do this here's where the paths are drawn

put that right in there all right let's

oh before we test it out um we should

uh if we are where's our timer callback

all right if our analysis is turned off

all right if we should show the analysis

um yeah the fft guys should the

path producers should um produce the

all right now we can go test it

all right let's run some audio through

our plug-in and check out that button

all right cool that is working

awesome so analyzer enablement button

talk is implemented implemented

i redid that there and did it here

cool all right the last tweak that i

um let's head on up to the top we're

going to head up to our drop rotary

slider i had said i wanted that text

all right so let's do that right now um

yeah okay so right here if we're enabled

use the black background otherwise use a

and then if we are enabled use white

all right let's see what that looks like

hey awesome all right i'm very happy

okay cool all right let's make a commit

all right that is the end of the

tutorial i am going to dial in the

but there you have it that is how to

thanks for sticking with me to the end

um well we learned how to make this

3-band equalizer with fft analyzer

if you liked what you experienced here

you can check out my course project 11

where you will learn to build the

plugin from scratch i also have a course

plus from scratch in the context of

writing audio software the focus there

and not on video tutorials programming

is learned by doing not by watching

so for that you're going to work your

10 projects i'm going to review your

code every step of the way via pull

requests on github and bitbucket

because that's what we use in the real

world um nine of them are pure c-plus

projects that will teach you the

language fundamentals uh the tenth

project is a multi-meter audio plug-in

just like we used here it features level

histograms go neometers correlation

buttons and combo boxes threshold

saving and loading the plug-and-stay and

basically what you experienced here but

with way more visual stuff being built

and you aren't watching me build it

building it on your own i take on the

i set up a jira board with all of the

instructions because that's how

manage projects in the real world i

assign you issues from that board you

tackle them i review your work

and either help you when you get stuck

or i approve it and assign you something

uh in the end you'll have built the

whole plug-in from scratch without me

writing a single line of code for you

you're going to do it all yourself i'm

so it's a pretty cool experience i've

had a lot of people uh go through it

i've had a few people actually manage to

pretty big audio company so check out

the link in the description or by

www.programmingformusicians.com

thank you again for tuning in i am chuck

i also go by the name matcat music on

good luck on your coding journeys and i

will see you in the next project