# OPENRNDR & Processing - Closest object to mouse

**URL:** <https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66>\
**Category:** Tutorials\
**Created:** [April 1, 2020, 1:23pm UTC](https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66 "2020-04-01T13:23:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [April 1, 2020, 1:23pm UTC](https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66/1 "2020-04-01T13:23:32Z")

</div>

Lets share simple programs written both in OPENRNDR + Kotlin and in Processing + Java.

Before the first example I want to note that I can count at least 4 different approaches to developing with these two platforms. I did go through these steps myself one by one:

1. Programming in the Processing IDE: launches very fast and lets you iterate with your experiments quickly but limited to older versions of Java.
2. Using Processing in a more advanced IDE: allows you to use new versions of Java with simplified and more expressive syntax (for example streams, var, lambdas, etc.). Such IDEs make life easier when programs grow to several code files.
3. Programming [Processing using Kotlin](https://discourse.processing.org/t/writing-processing-in-kotlin/3957): a language that still compiles to Java bytecode, but less verbose. Good option to learn Kotlin while staying in the familiar territory of the Processing API.
4. Programming using Kotlin and OPENRNDR. For those who want to explore new worlds 🙂

Now, let’s get to example 1.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [April 1, 2020, 1:42pm UTC](https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66/2 "2020-04-01T13:42:21Z")

</div>

# Find closest object to mouse position in a collection

A program that sets random positions for 30 circles, and highlights in red the one closest to the mouse cursor.

![closest](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/c84df797b82a661627ee2eee6f68d60f4e0b9250.png)

### Processing / Java

```java
ArrayList<PVector> points = new ArrayList<PVector>();
void setup() {
  size(640, 480); 
  for(int i=0; i<30; i++) {
    points.add(new PVector(random(width), random(height)));
  }
}
void draw() {
  background(255);
  float mind = Float.MAX_VALUE;
  PVector found = null;
  for(PVector p : points) {
    float d = p.dist(new PVector(mouseX, mouseY));
    if(d < mind) {
      found = p;
      mind = d;
    }
  }  
  for(PVector p : points) {
    fill(p == found ? #FF0000 : 255);
    ellipse(p.x, p.y, 20, 20);
  }
}

```

### OPENRNDR / Kotlin

```kotlin
fun main() = application {
    program {
        val points = List(30) { drawer.bounds.center + drawer.bounds.center * Random.vector2() }
        extend {
            drawer.clear(ColorRGBa.WHITE)
            val closest = points.minByOrNull { (mouse.position - it).squaredLength }
            points.forEach {
                drawer.fill = if (it == closest) ColorRGBa.RED else ColorRGBa.WHITE
                drawer.circle(it, 20.0)
            }
        }
    }
}

```

I did not include three `imports` in the Kotlin program as they are handled automatically by the IDE.  
My favorite part here is finding the closest Vector2 to the mouse position which goes from 9 lines of code to just 1. One thing that would make that line more readable though is if `Vector2` implemented a method called `.squaredDistance` so you could write `it.squaredDistance(mouse.position)`

I also struggled a bit in figuring out the best way to generate the random points because I couldn’t find a simple method to generate random values between (0.0, 0.0) and (width, height).

This is another way of doing it

```
    val points = List(30) {
        Vector2.uniform(Vector2.ZERO, drawer.bounds.position(1.0, 1.0))
    }

```

which gives you 30 points, each one sampled randomly using a uniform distribution between the point (0.0, 0.0) and the point (640.0, 480.0), which happens to be the default size of the window. `drawer.bounds` is the Rectangle that defines the visible area and `.position(1.0, 1.0)` refers to the bottom right corner of that area.

👇 Share your questions and comments below | 🔎 [Find other OPENRNDR & Processing posts](https://openrndr.discourse.group/search?q=Processing%20%23openrndr%3Atutorials)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [June 15, 2020, 2:38pm UTC](https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66/9 "2020-06-15T14:38:37Z")

</div>

After writing the post I realized that

```
drawer.bounds.dimensions

```

is equivalent to

```
drawer.bounds.position(1.0, 1.0)

```

Still, in some cases you want the flexibility of the second approach to do something like this:

![2020-06-15-162310_640x480_scrot](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/d281d38100aa8ae24ecfc95969208ca873a3ebd6.png)

```auto
fun main() = application {
    program {
        extend {
            backgroundColor = ColorRGBa.WHITE
            drawer.fill = ColorRGBa.PINK
            drawer.circle(drawer.bounds.position(0.333, 0.333), 60.0)
            drawer.circle(drawer.bounds.position(0.666, 0.333), 60.0)
            drawer.circle(drawer.bounds.position(0.666, 0.666), 60.0)
            drawer.circle(drawer.bounds.position(0.333, 0.666), 60.0)
        }
    }
}

```

Or using [.run](https://kotlinlang.org/docs/reference/scope-functions.html#run) to avoid some repeating yourself:

```auto
fun main() = application {
    program {
        extend {
            backgroundColor = ColorRGBa.WHITE
            drawer.run {
                fill = ColorRGBa.PINK
                circle(bounds.position(0.333, 0.333), 60.0)
                circle(bounds.position(0.666, 0.333), 60.0)
                circle(bounds.position(0.666, 0.666), 60.0)
                circle(bounds.position(0.333, 0.666), 60.0)
            }
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [March 15, 2023, 4:05pm UTC](https://openrndr.discourse.group/t/openrndr-processing-closest-object-to-mouse/66/10 "2023-03-15T16:05:33Z")

</div>

Almost 3 years later, a few things I would write differently now:

> **imports**
>
> ```auto
> import org.openrndr.application
> import org.openrndr.color.ColorRGBa
> import org.openrndr.extra.noise.scatter
> import org.openrndr.extra.noise.uniform
> 
> ```

```auto
fun main() = application {
    program {
        val points = List(30) { drawer.bounds.uniform() }
        //val points = drawer.bounds.scatter(40.0)
        extend {
            drawer.clear(ColorRGBa.WHITE)
            val closest = points.minBy { mouse.position.squaredDistanceTo(it) }
            points.forEach {
                drawer.fill = if (it == closest) ColorRGBa.RED else ColorRGBa.WHITE
                drawer.circle(it, 20.0)
            }
        }
    }
}

```

- `Rectangle.uniform()` returns a random (with a uniform distribution) point from a `Rectangle`. Simpler than the original solution.
- `Vector2` now has `.distanceTo()` and `.squaredDistanceto()` methods which I find clearer.
- As an alternative to `Rectangle.uniform()` we can use `Rectangle.scatter(radius)` which returns random points making sure a minimum distance is kept between them. See how no overlap happens between the points:

![image](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/f17e24ff0e591b731507c7c979b119f6c47e35b8.png)

To set a maximum number of points with `.scatter()` we could use `.take(n)`:

```
val points = drawer.bounds.scatter(40.0).take(10)

```

Exercise: try notice the difference with and without `.shuffled()` in the following code:

```
val points = drawer.bounds.scatter(20.0).shuffled().take(20)

```