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

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

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

``````// 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++) {
}
}

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();
}

``````

update
``````// 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++) {
}
}

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();
}

``````
2 Likes

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

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 …

type or .svg shapes

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

rev10
``````// 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++) {
}
}

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;
}

``````
1 Like

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

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

pls post your code here using

``````</>
``````

formatter
and also provide the needed file.

1 Like

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

``````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++) {
}
}

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);

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

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

``````// 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);
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

}

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

1 Like

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

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

1 Like