Touch state and scaler questions

Questions
1

A better explanation of the question is below.

My apologies in advance for having to download 4 images to see my example.

function setup()
    displayMode(FULLSCREEN)
    --sprites
    --Top Left 
    imageName = asset.documents.Dropbox.Red_Info_Button
    imageSize = spriteSize(imageName)
    scaler = .50
    x,y=WIDTH*.81+5,HEIGHT*.44-3
    --Bottom Left 
    imageName2 = asset.documents.Dropbox.Teal_Info_Button
    imageSize2 = spriteSize(imageName2)
    scaler2 = .50
    x2,y2=WIDTH*.81+5,HEIGHT*.35-4
    --Top Right
    imageName4 = asset.documents.Dropbox.Yellow_Info_Button
    imageSize4 = spriteSize(imageName4)
    scaler4 = .50
    x4,y4=WIDTH*.88-1,HEIGHT*.44-3
    --Bottom Right
    imageName5 = asset.documents.Dropbox.Blue_Info_Button
    imageSize5 = spriteSize(imageName5)
    scaler5 = .50
    x5,y5=WIDTH*.88-1,HEIGHT*.35-4    
end
function draw() 
    background(98)
    strokeWidth(5)
    fill(128)
    --big ellipses that are numbered
    --#1 
     ellipse(320, 290, 110)
    --#2
    ellipse(445, 290, 110)
    --#3
    ellipse(570, 290, 110)
    --#4
    ellipse(695, 290, 110)
    --small ellipses
    --top left
    ellipse(835, 335, 55)
    --bottom left
    ellipse(835, 265, 55)
    --top right
    ellipse(900, 335, 55)
    --bottom left
    ellipse(900, 265, 55)
    fill(0)
    fontSize(60)
    text("1", 320, 300 )
    text("2", 450, 300 )
    text("3", 570, 300 )
    text("4", 695, 300 )
    strokeWidth(5)
    --Sprite 
    sprite(imageName,x,y,scaler*imageSize)
    sprite(imageName2,x2,y2,scaler2*imageSize2)
    sprite(imageName4,x4,y4,scaler4*imageSize4)
    sprite(imageName5,x5,y5,scaler5*imageSize5)
end
function touched(touch)
    --Sprites
    --Top Left
    if touch.state==BEGAN then
        if touch.x>x-20 and touch.x<x+20 and touch.y>y-20 and touch.y<y+20 then
            scaler = 1
        end
    end
    if touch.state==MOVING and scaler==1 then
        x=x+touch.deltaX
        y=y+touch.deltaY
    end
    if touch.state==ENDED then
        scaler = .50
    end
    --Bottom Left 
    if touch.state==BEGAN then
        if touch.x>x2-20 and touch.x<x2+20 and touch.y>y2-20 and touch.y<y2+20 then
            scaler2 = 1
        end
    end
    if touch.state==MOVING and scaler2==1 then
        x2=x2+touch.deltaX
        y2=y2+touch.deltaY
    end
    if touch.state==ENDED then
        scaler2 = .50
    end
    --Top Right
    if touch.state==BEGAN then
        if touch.x>x4-20 and touch.x<x4+20 and touch.y>y4-20 and touch.y<y4+20 then
            scaler4 = 1
        end
    end
    if touch.state==MOVING and scaler4==1 then
        x4=x4+touch.deltaX
        y4=y4+touch.deltaY
    end
    if touch.state==ENDED then
        scaler4 = .50
    end 
    --Bottom Right
    if touch.state==BEGAN then
        if touch.x>x5-20 and touch.x<x5+20 and touch.y>y5-20 and touch.y<y5+20 then
            scaler5 = 1
        end
    end
    if touch.state==MOVING and scaler5==1 then
        x5=x5+touch.deltaX
        y5=y5+touch.deltaY
    end
    if touch.state==ENDED then
        scaler5 = .50
    end
end
2

@Jarc Can you be more specific about what your trying to do. You say you want them to stay in a specific area. Then you say you want to move them into the slots.

3

@dave1707 I want to move them into the slots, once they are in a slot I want them to lock into the slot. If I move them anywhere else other than the slots and my finger lifts off the screen I want them to go back to default position.

4

Here’s code for just the first sprite, top left. See if this is close to what you want.

    if touch.state==MOVING and scaler==1 then
        if x>300 and x<340 and y>270 and y<310 then
            x,y=320,290
        else
            x=x+touch.deltaX
            y=y+touch.deltaY
        end
    end
    if touch.state==ENDED then
        scaler = .50
        if x~=320 or y~=290 then
            x,y=WIDTH*.81+5,HEIGHT*.44-3
        end
    end
5

@dave1707 I’ll have to modify the scaling and touch boundaries but yes that points me in the right direction. Thanks Dave!

6

@Jarc When you post example code that takes special sprites, you can always replace your sprites with Codea sprites. That way we don’t have to download your sprites unless it’s something that’s needed. I replaced your sprites with

    imageName = asset.builtin.Planet_Cute.Character_Princess_Girl
    imageName2 = asset.builtin.Planet_Cute.Character_Cat_Girl
    imageName4 = asset.builtin.Planet_Cute.Character_Boy
    imageName5 = asset.builtin.Planet_Cute.Character_Pink_Girl
7

@dave1707 I was having a mild allergic reaction to some food I ate mid explanation during the comment left at 9:26PM so I couldn’t concentrate. Let me give you a example with some photos. I’m kind of going for what Cargo Bot is doing. You can drag what’s in the toolbox to the slots prog. If you drag and drop not in boundaries it disappears, in my code I want the sprite to go back to default position and in default position size if dragged and dropped not in the slots. I also want it so if you do drag and drop in the slots it will stay scaled to fit the size of the ellipse slot.

8

Nvm I figured it out. It was kind of simple I feel like a airhead. Delete this discussion lol, I’m re-reading my comments and I sound so confusing.

  if touch.state==ENDED then
        if x~=320 or y~=290 then
            x,y=WIDTH*.81+5,HEIGHT*.44-3
            scaler =.50
        end
    end
      if touch.state==ENDED then
        if x==320 or y==290 then
            scaler = 1
        end
    end
9

@dave1707 one more question, I also made the code simpler. Once the sprite is in the big circle how can I make it stay moveable so I can move it back and forth big circles.


function setup()
    displayMode(FULLSCREEN) 
    imageName =  asset.builtin.Planet_Cute.Character_Princess_Girl
    imageSize = spriteSize(imageName)
    scaler = .50
    x,y=835,335
    end
function draw() 
    background(98)
    strokeWidth(5)
    fill(128)
    --big ellipses
    ellipse(320, 290, 110)
    ellipse(445, 290, 110)
    --small ellipses
    ellipse(835, 335, 55)
    sprite(imageName,x,y,scaler*imageSize)
    end
function touched(touch)
    --makes it scale when touched, and so the touch bound is perfect
    if touch.state==BEGAN then
      if touch.x>x-20 and touch.x<x+20 and touch.y>y-20 and touch.y<y+20 then  
            scaler = 1
        end
        end
    if touch.state==MOVING and scaler==1 then
        if x>300 and x<340 and y>270 and y<310 then
            x,y=320,290
        else
            x=x+touch.deltaX
            y=y+touch.deltaY
        end
    end
    --makes it go back to default if not in big ellipse
    if touch.state==ENDED then
        if x~=320 or y~=290 then
            x,y=835,335
            scaler =.50
        end
    end
    -- makes it scale if in big ellipse
      if touch.state==ENDED then
        if x==320 or y==290 then
            scaler = 1 
        end
        end
    end
10

@Jarc I’m just jumping in here with some code that might help, sorry if I misunderstood as I haven’t been following along as much as dave has

You could move a lot of your specific numbers into tables to try to make some code reuseable, saves you having a lot of specific checks in your touched() function

Here the ellipses and the object (thing in this case) are given an x, y and size. Then you can treat them all similarly. In the touched function it checks if the touch began in the thing, if so it scales it up and tracks it with the touch. On ended it checks if the touch ended in any of the three ellipses and then snaps the thing to that ellipse

If it didn’t land in any of the ellipses it returns thing to the originalLocation which it saves when thing was first grabbed (touch.state == BEGAN)


function setup()
    displayMode(FULLSCREEN)
    imageName =  asset.builtin.Planet_Cute.Character_Princess_Girl
    imageSize = spriteSize(imageName)
    
    bigEllipse1 = { x=320, y=290, size=110 }
    bigEllipse2 = { x=445, y=290, size=110 }
    
    smallEllipse = { x=835, y=335, size=0.5*imageSize }
    
    thing = { x=835, y=335, scale=0.5, image=imageName }
    
    thing.size = function(thing)
        return thing.scale * spriteSize(thing.image)
    end
    
    originalLocation = { x=thing.x, y=thing.y, scale=thing.scale }
end

function draw()
    background(98)
    strokeWidth(5)
    fill(128)
    
    spriteMode(CENTER)
    ellipseMode(CENTER)
    
    --big ellipses
    ellipse(bigEllipse1.x, bigEllipse1.y, bigEllipse1.size)
    ellipse(bigEllipse2.x, bigEllipse2.y, bigEllipse2.size)
    --small ellipses
    ellipse(smallEllipse.x, smallEllipse.y, smallEllipse.size)
    
    sprite(thing.image, thing.x, thing.y, thing:size())
    
end

function isPositionInBounds(pos, object, size)
    if pos.x > object.x - size/2 
    and pos.x < object.x + size/2 
    and pos.y > object.y - size/2
    and pos.y < object.y + size/2 then
        return true
    end
    
    return false
end

function touched(touch)
    
    if touch.state == BEGAN then        
        if isPositionInBounds(touch, thing, thing:size()) then
            originalLocation = {x=thing.x, y=thing.y, scale=thing.scale}
            thing.scale = 1
        end
    end
    
    if thing.scale == 1 then
        thing.x = touch.x
        thing.y = touch.y
    end
    
    if touch.state == ENDED then
        if isPositionInBounds(touch, bigEllipse1, bigEllipse1.size) then
            thing.x = bigEllipse1.x
            thing.y = bigEllipse1.y
        elseif isPositionInBounds(touch, bigEllipse2, bigEllipse2.size) then
            thing.x = bigEllipse2.x
            thing.y = bigEllipse2.y
        elseif isPositionInBounds(touch, smallEllipse, smallEllipse.size) then
            thing.x = smallEllipse.x
            thing.y = smallEllipse.y
            thing.scale = 0.5
        else
            thing.x = originalLocation.x
            thing.y = originalLocation.y
            thing.scale = originalLocation.scale 
        end
    end
    
end
11

@Simeon Thank you! I need to utilize tables more if I want to get better. I also forgot about elseif, true & false.

12

@Jarc You mentioned Cargo Bot. Here’s something else I was trying. You can move any of the sprites in the small circles to the big circles. If the sprite isn’t in the big circle it goes back to the small circle. A big circle can’t have 2 sprites in it so if you try to move a sprite to an occupied circle, it goes back to its small circle. If you move a sprite out of the big circle, it goes back to its small circle.

 function setup()
    spriteMode(CENTER)
    ellipseMode(CENTER)
    displayMode(FULLSCREEN)
    tab1={vec3(100,290,0),vec3(250,290,0),vec3(400,290,0)}    -- position of large circles and occupied
    tab2={vec2(800,100),vec2(800,250),vec2(800,400),vec2(800,550)}  -- position of small circles
    tab3={vec3(800,100,.5),vec3(800,250,.5),vec3(800,400,.5),vec3(800,550,.5)}  -- position of sprite and scaler value
    tab4={
            asset.builtin.Planet_Cute.Character_Princess_Girl,
            asset.builtin.Planet_Cute.Character_Boy,
            asset.builtin.Planet_Cute.Character_Cat_Girl,
            asset.builtin.Planet_Cute.Character_Horn_Girl
        }
    imageSize = spriteSize(tab4[1])
    scaler = .50
end
function draw()
    background(98)
    strokeWidth(5)
    fill(128)
    for a,b in pairs(tab1) do
        ellipse(b.x, b.y, 100)
    end
    for a,b in pairs(tab2) do
        ellipse(b.x, b.y, 50)
    end
    for a,b in pairs(tab3) do
        sprite(tab4[a],b.x,b.y,imageSize*b.z)
    end
end
function touched(touch)    
    if touch.state==BEGAN then
        pos=0
        for a,b in pairs(tab3) do
            if touch.x>b.x-40 and touch.x<b.x+40 and touch.y>b.y-40 and 
                        touch.y<b.y+40 then
                b.z=1   -- scaler
                pos=a
                for c,d in pairs(tab1) do
                    if b.x==d.x and b.y==d.y then
                        d.z=0
                    end
                end
            end
        end

    end
    
    if pos==0 then 
        return
    end
    
    if touch.state==MOVING then
        tab3[pos].x=tab3[pos].x+touch.deltaX
        tab3[pos].y=tab3[pos].y+touch.deltaY
    end

    if touch.state==ENDED then  
        for a,b in pairs(tab1) do
            if tab3[pos].x>b.x-55 and tab3[pos].x<b.x+55 and 
                    tab3[pos].y>b.y-55 and tab3[pos].y<b.y+55 and
                    b.z==0 then
                tab3[pos].x=b.x
                tab3[pos].y=b.y
                b.z=1
                return
            end            
        end
        tab3[pos].x=tab2[pos].x
        tab3[pos].y=tab2[pos].y
        tab3[pos].z=.5
    end
end
13

@dave1707 This is exactly what I was going for. You’re the man, thanks!