drawing program: how to draw ellipse to touch two points on the perimeter?

Programming Questions

ottenm

drawing program: how to draw ellipse to touch two points on the perimeter?

in Programming Questions • 1 year ago

I'm trying to draw an ellipse right under the user's mouse (as they drag). I'm close (below), but when I use the mouse coords for width and height, it draws a circle that fits inside where they're clicking instead of a circle whose perimeter is underneath the points they have clicked on. The problem becomes more significant as you draw a bigger circle (the second point goes pretty far to the right and below the circle).

Thanks for any help-

float startX, startY, x, y, w, h;

void setup() {
size(500,500);
noFill();
}

void draw () {
background(#808080);
ellipse(x, y, w, h);
}

void mouseDragged() {
x = (startX + mouseX) / 2.0;
y = (startY + mouseY) / 2.0;
w = abs(mouseX - startX);
h = abs(mouseY - startY);
}

void mousePressed() {
startX = mouseX;
startY = mouseY;
}

Replies(5)

jbum

Re: drawing program: how to draw ellipse to touch two points on the perimeter?

1 year ago

If you precede your call to ellipse with this:

rect (x-w/2,y-h/2,w,h);

You'll see what is going on. Your startX,startY and mouseX,mouseY are the corners of a rectangle, and you are drawing the ellipse that fits inside. What you want is an ellipse whose diameter or cross-section goes from startX,startY to mouseX,mouseY.

This is certainly doable, but now it's less clear what shape it should be? Should it be a perfect circle?

If so, the width and height of the ellipse is dist(startX,startY, mouseX,mouseY).

ottenm

Re: drawing program: how to draw ellipse to touch two points on the perimeter?

1 year ago

Thanks for your help jbum!

I was hoping to preserve the elliptical shape (allowing "flat" or "tall" ellipses instead of just perfect circles), but can't figure out how to scale the ellipse that's getting drawn so it draws right under the mouse. More accurately, I'm hoping to scale the rectangle that circumscribes around the ellipse so the ellipse touches (startX,startY) and (mouseX,mouseY).

I've just realized I need to adjust both the width/height parameters passed into ellipse() *and* the x/y parameters. The further I drag away from (startX,startY) the further outside the ellipse that point falls as well.

jbum

Re: drawing program: how to draw ellipse to touch two points on the perimeter?

1 year ago

The code to do a circle is simple enough.

void mouseDragged() {

x = (startX + mouseX) / 2.0;

y = (startY + mouseY) / 2.0;

// w = abs(mouseX - startX);

// h = abs(mouseY - startY);

w = dist(mouseX,mouseY,startX,startY);

h = w;

}

For anything else it isn't clear cut. This illustration was drawn in photoshop and isn't super precise, but it illustrates the problem. There isn't a simple way to determine what the appropriate width/height of the ellipse is. You have to make an arbitrary choice.

jbum

Re: drawing program: how to draw ellipse to touch two points on the perimeter?

1 year ago

Here's a similar program that uses splines. It doesn't draw ellipses, but gets close at times - experiment with different values for curveTightness.

float startX, startY;

float x1,x2,y1,y2;

void setup() {

size(500,500);

noFill();

}

void draw () {

background(255);

stroke(0);

curveTightness(-.5); //experiment with this value

beginShape();

curveVertex(x1,y1);

curveVertex(x2,y1);

curveVertex(x2,y2);

curveVertex(x1,y2);

curveVertex(x1,y1);

curveVertex(x2,y1);

curveVertex(x2,y2);

endShape();

}

void mouseDragged() {

x1 = startX;

x2 = mouseX;

y1 = startY;

y2 = mouseY;

}

void mousePressed() {

startX = mouseX;

startY = mouseY;

}

ottenm

Re: drawing program: how to draw ellipse to touch two points on the perimeter?

1 year ago

Very cool! Actually, close enough to call it perfect drawing-wise.

Is there a way to detect if a point is inside the spline/ellipse? I left that part out because I figured out how to do it with regular circles.

Perfect solution for what I described though. Thank you-

Top Reply