Creating this art piece was a very fun and instructive process. I intended to create a simple and aesthetic piece that is also interactive and fun for the audience. I have used code that allowed me to create a sinus function in order to display an animated wave across the screen. The piece also displays two large circles with changing dimensions that move and morph depending on the coordinates of the mouse.
Both shapes; the circles and the sin wave, move accordingly as the frequency of the wave depends on the radius of the circles and change according to the y-coordinate of the mouse. I have used the code snippets below in order to create the morphing effects of the circles:
let x = mouseX;
let y = mouseY;
let ix = width – mouseX; // Inverse X
let iy = height – mouseY; // Inverse Y
fill(250, 150);
ellipse(x, height/2, y, y);
fill(0, 159);
ellipse(ix, height/2, iy, iy);
Using the variables ix and iy has been useful in creating the inverse and alternating visual effect in the piece, as many of the dimensions used depend on each other. This was a very helpful trick, since it allowed me to link the dimensions of different shapes and, thus making the piece more symmetric, cohesive and aesthetic.
One of the biggest challenges I faced while creating the piece was probably designing the sin wave as I was thinking of having multiple small ones on the screen. But the best decisions turned out to have only one big shifting wave as that takes the centre of the piece.