help on snap to a point or a magnet

[helloworld2013d]

I’m making an app and I want to make an image “snap” to a point.

I have an idea but I don’t really know the “right” code.

The idea is this…

I create the image in the createScene-- imageA, in x=100, y=100

then I create another image, imageB, x=800, y=600.

I have a function that I can move the image B where ever I want

local function plantTouch( event )     if "began" == event.phase then         plant.isFocus = true         --audio.play (testTouch)         plant.x0 = event.x - plant.x         plant.y0 = event.y - plant.y     elseif bed.isFocus then         if "moved" == event.phase then             plant.x = event.x - plant.x0             plant.y = event.y - plant.y0         elseif "ended" == phase or "cancelled" == phase then             plant.isFocus = false         end     end     -- Return true if the touch event has been handled.     return true end

What I need is a function like this –

local function snapImage (   )

     

      if imageB.x == imageA.x or 20 px more or less in any direccion then

            

              imageB.x = imageA.x

      end

end

This is the idea, but I don’t really know how to make it work

Also, where do I put the function, all the way up

or make a runtime:listener and wait until the imageB.x is close to imageA.x

Please I need help.

Thanks

[mpappas]

Here’s a quick hint on the math aspect of snapping

[lua]

    if(  math.abs(imageB.x - imageA.x) < 20 ) then         – Is x within 20 pix? (either way, using math.abs)

        if(  math.abs(imageB.y - imageA.y) < 20 ) then    – is y within 20 pix?

            – Yes. It is within 20 on both x and y…

            – these tests can be done separately if you want x,y to snap independently of each other…

            – There’s a lot of ways to make the coords snap, here’s one:

            imageB.y = math.floor(imageB.y / 20) * 20   – divide by 20, throw out remainder, multiply back up…

            – or instead of snapping to 20 pix boundaries, to snap to imageA is like so

            imageB.x = imageA.x

            imageB.y = imageA.y

        end

    end

[\lua]

You should look at lua.org, they’ve got a lot of info on lua in general, and some nice handy cheat sheets for the standard lua math and other libraries. Good place to start when your looking for some of the basic lua tools to grab onto. Best of luck.

[helloworld2013d]

Hi mpappas…

Thanks for your time to write this…I wish I knew as much as you…

but I don’t.

I’m very new at programming.

I copy your code like this

if(math.abs(bed25.x - bed.x) \< 20 ) then &nbsp;&nbsp; &nbsp;if(math.abs(bed25.y - bed.y) \< 20 ) then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.x = bed.x &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.y = bed.y &nbsp;&nbsp; &nbsp;end end

in the createScene – Right under the creation of the images.

And it doesn’t work.

I also try this one

if(math.abs(bed25.x - bed.x) \< 20 ) then &nbsp;&nbsp; &nbsp;if(math.abs(bed25.y - bed.y) \< 20 ) then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.y = math.floor(bed25.y / 20) \* 20 &nbsp;&nbsp; &nbsp;end end

And it doesn’t work.

I went to lua.org. I put a post there to see what happend.

But I do need more help.

I hope you have some time to help me out. Thanks!

[helloworld2013d]

I went to corona sdk to find out more about math.abs ( I don’t know what’s “abs”)

I saw a simple page with this

local a = math.abs(153) – Sets a to 153
local b = math.abs(-15) – Sets b to 15
local c = math.abs(12.234) – Sets c to 12.234
local d = math.abs(-9.23) – Sets d to 9.23

If math.abs sets the variable “a” to a number

isn’t it the same as saying

local a = 153

Why do you need math.abs?

[mpappas]

Hi helloworld -

Glad to hear you’ve got lua.org as a reference for starters. Let’s try your snapping one variable at a time, something like this.

[lua]

local deltaX = math.abs(bed25.x - bed.x)

print( "bed25.x, bed.x == ", bed25.x, bed.x)

print("deltaX == ", deltaX)

if( deltaX < 20 ) then

    print(" – within 20 x pixels - ", bed25.x, bed.x)

    bed25.x = math.floor(bed25.x / 20) * 20

    print(" — New bed25.x == ", bed25.x)

else

    print(" -Not snapped, deltaX > 20")

end

[/lua]

A healthy dose of print statements will help you understand how the math.abs() is working, and also help you to understand where the code is flowing (and why/why not where you want it to).

[helloworld2013d]

I put this function in my code.

In the terminal I see the print – [12611:f03] bed25.x, bed.x ==     410    480

[12611:f03] deltaX ==     70

I did not know how you got the 70, now I get it.

so

if( deltaX < 20 ) then – if 70 is smaller than 20 then – so it is not, so it will not “snap” right?

then the math.floor – I don’t get this?

I guess I’m expecting that as soon as the image is 20 px close to the x point, the computer will “take it from my mouse” and “snap it” to the x point.

But it’s not happening.

Maybe it has to do with the function that I have to move the image in the first place

because it has set.focus

local function bedTouch( event )     if "began" == event.phase then         audio.play (caau)         bed.isFocus = true         txCa.isVisible = true         local function resetAlmohada ()             txCa.isVisible = false             txCa.y = 730         end         transition.to(txCa, {time=2000, y=788, onComplete=resetAlmohada})                  bed.x0 = event.x - bed.x         bed.y0 = event.y - bed.y     elseif bed.isFocus then         if "moved" == event.phase then             bed.x = event.x - bed.x0             bed.y = event.y - bed.y0         elseif "ended" == phase or "cancelled" == phase then             bed.isFocus = false         end     end     -- Return true if the touch event has been handled.     return true end

I’m trying, but I don’t get it. I hope it’s not too advanced for me

[mpappas]

Yes, it looks like there’s a few things you’re going to have to sort through in order to get it to function exactly how you want.

Getting the coordinates to snap to certain values is one part of it. Regarding the math.floor – forget the math.floor for now, it sounds like you want one object to snap onto the other - I was thinking you wanted it to snap to a regularly spaced grid… Anyways…

The other part of the overall problem is doing the adjustments to the dragged objects coords at the right times / during the right input event phases (the code you conveniently showed above helps a lot to understand how / what you’re doing).

From the description of how it sounds like you want it to work, you probably want to do the distance check (the delta x, y check in code above), and if it is in your distance range, set the dragged objects coordinates to match the target object (so it snaps onto it), and then end the focus. Does that sound like what your aiming for?

If that’s the idea – then do the distance check in your “moved” phase, if it matches/is close enough, set the coords the same, and end the input event… yes?

[helloworld2013d]

I don’t understand what you are saying…

But I’m trying something different, it may seems to work, but not exactly.

in the above function --bedTouch

I can move the image.

When I’m moving it (inside the – if “moved” == event.phase

I use this

if rug.x == rug25.x or rug.y == rug25.y then             print ("good")             transition.to(rug, {time=100, x=604, y=672})             audio.play (juau)             rug:removeEventListener ("touch", rugTouch)             end

(I put rug instead of bed, but it’s the same idea, just in another object.)

it works fine but I want to use “and” instead of “or”

If this image.x is equal to this other image.x “AND” this image.y is equal to this other image.y then

Right now is if this.x is equal to other.x “OR” bla bla bla

I don’t want this OR this

I want this AND this.

But when I put and in the place of or – it doesn’t work.

Is there a way to write that?

[mpappas]

Here’s a quick hint on the math aspect of snapping

[lua]

    if(  math.abs(imageB.x - imageA.x) < 20 ) then         – Is x within 20 pix? (either way, using math.abs)

        if(  math.abs(imageB.y - imageA.y) < 20 ) then    – is y within 20 pix?

            – Yes. It is within 20 on both x and y…

            – these tests can be done separately if you want x,y to snap independently of each other…

            – There’s a lot of ways to make the coords snap, here’s one:

            imageB.y = math.floor(imageB.y / 20) * 20   – divide by 20, throw out remainder, multiply back up…

            – or instead of snapping to 20 pix boundaries, to snap to imageA is like so

            imageB.x = imageA.x

            imageB.y = imageA.y

        end

    end

[\lua]

You should look at lua.org, they’ve got a lot of info on lua in general, and some nice handy cheat sheets for the standard lua math and other libraries. Good place to start when your looking for some of the basic lua tools to grab onto. Best of luck.

[helloworld2013d]

Hi mpappas…

Thanks for your time to write this…I wish I knew as much as you…

but I don’t.

I’m very new at programming.

I copy your code like this

if(math.abs(bed25.x - bed.x) \< 20 ) then &nbsp;&nbsp; &nbsp;if(math.abs(bed25.y - bed.y) \< 20 ) then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.x = bed.x &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.y = bed.y &nbsp;&nbsp; &nbsp;end end

in the createScene – Right under the creation of the images.

And it doesn’t work.

I also try this one

if(math.abs(bed25.x - bed.x) \< 20 ) then &nbsp;&nbsp; &nbsp;if(math.abs(bed25.y - bed.y) \< 20 ) then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bed25.y = math.floor(bed25.y / 20) \* 20 &nbsp;&nbsp; &nbsp;end end

And it doesn’t work.

I went to lua.org. I put a post there to see what happend.

But I do need more help.

I hope you have some time to help me out. Thanks!

[helloworld2013d]

I went to corona sdk to find out more about math.abs ( I don’t know what’s “abs”)

I saw a simple page with this

local a = math.abs(153) – Sets a to 153
local b = math.abs(-15) – Sets b to 15
local c = math.abs(12.234) – Sets c to 12.234
local d = math.abs(-9.23) – Sets d to 9.23

If math.abs sets the variable “a” to a number

isn’t it the same as saying

local a = 153

Why do you need math.abs?

[mpappas]

Hi helloworld -

Glad to hear you’ve got lua.org as a reference for starters. Let’s try your snapping one variable at a time, something like this.

[lua]

local deltaX = math.abs(bed25.x - bed.x)

print( "bed25.x, bed.x == ", bed25.x, bed.x)

print("deltaX == ", deltaX)

if( deltaX < 20 ) then

    print(" – within 20 x pixels - ", bed25.x, bed.x)

    bed25.x = math.floor(bed25.x / 20) * 20

    print(" — New bed25.x == ", bed25.x)

else

    print(" -Not snapped, deltaX > 20")

end

[/lua]

A healthy dose of print statements will help you understand how the math.abs() is working, and also help you to understand where the code is flowing (and why/why not where you want it to).

[helloworld2013d]

I put this function in my code.

In the terminal I see the print – [12611:f03] bed25.x, bed.x ==     410    480

[12611:f03] deltaX ==     70

I did not know how you got the 70, now I get it.

so

if( deltaX < 20 ) then – if 70 is smaller than 20 then – so it is not, so it will not “snap” right?

then the math.floor – I don’t get this?

I guess I’m expecting that as soon as the image is 20 px close to the x point, the computer will “take it from my mouse” and “snap it” to the x point.

But it’s not happening.

Maybe it has to do with the function that I have to move the image in the first place

because it has set.focus

local function bedTouch( event )     if "began" == event.phase then         audio.play (caau)         bed.isFocus = true         txCa.isVisible = true         local function resetAlmohada ()             txCa.isVisible = false             txCa.y = 730         end         transition.to(txCa, {time=2000, y=788, onComplete=resetAlmohada})                  bed.x0 = event.x - bed.x         bed.y0 = event.y - bed.y     elseif bed.isFocus then         if "moved" == event.phase then             bed.x = event.x - bed.x0             bed.y = event.y - bed.y0         elseif "ended" == phase or "cancelled" == phase then             bed.isFocus = false         end     end     -- Return true if the touch event has been handled.     return true end

I’m trying, but I don’t get it. I hope it’s not too advanced for me

[mpappas]

Yes, it looks like there’s a few things you’re going to have to sort through in order to get it to function exactly how you want.

Getting the coordinates to snap to certain values is one part of it. Regarding the math.floor – forget the math.floor for now, it sounds like you want one object to snap onto the other - I was thinking you wanted it to snap to a regularly spaced grid… Anyways…

The other part of the overall problem is doing the adjustments to the dragged objects coords at the right times / during the right input event phases (the code you conveniently showed above helps a lot to understand how / what you’re doing).

From the description of how it sounds like you want it to work, you probably want to do the distance check (the delta x, y check in code above), and if it is in your distance range, set the dragged objects coordinates to match the target object (so it snaps onto it), and then end the focus. Does that sound like what your aiming for?

If that’s the idea – then do the distance check in your “moved” phase, if it matches/is close enough, set the coords the same, and end the input event… yes?

[helloworld2013d]

I don’t understand what you are saying…

But I’m trying something different, it may seems to work, but not exactly.

in the above function --bedTouch

I can move the image.

When I’m moving it (inside the – if “moved” == event.phase

I use this

if rug.x == rug25.x or rug.y == rug25.y then             print ("good")             transition.to(rug, {time=100, x=604, y=672})             audio.play (juau)             rug:removeEventListener ("touch", rugTouch)             end

(I put rug instead of bed, but it’s the same idea, just in another object.)

it works fine but I want to use “and” instead of “or”

If this image.x is equal to this other image.x “AND” this image.y is equal to this other image.y then

Right now is if this.x is equal to other.x “OR” bla bla bla

I don’t want this OR this

I want this AND this.

But when I put and in the place of or – it doesn’t work.

Is there a way to write that?

[JRQ]

Take a look at this post: http://developer.coronalabs.com/forum/2011/03/16/dropping-image-only-predefined-areas-seen-board-games

[helloworld2013d]

Thank you very much JRQ.

I have a new friend…you

it works really good…

if you know places where I can get little codes like that…

very simple, to the point and that I can just copy and paste in a black main.lua

and works!

this is better then a lot of books, I can just see the code, it works, and then study it

line by line to learn a lot.

Thanks you again, and let me know where I can see more sample codes like that

[JRQ]

Take a look at this post: http://developer.coronalabs.com/forum/2011/03/16/dropping-image-only-predefined-areas-seen-board-games

[helloworld2013d]

Thank you very much JRQ.

I have a new friend…you

it works really good…

if you know places where I can get little codes like that…

very simple, to the point and that I can just copy and paste in a black main.lua

and works!

this is better then a lot of books, I can just see the code, it works, and then study it

line by line to learn a lot.

Thanks you again, and let me know where I can see more sample codes like that