How to constrain position of dragged graphic to path of a circle?
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
How to constrain position of dragged graphic to path of a circle?
Hi all,
I want the user to be able to drag a small graphic around the diameter a circular oval - in effect constrain the position of the small graphic so that when the user grabs it, i can only be dragged and positioned somewhere along the circle's diameter.
i presume this will require cos and sin functions but not quite managing this...
Any suggestions?
Many thanks
Stam
I want the user to be able to drag a small graphic around the diameter a circular oval - in effect constrain the position of the small graphic so that when the user grabs it, i can only be dragged and positioned somewhere along the circle's diameter.
i presume this will require cos and sin functions but not quite managing this...
Any suggestions?
Many thanks
Stam
Re: How to constrain position of dragged graphic to path of a circle?
Can you create a template circle the same colour as the background and check that the mouse is “within” the graphic?
Kelly
Kelly
Re: How to constrain position of dragged graphic to path of a circle?
Malte's Animation Engine does this, check the store. I'm not sure how licensing will work going forward (it's dual licensed at present).
Otherwise a 99% transparent template to check the position is "within" as suggested by Kelly. (And a smaller template inside to check that it is "not within" to keep it at the edge.) But that might get somewhat tricky to keep a smooth movement going.
Otherwise a 99% transparent template to check the position is "within" as suggested by Kelly. (And a smaller template inside to check that it is "not within" to keep it at the edge.) But that might get somewhat tricky to keep a smooth movement going.
Re: How to constrain position of dragged graphic to path of a circle?
Thanks both,
the problem with this approach is that 'within the rect' and actually being on the circumference of the circle are two different things, since the rect is, well, a rect and not a circle
Would probably need geometric/trigonometric math, but i'm not up to speed with that or how to transform that into coordinate data for the small graphic.
Will look at animation engine, but seems a bit heavyweight to have that whole lib just for this tiny function. I also looked at the radiaDialOmatic stack on revonline, but that wasn't easy to penetrate either...
I'll keep looking (although it's relatively low priority) - but if someone has any ideas please do reach out
the problem with this approach is that 'within the rect' and actually being on the circumference of the circle are two different things, since the rect is, well, a rect and not a circle
Would probably need geometric/trigonometric math, but i'm not up to speed with that or how to transform that into coordinate data for the small graphic.
Will look at animation engine, but seems a bit heavyweight to have that whole lib just for this tiny function. I also looked at the radiaDialOmatic stack on revonline, but that wasn't easy to penetrate either...
I'll keep looking (although it's relatively low priority) - but if someone has any ideas please do reach out
-
- Livecode Opensource Backer
- Posts: 9454
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to constrain position of dragged graphic to path of a circle?
Use sine and cosine to populate a list field [let's call it "SHOPPING"] with locations of points on the circumference of a circle.
Set a graphic object's points to the lines of the list field.
Set up a circular graphic [let's call it "BALL"] containing this sort of script:
Set a graphic object's points to the lines of the list field.
Set up a circular graphic [let's call it "BALL"] containing this sort of script:
Code: Select all
on mouseDown
drag me
end mouseDown
on mouseUp
put (the left of grc "BALL" + ((the width of grc "BALL")/2) into LAT
put (the bottom of grc "BALL" + ((the height of grc "BALL")/2) into VERT
put (LAT & "," & VERT) into HERE
put 1 into CHEAP
repeat until line CHEAP of fld "SHOPPING" is empty
if line CHEAP of fld "SHOPPING" = HERE then
set the loc of grc "BALL" to HERE
end if
add 1 to CHEAP
end repeat
end mouseUp
Re: How to constrain position of dragged graphic to path of a circle?
Thanks Richmond... I'm not sure i understand the code however - probably my old brain struggles with incongruous variable names as well. I don't know that it helps callings stuff random names (well if i'm honest it's blindingly confusing )
Did you actually get this to work, or is it a thought experiment? (if you did get this to work, could you post a stack please?)
I've been experiementing with a different take on this, mainly to get my understanding of trigonometric functions in coding up to to speed.
The first impediment i found is that you have to convert angles from degrees to radians (radian = angle * pi / 180) before using in sin() or cos() functions.
As a test, i created a simple stack with a circle called "circle", a small marker graphic (another small circle called 'knob'). I added a slider (min 0, max 360) to change the arcAngle of 'circle' and wanted the 'knob' to move with the moving arc.
To calculate the centre location of the marker graphic based on the arcAngle of a given circular oval:
There is a great explanation of the trigonometric functions used to calculate the x,y on stackExchange: https://gamedev.stackexchange.com/quest ... cular-path
From the slider, i change the arcAngle and pass the long id of the circle to getXYfromAngleOfCircle to get the loc for the marker graphic:
Moving the slider changes the arc showing and moves the graphic 'knob' exactly across the circumference.
I'm trying to get clear in my head if and how this can be used to constrain dragging of the small graphic...
Anyway, my tiny stack attached.
Did you actually get this to work, or is it a thought experiment? (if you did get this to work, could you post a stack please?)
I've been experiementing with a different take on this, mainly to get my understanding of trigonometric functions in coding up to to speed.
The first impediment i found is that you have to convert angles from degrees to radians (radian = angle * pi / 180) before using in sin() or cos() functions.
As a test, i created a simple stack with a circle called "circle", a small marker graphic (another small circle called 'knob'). I added a slider (min 0, max 360) to change the arcAngle of 'circle' and wanted the 'knob' to move with the moving arc.
To calculate the centre location of the marker graphic based on the arcAngle of a given circular oval:
Code: Select all
function getXYfromAngleOfCircle pCircle // the long id of the CIRCULAR oval
local tAngle, tRadius, x, y, tLoc
put the width of pCircle/2 into tRadius
put item 1 of the loc of pCircle into x
put item 2 of the loc of pCircle into y
put (360 - the arcAngle of pCircle) * (pi/180) into tAngle
put x + cos(tAngle) * tRadius into item 1 of tLoc
put y + sin(tAngle) * tRadius into item 2 of tLoc
return tLoc
end getXYfromAngleOfCircle
From the slider, i change the arcAngle and pass the long id of the circle to getXYfromAngleOfCircle to get the loc for the marker graphic:
Code: Select all
on scrollbarDrag pNewPosition
lock screen
set the arcAngle of grc "circle" to the thumbposition of me
set the location of grc "knob" to getXYfromAngleOfCircle(the long id of grc "circle")
end scrollbarDrag
I'm trying to get clear in my head if and how this can be used to constrain dragging of the small graphic...
Anyway, my tiny stack attached.
- Attachments
-
- radial.livecode.zip
- (1.11 KiB) Downloaded 147 times
-
- VIP Livecode Opensource Backer
- Posts: 9752
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to constrain position of dragged graphic to path of a circle?
This has been a topic before. I made a demo that used a regular polygon of hundreds of sides. This looks exactly like a circle, and can be sized to match any desired actual circle. The, point is that such a polygon contains lots of actual points, and the loc of any other object can be set to any series of adjacent points as required. Timing of the setting process is up to you.
If you need me to, I will try to find that demo, but perhaps you get the point.
Craig
If you need me to, I will try to find that demo, but perhaps you get the point.
Craig
Re: How to constrain position of dragged graphic to path of a circle?
Thanks Craig - getting the points isn't hard; after all:dunbarx wrote: ↑Mon Sep 20, 2021 2:13 pmThis has been a topic before. I made a demo that used a regular polygon of hundreds of sides. This looks exactly like a circle, and can be sized to match any desired actual circle. The, point is that such a polygon contains lots of actual points, and the loc of any other object can be set to any series of adjacent points as required. Timing of the setting process is up to you.
If you need me to, I will try to find that demo, but perhaps you get the point.
Craig
Code: Select all
get the effective points of graphic "circle"
The question that i still haven't quite got is how, when dragging a small marker graphic, to constrain it's movements so that in only moves along the circumference of said circle.
I know it should be possible (after all, there is a bit of a masterclass on this in the stack RadialDialOmatic available in sample stacks - but i don't understand it )
Grateful for any suggestions (or if you have a stack showing this please do share!)
Stam
-
- VIP Livecode Opensource Backer
- Posts: 9752
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to constrain position of dragged graphic to path of a circle?
Stam.
Check out this stack I just made. Perhaps I am not understanding?
Craig
Check out this stack I just made. Perhaps I am not understanding?
Craig
-
- VIP Livecode Opensource Backer
- Posts: 9752
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to constrain position of dragged graphic to path of a circle?
Stam.
I see that I did not pick out "oval" when you said "circular oval". Anyway, let me know what still need to do with the "effective points" sequencing thingie.
Craig
I see that I did not pick out "oval" when you said "circular oval". Anyway, let me know what still need to do with the "effective points" sequencing thingie.
Craig
Re: How to constrain position of dragged graphic to path of a circle?
Thanks Craig - i appreciate it but it was not quite what i was looking for.
I can make the graphic move programmatically along predefined points, but that's not the question.
The question is that is the users grabs the maker graphic and moves it, how to make sure it stays on the circle and just moves around it's circumference while the user is dragging it. More like a radial dial?
Or am i missing the obvious? (fully possible)
Anyway it occurred to me that i had already figured out above how to position the marker based on the arcAngle of the circle. Then it dawned on me that all i needed to do was calculate the angle between the marker (mouseLoc) and the x axis, in the same fashion arcAngle would work and pass that angle to my previous handler.
This solution works.
It works fantastically in 9.6.2 RC2 - super quick.
Unfortunately from 9.6.2 RC3 onwards, including the illustrious and premium priced 9.6.4, there has been a significant slowing of anything involving graphics (bug reported). This can be mitigated with frivolous use of 'lock screen' but doesn't quite make it as good as on 9.6.2 RC2.
This means that using LC more recent that 9.6.2 RC2 is slower, and a slight 'ghost' of the marker appears transiently as the user is dragging the marker.
Not sure what to do about that...
For the curious, to calculate the angle between the dragged marker and the horizontal plane in the same way as an arcAngle, i found helpful advice on StackOverflow
The handler is to calculate the angle is:
Code: Select all
function getAngleFromMouselocForCircle pCircle
local x1, y1, x2, y2, x3, y3, tAngle
put item 1 of the loc of pCircle into x1
put item 2 of the loc of pCircle into y1
put item 1 of the loc of pCircle + the width of pCircle/2 into x2
put item 2 of the loc of pCircle into y2
put item 1 of the mouseLoc into x3
put item 2 of the mouseLoc into y3
put atan2(y3- y1, x3 - x1) - atan2(y2 - y1, x2 - x1) into tAngle // in radians, needs transform
put 180 + round ( tAngle * (180 / pi), 0) into tAngle // 1st transform to make it suitable for arcAngle
if tAngle <= 180 then // 2nd transform to make it suitable for arcAngle
put 180 - tAngle into tAngle
else
put 360 - (tAngle - 180) into tAngle
end if
return tAngle
end getAngleFromMouselocForCircle
Code: Select all
on mouseDown
lock screen
grab me
end mouseDown
on mouseMove
if the mouse is up then pass mouseMove
lock screen
setMarkerPosition
end mouseMove
on mouseUp
setMarkerPosition
end mouseUp
command setMarkerPosition
lock screen
set the arcAngle of grc "circle" to getAngleFromMouselocForCircle(the long id of grc "circle")
set the loc of me to getXYfromAngleOfCircle(the long id of grc "circle")
set the thumbPosition of scrollbar "scrollbar" to the arcAngle of graphic "circle" // cosmetic
end setMarkerPosition
My test stack is attached - drag the little blue circle
- Attachments
-
- radial.livecode.zip
- (1.61 KiB) Downloaded 150 times
Re: How to constrain position of dragged graphic to path of a circle?
This question inspired me to try out the trig I have not used for a long time! Is this the kind of thing you are looking for?
Click on the small circle and drag it and it, it should follow the large circle.
Elanor
Click on the small circle and drag it and it, it should follow the large circle.
Elanor
- Attachments
-
- circle.livecode.zip
- (1.12 KiB) Downloaded 155 times
Elanor Buchanan
Software Developer
LiveCode
Software Developer
LiveCode
Re: How to constrain position of dragged graphic to path of a circle?
Wow thanks Elanor - that does perform much better!
I was looking at changing the arc as well but can work on that.
One minor issue with the code - if you swirl the mouse around a lot and near the centre you can trigger a crash (divide by zero error)
I think this relates to the line
Code: Select all
put atan(tDeltaY/tDeltaX) into tAngle
Re: How to constrain position of dragged graphic to path of a circle?
Oh yes! That is probably when the mouse is on the centre line, so deltaX is 0, I must not have swirled my mouse enough to catch it!
Elanor
Elanor
Elanor Buchanan
Software Developer
LiveCode
Software Developer
LiveCode
-
- VIP Livecode Opensource Backer
- Posts: 9752
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to constrain position of dragged graphic to path of a circle?
Lovely, Elanor.
There is a slight issue with the handler, though. If you run roughshod with the cursor, the variable tDeltaX can now and then be 0, and that throws an error at line 19. It is an issue with hard coding a value into tCentreX (275) , where the mouseH can also be that value.
I only mention this because I am a sloppy tester of my own work, and I suspect you are not.
Craig
There is a slight issue with the handler, though. If you run roughshod with the cursor, the variable tDeltaX can now and then be 0, and that throws an error at line 19. It is an issue with hard coding a value into tCentreX (275) , where the mouseH can also be that value.
I only mention this because I am a sloppy tester of my own work, and I suspect you are not.
Craig