Exploring The Mouse Interaction Array

Research and Reference

To start of, I looked for some reference to guide me on how to create a mouse interaction with array. Then, I remembered the website that I used for my last assignment to create the bubble array.

In this blog, I will explain my research in exploring the mouse trail function from Happy Coding Array Tutorials and my research on the Mouse Ripple Example.

Mouse Trail

In my attempt to check off the requirement to use array in assignment 2, I planned to create a mouse trail. I find the mouse trail interesting because it’s like drawing on the screen with you shadow.

Following the Happy Coding Array Tutorials, I started of with creating an array to contain the circles.

let trail = [];

After that, I created a mousetrail function. In this example, I got rid of the fill because I wanted to see the overlapping circles.

function mousetrail() 

Then, I added another function to pinpoint the location of the mouse do that the circle can trail behind the mouse

  trail.push(new p5.Vector(mouseX, mouseY));

Considering that too many circles will overload the canvas, I added a conditional function so that if the trail length is more than a certain value, it will delete the end of the circle.

  if (trail.length > 50) {
    trail.shift();
  }

Now that I have all that, I added the loop function for the trail itself. This way, the circle will over and over creating a trail.

  for (let i = 0; i < trail.length; i++) {
    let p = trail[i];
  }

After setting up the location, I set up the size. I set the size to start with size 50 and scale down as the trail get longer.

  let size = (50.0 * i) / trail.length;

Finally, I added a circle at the end of the mousetrail() function is to create the circle itself.

 circle(p.x, p.y, size);

Mouse Ripple

Another thing that I wanted to add to my design is a mouse ripple interaction.

Why mouse ripple? When you trace your finger on the water, it will create a trail, the next interaction after that is to touch (click) the water. This is why i wanted to add a simple ripple on click interaction.

I found this Mouse Ripple example from the Happy Coding website. To understand that code, I watched the video tutorials by The Coding Train called “2.1: Variables in p5.js (mouseX, mouseY) - p5.js Tutorial”. This video explain how to use the variable (mouseX, mouseY). Through this video I understand how to draw an object on mouse click.

The code in the Mouse Ripple example starts of with setting variables for the circle position and size.

let circleX;
let circleY;
let circleSize;

After that, I set the value for the circle’s position and size in the setup function.

circleX = width / 2;
circleY = height / 2;
circleSize = 0;

To make a ripple effect, the circle has to scale up over time. This function below is the one that increase the circle size value overtime.

circleSize += 10;

Then, I added the circle function to draw the circle for the ripple. In this example, there are three circle with different size to create that ripple effect.

circle(circleX, circleY, circleSize);
circle(circleX, circleY, circleSize * .75);
circle(circleX, circleY, circleSize * .5);

Finally, define the circle position to mouseX and mouseY so that it will create circles on mouse-click.

function mousePressed(){
  circleX = mouseX;
  circleY = mouseY;
  circleSize = 0;
}

Plan for Assignment 2

For assignment 2, I plan to incorporate both mouse trail and mouse ripple for the interaction.

Click Here if the embedded javascript doesn’t work.

Check out how I incorporate this into my Assignment 2.