Need help with some code involving moving and image with the touch command

I have been going through some youtube videos in order to learn the code for this app. While I must say this app is fantastic, there are times where finding information can be taxing. I am new to code myself but I have a basic idea of how it works. However, in some of the videos I have seen the code being used is not updated or not recognized in codea but may have been at some point.

So here is what I am trying to do. I have a very basic image that I just want to respond to the touch of my finger in order to move it around the screen. I have been successful with having it use the finger touch to jump to the location touched on the screen but I want it only to move when I touch inside of the image so i can drag it with my finger. The code below shows that the program should get the image size and automatically update it for the image used, but it will not move.

Any ideas?

As a side note - I would also like to know if there is a code to make an image stop at the edge of the screen when using the accelerometer or finger touch so that it doesnt go past the border of the ipad screen.

--This lets you move the image with your finger.


--Global Variables and will exist the entire time the program runs



imageName = ("SpaceCute:Beetle Ship")

imageSize = vec2(spriteSize(imageName))

imagePosition = vec2()


function setup()
    --Setup the display


    supportedOrientations(LANDSCAPE_LEFT)
    displayMode(FULLSCREEN)
    noFill()
    noSmooth()
    noStroke()
    pushStyle()
    
    imagePosition = vec2(WIDTH/2, HEIGHT/2)
    
end

function touched(touch)
    
    -- Local Variables
    local currentTouch = vec2(touch.x, touch.y)
    
    if(touch.state == BEGAN) then
        
    end
    
    if(touch.state == MOVING) then
        if( (imagePosition.x - imageSize.x/2) < CurrentTouch.x and --if the left side is smaller than where touched
            (imagePosition.x + imageSize.x/2) > CurrentTouch.x and
            (imagePosition.y - imageSize.y/2) < CurrentTouch.y and
            (imagePosition.y + imageSize.y/2) > CurrentTouch.y ) then
        
            imagePosition = CurrentTouch --Need to happen only if we are touching in the image
        end
        
    end
    
    if(touch.state == ENDED) then
        
    end
 

    
end

function draw()
    
    -- Local Variables
    
    
    --This is the background color
    background(0, 0, 0, 255)
    
    sprite("SpaceCute:Background", 512, 384, 1024, 768)
    sprite(imageName, imagePosition.x, imagePosition.y) 
    
end

Thank you for all of your help!!

Try something like this:

--This lets you move the image with your finger.

supportedOrientations(LANDSCAPE_LEFT)
displayMode(FULLSCREEN)

function setup() --Global Variables and will exist the entire time the program runs
    imageName = "SpaceCute:Beetle Ship"
    imageSize = vec2(spriteSize(imageName))
    
    imagePosition = vec2(WIDTH/2, HEIGHT/2)
    
    touching = false
end

function touched(touch)
    if touch.state == BEGAN then
        if math.abs(imagePosition.x - touch.x) <= imageSize.x / 2 and math.abs(imagePosition.y - touch.y) <= imageSize.y / 2 then
            touching = true
        end
    end
    
    if touching then
        imagePosition = imagePosition + vec2(touch.deltaX, touch.deltaY)
    end
    
    if touch.state == ENDED or touch.state == CANCELLED then
        touching = false
    end
end

function draw() --Setup the display
    background(0)
    
    noFill()
    noSmooth()
    noStroke()
    pushStyle()
    
    sprite("SpaceCute:Background", WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT)
    sprite(imageName, imagePosition.x, imagePosition.y) -- these are variables now that you can manipulate
end

Also, use three ~ around your code to have it properly formatted:

~~~

Your code here

~~~

Sky, that worked perfectly thank you for your assistance! Now forgive my lack of code knowledge, but is there a reason why the code I was using would not be working? It seems, from a programming side that it makes sense. I am just not sure if its just not language that codea understands.

Like the following:

if(touch.state == MOVING) then
        if( (imagePosition.x - imageSize.x/2) < CurrentTouch.x and --if the left side is smaller than where touched
            (imagePosition.x + imageSize.x/2) > CurrentTouch.x and
            (imagePosition.y - imageSize.y/2) < CurrentTouch.y and
            (imagePosition.y + imageSize.y/2) > CurrentTouch.y ) then

            imagePosition = CurrentTouch --Need to happen only if we are touching in the image
        end

    end

Secondly, As a side note - I would also like to know if there is a code to make an image stop at the edge of the screen when using the accelerometer or finger touch so that it doesnt go past the border of the ipad screen.

@jpwerner18 Here’s another version for you to look over.


displayMode(FULLSCREEN)
supportedOrientations(LANDSCAPE_ANY)

function setup()
    img=readImage("SpaceCute:Beetle Ship")
    x1,y1=WIDTH/2,HEIGHT/2
end

function draw()
    background(0)
    sprite("SpaceCute:Background",WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
    sprite(img,x1,y1)
end

function touched(t)
    if t.state==MOVING then
        if math.abs(t.x-x1)<img.width/2 and math.abs(t.y-y1)<img.height/2 then
            x1=t.x
            y1=t.y
        end
    end
end

@jpwerner18 - I have some tutorials and eBooks that may help you, here

https://coolcodea.wordpress.com/2013/06/19/index-of-posts/

I recommend the ebooks, starting with Lua then Codea, or if you want to get right into it, start with the blog posts in sequence

@Ignatz thank you so much that is exactly what I was looking for!

I am still running into one other issue with the borders on my iPad. I’m trying to find code so that the sprite will hit a “wall” when it hits the side of the screen so it doesn’t roll off. Any ideas?

Here you go:

-- if the image position - 1/2 its width is <= 0 it must be touching the wall on the left
    if imagePosition.x - imageSize.x/2 <= 0  then 
        imagePosition.x = imageSize.x/2 
    end
    -- if the image position + 1/2 its width is >= the width of the screen it must be touching the wall on the right
    if imagePosition.x + imageSize.x/2 >= WIDTH  then 
        imagePosition.x = WIDTH-imageSize.x/2 
    end
    -- if the image position - 1/2 its height is <= 0 it must be touching the wall on the bottom
    if imagePosition.y - imageSize.y/2 <= 0  then
        imagePosition.y = imageSize.y/2 
    end
    -- if the image position + 1/2 its height is >= the width of the screen it must be touching the wall on the top
    if imagePosition.y + imageSize.y/2 >= HEIGHT  then 
        imagePosition.y = HEIGHT-imageSize.y/2 
    end

Paste this directly below function touched(touch). I think my comments did a fine job explaining it, but If you have any questions feel free to ask

You guys are awesome thanks!