Trying to make slingshot graphic?

Solar2D General Questions/Discussion
#1

I am trying to make a slingshot graphic that shows a line leading from the object I want to sling to my finger, along with an arrow pointing in front of it. I have already done the line, and have a small circle that outlines the object, but can’t figure out how to make an arrow that points to the direction that it will go. My code is here: 

NewLine = display.newLine( LineStart.x, LineStart.y, event.x, event.y) NewLine.strokeWidth = 25 NewLine:setStrokeColor(.9,.6,.4,.5) NewCirc = display.newCircle( LineStart.x, LineStart.y, 35) NewCirc:setFillColor(.9,.6,.4)

Image example:  AYYaVOe.png

#2

Hi.

You can make an arrow like that with display.newPolygon (), if that’s an issue. Or just use an image or whatever.

I figure the question is more about getting it in the right position and orientation, though.

First off, during the “moved” phase you probably want to ignore ( event.x , event.y ) if it’s at ( object.x , object.y ). Also, if it’s there during “began” , shove LineStart down one pixel or something, so that the next steps don’t freak out when the line degenerates to a point.  :slight_smile:

Anyhow, one way to go about this would be to start with your line segment, going from ( event.x , event.y ) to ( object.x , object.y ), and get its length. Then make a copy of that and divide both components by its length, giving you a ray 1 unit long. Scale the components again by some amount, which will be the desired distance between the object and arrow centers, and use this final ray to move from one center to the other. Something like:

local dx, dy = object.x - event.x, object.y - event.y local length = math.sqrt(dx^2 + dy^2) dx, dy = dx / length, dy / length arrow.x, arrow.y = object.x + dx \* DistanceToArrow, object.y + dy \* DistanceToArrow

You’ll still probably want to orient the arrow. You can figure out the angle your ray is making with math.atan2 (). (You could actually use this angle to figure out the final  dx and dy in the above, but it’s fine as it is.) Then you just plug that into your object.

local angle = math.atan2(dy, dx) arrow.rotation = math.deg(angle) -- you might need to add, say, an integer multiple of 90, -- depending on your graphic
#3

Thank you so much for that answer, everything’s working fine now

#4

Hi.

You can make an arrow like that with display.newPolygon (), if that’s an issue. Or just use an image or whatever.

I figure the question is more about getting it in the right position and orientation, though.

First off, during the “moved” phase you probably want to ignore ( event.x , event.y ) if it’s at ( object.x , object.y ). Also, if it’s there during “began” , shove LineStart down one pixel or something, so that the next steps don’t freak out when the line degenerates to a point.  :slight_smile:

Anyhow, one way to go about this would be to start with your line segment, going from ( event.x , event.y ) to ( object.x , object.y ), and get its length. Then make a copy of that and divide both components by its length, giving you a ray 1 unit long. Scale the components again by some amount, which will be the desired distance between the object and arrow centers, and use this final ray to move from one center to the other. Something like:

local dx, dy = object.x - event.x, object.y - event.y local length = math.sqrt(dx^2 + dy^2) dx, dy = dx / length, dy / length arrow.x, arrow.y = object.x + dx \* DistanceToArrow, object.y + dy \* DistanceToArrow

You’ll still probably want to orient the arrow. You can figure out the angle your ray is making with math.atan2 (). (You could actually use this angle to figure out the final  dx and dy in the above, but it’s fine as it is.) Then you just plug that into your object.

local angle = math.atan2(dy, dx) arrow.rotation = math.deg(angle) -- you might need to add, say, an integer multiple of 90, -- depending on your graphic
#5

Thank you so much for that answer, everything’s working fine now