 going to go over question nine from the week five workshop where we use the distance function to alter the color of two different ellipses. So to start off you want to have created a program which draws a white circle of diameter 60 in the center of the window and then have another circle draw with the same diameter wherever the mouse is pointed. So not when the mouse is clicked or press isn't required you should just have a circle which follows your mouse. So I've got that program set up here. I've got a float variable called dia representing the diameter of my ellipses because the diameter is the same for both. I've got everything in my setup and then I have my two ellipses. So this ellipse will always be in the same place, it will always be in the middle of my screen and then I've got a second ellipse here where the center coordinates are based on my x and y position of my cursor here and then I also have my background call here just to refresh it. So when I play this I've got my ellipse in the middle and then I've got an ellipse that's following my cursor here. There might be a little bit of lag there but yeah so what we want to do is whenever these two circles overlap the color of the circles should change to red rather than white. So this will be making use of some conditionals and also the distance function here which is in built in processing so we can have a look here. What this function does is it calculates the distance between two given points so we can give it an x1 and a y1 or rather x1 and a y1 and an x2 and a y2. So what we want to look at here is the distance between the center point of this ellipse here which is following my mouse and the ellipse of the one that stays stationary in the center. So how would we work with the distance method to work out if they have overlapped so I'll get my whiteboard out. So if we consider if we have both of our ellipses on top of each other so say if I've got this is my one in the center I might just redraw that it's not very neat but it does the job. Okay so we've got our center point here a center point here and they've both got the same diameter which is both 60 and then we've got our distance between this center point and this center point right here. We know that half of the diameter of a circle is the radius so in this case our radius is 30 and that's consistent with both here so our radius is 30 so our distance between this center point and this center point is 60 because we've got the 30 here which is the radius of this circle which is moving and the radius of this stationary circle here which will add up to 60 so if the distance between these two circles or ellipses ever gets less than 60 then we know that they've overlapped because we have this overlapping here so it's not exactly 30 and 30. So that's the distance that we want to consider so our condition would be if the distance between the center point of our stationary circle to our mouse x mouse y position which is the center point of our other circle so if that distance there is ever less than the diameter which is two times the radius then the fill of our circle should be red otherwise and it's important to have our else here the fill should just be white so now as draw continues to loop around it does this conditional check that always checks the distance between our two circles there it checks if it's less than the diameter and if it is less than the diameter then it adjusts the fill so that it's red and if it's not it just keeps it as white and that applies to the ellipses underneath here so if I press play or run what I'm going to do is as I continue to get closer and closer at this point the distance between the two is about 60 and then as I get less they turn to red and that is how you do question nine