# Calculate distance from point to (closest point of) shape

**URL:** <https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201>\
**Category:** Libraries\
**Created:** [January 4, 2019, 10:52pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201 "2019-01-04T22:52:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![grshch](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@grshch](https://discourse.processing.org/u/grshch)\
**Post date:** [January 4, 2019, 10:52pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/1 "2019-01-04T22:52:07Z")

</div>

Hi everyone!  
Please help me to solve this thing. How to calculate distance from point to (closest point of) shape/curve/type?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 5, 2019, 12:18am UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/2 "2019-01-05T00:18:22Z")

</div>

if you use PVector ( and vertext for draw )  
and calc all in absolut coordinates ( never use translate rotate shear scale )  
it is easy.

```auto
// https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201
// Calculate distance from point to (closest point of) shape 

// -1- make a ellipse by a PVector array
// -2- draw it by vertex
// -3- move it by PVector ( not translate....)
// -4- make mouse PVector
// -5- calc min distance between mouse and obj PVector array
// -6- draw obj and line ( obj(nearest) , mouse )

int steps = 360;
PVector[] myobj = new PVector[steps];
float ang,my_ra = 100, my_rb = 50;
PVector mouse = new PVector(0,0);
int nearest = 0;

void make_obj(float posX, float posY) {
  for (int i =0;i<steps;i++) {
    ang = TWO_PI*i/float(steps);
    myobj[i]= new PVector(
    my_ra * sin(ang),
    my_rb * cos(ang)
    );
  }
  // move it
  PVector moveto = new PVector(posX,posY);
  for (int i =0;i<steps;i++) {
    myobj[i] = myobj[i].add(moveto);
  }
}

int calc_min_mouse_dist() {
  int minpos = -1;
  float mind = 10000;
  
  for (int i =0;i<steps;i++) {
    float d = myobj[i].dist(mouse);
    if ( d < mind ) { 
      mind = d;
      minpos = i;
    }
  }
  return minpos;
}

void draw_obj() {
  beginShape();
  stroke(0,200,0);
  strokeWeight(3);
  fill(0,0,200);
  for (int i =0;i<steps;i++) {
    vertex(myobj[i].x,myobj[i].y);
  }
  endShape(CLOSE);
  
  // draw mouse
  stroke(200,0,0);
  line(myobj[nearest].x,myobj[nearest].y,mouse.x,mouse.y);
}

void setup() {
  size(300,300);
  make_obj(width/2,height/2);
}

void draw() {
  background(200,200,0);
  draw_obj();
}

void mouseMoved() {
  mouse.set(mouseX,mouseY);
  nearest = calc_min_mouse_dist();
}

```

 ![2019-01-05_07-17-38_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7fb22e0279fbd62c049a97baaeda02acbb25a546.png)

> **update**
>
> ```auto
> // https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201
> // Calculate distance from point to (closest point of) shape 
> 
> // -1- make a ellipse by a PVector array
> // -2- draw it by vertex
> // -3- move it by PVector ( not translate....)
> // -4- make mouse PVector
> // -5- calc min distance between mouse and obj PVector array
> // -6- draw obj 
> // -7- and line ( obj(nearest) , mouse )
> // -8- print distance near mouse pos
> // -9- make obj fancy ( https://en.wikipedia.org/wiki/Lissajous_curve ?)
> 
> int steps = 360;
> PVector[] myobj = new PVector[steps];
> float mind, ang, my_ra = 100, my_rb = 50;
> PVector mouse = new PVector(0, 0);
> int nearest = 0;
> 
> void make_obj(float posX, float posY) {
> for (int i =0; i<steps; i++) {
> ang = TWO_PI*i/float(steps);
> myobj[i]= new PVector(
> // original ellipse
> // my_ra * sin(ang), 
> // my_rb * cos(ang)
> my_ra * sin(ang)+my_rb * cos(ang*3)/5, 
> my_rb * cos(ang)+my_ra * sin(ang*7)/3
> );
> }
> // move it
> PVector moveto = new PVector(posX, posY);
> for (int i =0; i<steps; i++) {
> myobj[i] = myobj[i].add(moveto);
> }
> }
> 
> int calc_min_mouse_dist() {
> int minpos = -1;
> mind = 10000;
> 
> for (int i =0; i<steps; i++) {
> float d = myobj[i].dist(mouse);
> if ( d < mind ) { 
> mind = d;
> minpos = i;
> }
> }
> return minpos;
> }
> 
> void draw_obj() {
> beginShape();
> stroke(0, 200, 0);
> strokeWeight(2);
> noFill(); //fill(0,0,200);
> for (int i =0; i<steps; i++) vertex(myobj[i].x, myobj[i].y);
> endShape(CLOSE);
> 
> // draw mouse
> stroke(200, 0, 0);
> line(myobj[nearest].x, myobj[nearest].y, mouse.x, mouse.y);
> fill(200, 0, 0);
> text(int(mind), mouse.x+10, mouse.y-10); // ?? not work inside filled ellipse
> }
> 
> void setup() {
> size(300, 300);
> make_obj(120, 200); //width/2,height/2);
> }
> 
> void draw() {
> background(200, 200, 0);
> draw_obj();
> }
> 
> void mouseMoved() {
> mouse.set(mouseX, mouseY);
> nearest = calc_min_mouse_dist();
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![grshch](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@grshch](https://discourse.processing.org/u/grshch)\
**Post date:** [January 5, 2019, 7:45am UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/3 "2019-01-05T07:45:39Z")

</div>

Thanks! Does this approach allow me to use something but vertex drawing? like type or .svg shapes?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 5, 2019, 9:22am UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/4 "2019-01-05T09:22:15Z")

</div>

the idea was to have a long array of XYpoints  
where the min distance check is easy math.

actually what you do with that points is up to you.

- besides beginshape … vertext … endshape
- can do line( x-1,y-1,x,y) // but not too long …

with your wording

> type or .svg shapes

i have no big idea, but yes you can export to .svg file

> **rev10**
>
> ```auto
> // https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201
> // Calculate distance from point to (closest point of) shape 
> 
> // -1- make a ellipse by a PVector array
> // -2- draw it by vertex
> // -3- move it by PVector ( not translate....)
> // -4- make mouse PVector
> // -5- calc min distance between mouse and obj PVector array
> // -6- draw obj 
> // -7- and line ( obj(nearest) , mouse )
> // -8- print distance near mouse pos
> // -9- make obj fancy ( https://en.wikipedia.org/wiki/Lissajous_curve ?)
> // -10- export to SVG use key [r]
> 
> import processing.svg.*;
> boolean record;
> String outfilename = "data/oneframe.svg";
> 
> int steps = 360;
> PVector[] myobj = new PVector[steps];
> float mind, ang, my_ra = 100, my_rb = 50;
> PVector mouse = new PVector(0, 0);
> int nearest = 0;
> 
> void make_obj(float posX, float posY) {
> for (int i =0; i<steps; i++) {
> ang = TWO_PI*i/float(steps);
> myobj[i]= new PVector(
> // original ellipse
> // my_ra * sin(ang), 
> // my_rb * cos(ang)
> my_ra * sin(ang)+my_rb * cos(ang*3)/5, 
> my_rb * cos(ang)+my_ra * sin(ang*7)/3
> );
> }
> // move it
> PVector moveto = new PVector(posX, posY);
> for (int i =0; i<steps; i++) {
> myobj[i] = myobj[i].add(moveto);
> }
> }
> 
> int calc_min_mouse_dist() {
> int minpos = -1;
> mind = 10000;
> 
> for (int i =0; i<steps; i++) {
> float d = myobj[i].dist(mouse);
> if ( d < mind ) { 
> mind = d;
> minpos = i;
> }
> }
> return minpos;
> }
> 
> void draw_obj() {
> beginShape();
> stroke(0, 200, 0);
> strokeWeight(2);
> noFill(); //fill(0,0,200);
> for (int i =0; i<steps; i++) vertex(myobj[i].x, myobj[i].y);
> endShape(CLOSE);
> 
> // draw mouse
> stroke(200, 0, 0);
> line(myobj[nearest].x, myobj[nearest].y, mouse.x, mouse.y);
> fill(200, 0, 0);
> text(int(mind), mouse.x+10, mouse.y-10); // ?? not work inside filled ellipse
> }
> 
> void setup() {
> size(300, 300);
> make_obj(120, 200); //width/2,height/2);
> println("use: key [r] for print to svg file");
> }
> 
> void draw() {
> if (record) {
> beginRecord(SVG, outfilename); //"data/frame-####.svg");
> }
> 
> background(200, 200, 0);
> draw_obj();
>   
> if (record) {
> endRecord();
> record = false;
> println("pls find "+outfilename);
> }
> 
> }
> 
> void mouseMoved() {
> mouse.set(mouseX, mouseY);
> nearest = calc_min_mouse_dist();
> }
> 
> void keyReleased() {
> if ( key == 'r' ) record = true;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![grshch](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@grshch](https://discourse.processing.org/u/grshch)\
**Post date:** [January 5, 2019, 9:37am UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/5 "2019-01-05T09:37:30Z")

</div>

I mean how to get an array of XYpoints from loadShape(“xxx.svg”)?  
not export svg

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 5, 2019, 11:17am UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/6 "2019-01-05T11:17:17Z")

</div>

so now it looks like i completely misunderstood your question?  
forget all above

pls post your code here using

```auto
</>

```

formatter  
and also provide the needed file.

---

<div class="post-metadata">

**Author:** ![grshch](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@grshch](https://discourse.processing.org/u/grshch)\
**Post date:** [January 5, 2019, 12:08pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/7 "2019-01-05T12:08:11Z")

</div>

Thanks for the patience 🙂  
This is not completely misunderstanding, you help a lot.  
Right now code looks like this. But it is not working because of NullPointerException error!

Can’t upload .svg file, but it is like this

 ![05](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/86c1da3cf7cd4848b67cce134673b16daa0ca376.png)

```auto
import geomerative.*;

RShape text;
RPoint [] points;
PVector[] Vpoints;
PVector mouse = new PVector(0,0);

int nearest = 0;

void make_obj(float posX, float posY) {
  for (int i=0; i < points.length; i++) {
    Vpoints [i] = new PVector (points[i].x,points[i].y);
  }
  PVector moveto = new PVector(posX,posY);
  for (int i =0;i<points.length;i++) {
    Vpoints[i] = Vpoints[i].add(moveto);
  }
}

int calc_min_mouse_dist() {
  int minpos = -1;
  float mind = 10000;
  
  for (int i =0;i<points.length;i++) {
    float d = Vpoints[i].dist(mouse);
    if ( d < mind ) { 
      mind = d;
      minpos = i;
    }
  }
  return minpos;
}

void draw_obj() {
  beginShape();
  stroke(0,200,0);
  strokeWeight(3);
  fill(0,0,200);
  for (int i=0 ; i<points.length; i++) {
    vertex(Vpoints[i].x, Vpoints[i].y);
  }
  endShape(CLOSE);
  
  // draw mouse
  stroke(200,0,0);
  line(Vpoints[nearest].x,Vpoints[nearest].y,mouse.x,mouse.y);
}

void mouseMoved() {
  mouse.set(mouseX,mouseY);
  nearest = calc_min_mouse_dist();
}

void setup () {
  size (640,480);
  noLoop();
  
  RG.init(this);
  
  text = RG.loadShape ("sample_text.svg");
  points = text.getPoints();
  
  ellipseMode(CENTER);
}

void draw () {
  println (points.length);
  
   draw_obj();
  
}

```

This is actually your code, but instead of using vertex for draw I used geomerative library to load points from svg file to an array

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 5, 2019, 12:29pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/8 "2019-01-05T12:29:38Z")

</div>

a svg file is text!  
so you can post it ( its content ) here same as like code

anyhow i was able to combine the  
processing loadshape svg example with the  
geomerative library  
and my mouse line of min distance code

```auto
// https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/7

import geomerative.*;

RShape myshape;
RPoint [] points;
boolean diagpoints = true;
RPoint mouse = new RPoint(0,0);

float mind;
int nearest = -1;

int calc_min_mouse_dist() {
  int minpos = -1;
  mind = 10000;

  for (int i =0; i<points.length; i++) {
    float d = points[i].dist(mouse);
    if ( d < mind ) { 
      mind = d;
      minpos = i;
    }
  }
  return minpos;
}

void setup () {
  size (640,480); 
  RG.init(this);
  myshape = RG.loadShape ("data/bot1.svg");
  points = myshape.getPoints();
  println(points.length);
  //printArray(points);
}

void draw() {
  background(200,200,0);
  myshape.draw();
  // If there are any points
  if(points != null ){
    noFill();
    stroke(0,200,0);
    beginShape();
  if ( diagpoints ) for(int i=0; i<points.length; i++) vertex(points[i].x, points[i].y);
    endShape();
  
    fill(0,0,200);
    stroke(0,0,200);
  if ( diagpoints ) for(int i=0; i<points.length; i++) ellipse(points[i].x, points[i].y,2,2);  
    draw_mouseline();
  }
}

void mouseMoved() {
  mouse= new RPoint(float(mouseX), float(mouseY));
  nearest = calc_min_mouse_dist();
}

void draw_mouseline() {
  stroke(200, 0, 0);
  if (nearest > -1 ) line(points[nearest].x, points[nearest].y, mouse.x, mouse.y);
  fill(200, 0, 0);
  text(int(mind), mouse.x+10, mouse.y-10); // ?? not work inside filled ellipse
 
}

```

![2019-01-05_20-42-38_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/033fb8dac120d591b7c3df9e25172566bf5dee96.png)

so if your svg file contains POINTS and not TEXT it will work.

---

<div class="post-metadata">

**Author:** ![grshch](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@grshch](https://discourse.processing.org/u/grshch)\
**Post date:** [January 5, 2019, 2:20pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/9 "2019-01-05T14:20:13Z")

</div>

Thank you! It works perfectly  
But i didn’t get what the diagpoints do. For what it needed?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 5, 2019, 2:22pm UTC](https://discourse.processing.org/t/calculate-distance-from-point-to-closest-point-of-shape/7201/10 "2019-01-05T14:22:00Z")

</div>

> [@grshch](#):
>
> what the diagpoints do.

its to show the points,  
i made a boolean you can set to false, to disable that