The dist() function is a powerful tool for calculating the distance between two points, stationary or dynamic. This function is oftentimes used in conjunction with mouse events. Understanding how and when to use dist() can simplify calculations and make fun and interesting sketches.
The dist() function takes four arguments: the x and y coordinates of the first point (x1 and y1 in the diagram above) and the x and y coordinates of the second point (x2 and y2 above).
For example, you can use the dist() function to calculate the dynamic distance between the center of the canvas and the mouse position as follows:
The distance variable in the above code will return the distance between the center of the canvas and the mouse position wherever the mouse is.
Instructions
Let’s create a spotlight effect using the mouse position. The spotlight will reveal and distort the grid of ellipses being drawn across the canvas!
At the bottom of the setup() function in sketch.js, assign the canvas_dist variable to the dist() function that calculates the distance between the following two points:
- The origin of the canvas at (0, 0)
- The bottom-right corner of the canvas at (
width,height)
This will calculate the diagonal distance across the canvas.
Now, to determine the distance between the mouse position and each ellipse’s position, we will use the dist() function again.
Inside the nested for loops in the draw() function block, use the dist() function to calculate the distance between mouseX, mouseY, and the i and j iterator variables. Create and store the output of the dist() function’s calculation in a variable called size.
Below the size variable initialization, re-assign size to:
This sets the size variable to be proportionate to the size of the canvas. Here, we multiply by 70 to scale the spotlight appropriately.
At the end of the draw() function inside the nested for loops, a grid of ellipses is drawn at x position i and y position j.
Currently, the ellipses have a width and height of 10 pixels—replace them with the size variable.
Run the code. Move the mouse across the canvas and see the spotlight effect happen!
Optionally, try uncommenting the second fill() function and run the code. Play around with the iteration statement in the for loops and the value that the size variable is being factored by! All of these will affect the outcome of the sketch differently.