mousey | Create mouse-like animations with hovers and clicks | Animation library

Ordinarily, you wouldn't want to write the mouse position directly into the camera location (because that will be of limited use in practice - whenever you click on the screen, the camera would jump).

What you probably want to do something along these lines:

You need to close the outline around the triangles:

It's unclear what OPTIMIZE and IIIINNZ do.

Without being able to run your code and test I can't tell if those function slow it down or is it simply the (re)rendering.

I advise using VisualVM to Profile the CPU usage of your sketch(PApplet subclass). The CPU Profiler will list the methods from the slowest:

Focus your efforts on the top slowest and try not to sacrifice code readability if possible.

(On code readability I recommend using a Java Style guide overall. It will save time scanning/reading longer and longer programs)

Your question reminds me a little bit of an older one I answered a while ago.

It's similar because of the many lines rendered. In addition yours uses distance() (which in turn uses Math.sqrt() which can cost the CPU a bit, but as much as rendering. You could use squared distance instead, but that will make the code a bit harder to read and if compared to rendering isn't that slow I'd leave that in).

Essentially there are many point instances that render lines based on threshold distances. Each stroke(), strokeWeight(), line() call will have it's cost.

I've tried to group line rendering into something simpler: a single shape accessing all the point instances:

• You're using index a for argument of Cubes.attraction which is expecting an object with a pos vector field (a Cubes ?)
• You're trying to position your cubes using this.x / this.y, which aren't changed by update. Use the this.pos vector instead
• You can optimize by checking for mouse pressed only once, and only then calling attraction on every cube with mouse coordinates as vector argument
• In physics, force drives acceleration, not velocity. I changed that but maybe it was deliberate of you.
• You should change your class name to Cube rather than Cubes

This seems to be a bug in p5.js.

The mouse coordinate seems to depend on the size of the bounding box of the canvas. The bounding box depends on the rotation. Therefor you need to scale the offset for the calculation of the center of the canvas.
Unfortunately, that's not all. All of this does not depend on the current angle, but on the angle that was set when the mouse was last moved. Hence the scale needs to be computed in the mouseMoved callback:

While you could theoretically use the get() function to check the color of the pixel under the mouse cursor and correlate that with one of the entries in your dataset, I think you would be much better off doing the math to determine which segment the mouse is currently over. And conveniently p5.js provides helper functions that make it very easy.

In the example you showed you are only checking if the mouse cursor is in a rectangular region. But in reality you want to check if the mouse cursor is within a circle. To do this you can use the dist(x1, y1, x2, y2) function. Once you've established that the mouse cursor is over your pie chart, you'll want to determine which segment it is over. This can be done by finding the angle between a line draw from the center of the chart to the right (or whichever direction is where you started drawing the wedges), and a line drawn from the center of the chart to the mouse cursor. This can be accomplished using the angleBetween() function of p5.Vector.

Here's a working example:

If you want to apply the distortion to the entire canvas, you can just use copy() without the image parameter. This causes it to just copy from what is currently on the canvas.

You can use a very similar for loop to the one that's in your wave code, just omit the myImage parameter and let i go from 0 to width instead of myImage.width. Then you put it at the end of your draw block in the grid code:

In Bresenham's midpoint line algorithm you have to be careful with the gradient of the line drawn, the base algorithm you described only works for gradients between 0 and 1. In order to deal with gradients that are steeper (m > 1 or m < -1), you have to switch the roles of the x and y values, therefore you have to step in y and then calculate x. Also to deal with negative steps just switch the point order.

There are too many events triggering as it is a mousemove event on document. Try throttling down the triggers a bit.