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.
dist() function takes four arguments: the x and y coordinates of the first point (
y1 in the diagram above) and the x and y coordinates of the second point (
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:
let distance = dist(mouseX, mouseY, width / 2, height / 2);
distance variable in the above code will return the distance between the center of the canvas and the mouse position wherever the mouse is.
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 (
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
mouseY, and the
j iterator variables. Create and store the output of the
dist() function’s calculation in a variable called
size variable initialization, re-assign
(size / canvas_dist) * 70
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
Currently, the ellipses have a width and height of 10 pixels—replace them with the
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.