Zooming

Kolosso

Hi! I made this zooming thing. It allows the user to zoom in and out. While the user is zoomed in, they can move around by touching the screen in the direction they want to go. To zoom in, tap the screen, to zoom out, double tap the screen. In the code, you can change how far it zooms in by changing the variable "maxScale" in the zoom table. Use the code if you want:

-- zoom test

-- Use this function to perform your initial setup
displayMode(FULLSCREEN)
function setup()
    zoom = {scaler = 1, maxScale = 10, x = WIDTH/2,y = HEIGHT/2,vel= vec2(0,0)}
    http.request("http://www.johngarvens.com/wp-content/uploads/2013/03/binary-Language.jpg",success,Error)
end

-- This function gets called once every frame
function draw()

    if zoom.scaler == 1 then
        translate(WIDTH/2,HEIGHT/2)
        else
        zoom.x,zoom.y = zoom.x+zoom.vel.x,zoom.y+zoom.vel.y
        if CurrentTouch.state == ENDED then
            zoom.vel.x = zoom.vel.x /1.05
            zoom.vel.y = zoom.vel.y /1.05
            else
            zoom.vel = vec2(-(CurrentTouch.x-WIDTH/2)/4,-(CurrentTouch.y-HEIGHT/2)/4)
        end
        translate(zoom.x, zoom.y)
        scale(zoom.scaler)
    end

    -- draw everything you want to be zoomable after here
    if Photo ~= nil then
        sprite(Photo,0,0)
    end

    if zoom.scaler == zoom.maxScale then -- if it's zoomed in all the way, draw the controller
        pushMatrix()
        pushStyle()
        resetMatrix()
        fill(255,0,0,(math.abs(zoom.vel.x)+math.abs(zoom.vel.y))*90)
        stroke(255,(math.abs(zoom.vel.x)+math.abs(zoom.vel.y))*90)
        strokeWidth(5)
        ellipseMode(CENTER)
        lineCapMode(PROJECT)
        line(WIDTH/2-zoom.vel.x*3,HEIGHT/2-zoom.vel.y*3,WIDTH/2,HEIGHT/2)
        stroke(255,(math.abs(zoom.vel.x)+math.abs(zoom.vel.y))*90+127)
        ellipse(WIDTH/2-zoom.vel.x*3,HEIGHT/2-zoom.vel.y*3,100)
        popMatrix()
        popStyle()
    end
    --[[
    everything drawn after this point, will be drawn over top of the controller
    --]]
end

function touched(t)
    if t.state == ENDED then -- This zooms in and out
        if zoom.scaler == 1 then
            tween(0.6,zoom,{scaler=zoom.maxScale},tween.easing.cubicInOut)
            zoom.x,zoom.y = WIDTH/2,HEIGHT/2
            elseif zoom.scaler == zoom.maxScale and t.tapCount == 2 then
            zoom.scaler = 1
        end
    end
end

function success(photo,status,header)
    Photo=photo
end

function Error(error)
    displayMode(OVERLAY)
    print("Failed to receive image:\n"..error)
end

Ignatz

Correct me if I'm wrong, but the trick is simply to use the scale command, isn't it? I'm interested in why we would need all this code to include scaling in our own projects.

Kolosso

It allows zooming in and out with the user's control to move left, right, up, down and diagonal. it could be used in photo galleries where the users can zoom in on the photos.

Ignatz

Ah, I see. It helps to give a description of what the code does (or a little video), so people can decide if it's worthwhile downloading the code. Otherwise they are likely not to bother.

Kolosso

Yeah. Sorry about that. Now there's description.

Ignatz

It's ok, I'm just trying to help you get people to try your code, that's all