Circle radius increase decrease pointer behaves abnormally

[Owais1723 3 Likes (Newbie)]

Hello Everyone I hope you are doing well. I have a problem relating to the circle radius increase decrease pointer. so it works like when you drag the pointer away from the circle's center point it increases its radius and decreases when dragging towards the center point. it works fine but the pointer moves away from the circle border when you drag your mouse away from the pointer on the x-axis. I have provided the code pen so you can check it out thankyou ❤️.

See the Pen yLRxPpm by Owais-Ahmad (@Owais-Ahmad) on CodePen

[Rodrigo 5,883 Likes (Superhero)]

Hi,

 

The problem is in the math you're doing for calculating the distance constant. In an ellipse you'll need both the values on the X and Y axis for that, but a triangle circumscribed in a circle it's always an Isosceles triangle, that means both sizes are equal an the angles are 45 degrees:

On top of that you are overcomplicating this quite a bit IMHO. This is far simpler, cleaner, seems to work the way you intend and you don't have to worry about the user dragging on the X axis:

let radius = gsap.getProperty(table, "r");
const changeCircleSize = Draggable.create(dot, {
  type: "y",
  onDragStart: function () {
    dragCircle[0].disable();
  },
  onDrag: function () {
    table.setAttribute("r", Math.abs(radius - this.y));
  },
  onDragEnd: function () {
    dragCircle[0].enable();
  }
});

Here is a fork of your demo:

See the Pen poxOpLN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Owais1723 3 Likes (Newbie)]

On 5/16/2023 at 9:00 PM, Rodrigo said:

Hi,

 

The problem is in the math you're doing for calculating the distance constant. In an ellipse you'll need both the values on the X and Y axis for that, but a triangle circumscribed in a circle it's always an Isosceles triangle, that means both sizes are equal an the angles are 45 degrees:

On top of that you are overcomplicating this quite a bit IMHO. This is far simpler, cleaner, seems to work the way you intend and you don't have to worry about the user dragging on the X axis:

let radius = gsap.getProperty(table, "r");
const changeCircleSize = Draggable.create(dot, {
  type: "y",
  onDragStart: function () {
    dragCircle[0].disable();
  },
  onDrag: function () {
    table.setAttribute("r", Math.abs(radius - this.y));
  },
  onDragEnd: function () {
    dragCircle[0].enable();
  }
});

Here is a fork of your demo:

 

 

 

Hopefully this helps.

Happy Tweening!

Man that was smooth. I didn't think about it that way thank you so much.  And more favour hwo to prevent the radius decrease upto only 20 radius it shouldn't be able to decrease than 20.

[PointC 14,465 Likes (Superhero)]

Sounds like a good use case for clamp()

 

See the Pen da853be09052e3296cc321b566e75353 by PointC (@PointC) on CodePen