Last night I read “Getting Started with p5.js” by Lauren McCarthy, Casey Reas and Ben Fry. This morning I tweeted out a photo of me with the book:
Thanks to @laurmccarthy @reas @ben_fry for the @p5xjs book. By page 11 it had fixed a bug for me! Highly recommended holiday gift. pic.twitter.com/go5p8rnssj
— Joel Gethin Lewis (@JoelGethinLewis) November 29, 2016
It’s true! By page 11 I’d realised what had been causing the bug that had been bothering me yesterday. My code for clicking to select which circle should bounce was incorrect:
if(distanceBetweenMouseAndCircle < (springyCircles[i].radius)){ //this is resulting in a bug - radius/2 works properly, but why isn't radius alone giving the correct interaction?
//if the mouse is under the springy circle, then spring/move it
springyCircles[i].moveSpring();
}
From checkIfCirclesShouldSpring inside the MouseSpringyCircles Reactickle. The reason was that the code for drawing an Ellipse also has an ellipseMode function which dictates whether it should be drawn taking a width parameter or a radius parameter. By issuing the following command in my setup(), I could set to draw with the correct radius parameter:
ellipseMode(RADIUS);
This fixed all my circle selection code. The next step is to convert all my radius variables to be proportional to the screen size (as my position co-ordinates already are) rather than being pixel based. It’s important to me that Reactickles 3 is resolution independent – i.e. that it looks the same on a variety of different screen sizes and proportions.