The program executes sequentially.

its not identical where it gets printed. the idea is to have the current x,y value and the previous one, thats why its called px,py... so they are the same at the beginning, but right after that x,y gets changed. then they use x and px to calculate the distance between the position and the previous one to get the circle size and make them touch each other... 

It is also good programming practice to perform arithmetic on similar data types.  The creation of targetX and targetY may be just so all the math operations are performed on floats.

Thank you for the awesome replies! helped me a great deal!

1. Yes, for a moment after line 16 py and y are identical, as are px and x. But on line 18 x gets a new value and y gets a new value on line 20 - these new values are based on the mouse location. On line 21 the routine is  comparing where x and y are now (after the changes) to where they were the last time the draw routine was run. Don't forget the draw is constantly looping. When I write these I usually set px = x and py = y at the end of the routine rather than the start - helps me get my head around it - but this way works just as well. I use the variable names px and py too, but I think of them a "previous x" and "previous y".

2. Good question. As it stands there's no reason and you could use the mouseX and mouseY, however, the author may be thinking of using these values in a larger sketch down the road at which point having a separate variable might be handy. That's the only (slightly lame) rason I can think of.

Have fun with the processing.