In the simplest term, this app takes an image as its base, then makes a copy of that image on top of the base from which we will spawn particles that have a sense of their original position, and are attracted to that position after being repelled by the cursor. To do this, we first spawn particles into an array.
I first create a function that I can call later to spawn the particles, by creating a class called particles that has information about x and y positions as well as color information from the original image. The spawn function will iterate through the image width and height to extract pixels relative to the resolution of
the image.
From here, the heavy lifting happens. p5js has a function called createVector that allows us to create a vector with x and y coordinates. We can then use the p5js function dist to calculate the distance between the cursor and the particle. We can then use the p5js function lerp to interpolate between the original position of the particle and the cursor position. This is how we get the particles to move towards the cursor and then back to their original position. The permanence slider controls how long the particles stay away from their original position before being forced back. The brush size slider controls the size of the cursor and the force with which the particles are moved.
As far as interfacing goes, by making much of the math necessary to produce this image effect into adjustable variables, a user can easily manipulate the image without having to input a "MAX_FORCE R" that repels a vector relative to the mouse.
