Learn

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:

``let distance = dist(mouseX, mouseY, width / 2, height / 2);``

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

1.

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.

2.

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`.

3.

Below the `size` variable initialization, re-assign `size` to:

``(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.

4.

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.