iOS 7 lock screen example?

Does anyone know how to replicate the gradual blur effects found on the iOS 7 lock screen when first starting up your device, and would I need to use a shader to produce it?

there was this discussion http://codea.io/talk/discussion/3789/gaussian-blur/p1

I just locked and unlocked my screen and i don’t notice a blur effect
But, If you’re looking for a fade effect

-- IOS 7 Gradual Fade
displayMode(FULLSCREEN)

function setup()
    gradualValues = {["fade"]=0}
    -- Out Fade, it doesn't need to be in a table, BUT!
    -- If we wanted, for example to increase text size
    -- Based on unlock progress we could do it easier as
    -- All our gradual values are in one place
    
    tx, ty = 0, 0
    -- Next We set the amounts we want to translate the screen by
    
    startPosition = 0
    -- The starting position of your touch, the screen and the fade
end

function draw()
    pushMatrix()
    -- We save the initial translation amount
    -- In this case the initial amount is 0
    
    translate(tx, ty)
    -- Then we translate, these values will change to make the screen slide along
    
    background(98, 133, 173, 255)
    
    -- All the UI Elements
    fill(60, 79, 94, 255)
    textMode(CENTER)
    font("HelveticaNeue-UltraLight")
    fontSize(120)
    text("3:06", WIDTH/2, HEIGHT/8*6.9)
    
    font("HelveticaNeue-Light")
    fontSize(20)
    text("Sunday, 8 June", WIDTH/2, HEIGHT/8*6.2)
    
    textMode(CORNER)
    font("HelveticaNeue")
    fontSize(16)
    text("iPad", 10, HEIGHT-30)
    text("100% [==]", WIDTH-80, HEIGHT-30)
    
    textMode(CENTER)
    font("HelveticaNeue-Light")
    fontSize(30)
    text("> slide to unlock", WIDTH/2, 30)
    popMatrix()
    
    -- A black sqaure that changes in alpha transperancy
    -- To give the illusion of a fade, (it starts at 0 transperancy)
    -- It's also a bit larger than necessary because for some reason
    -- The rect doesn't really cover the whole screen
    fill(0, 0, 0, gradualValues["fade"])
    rect(-5, -5, WIDTH+10, HEIGHT+10)
    
    
    if letGo then
        if not unlocked then
            ---[[ Fancy Bit of Code that gives us a smooth transition
            if math.floor(tx) <= 1 then
                tx = 0
                letGo = false
                -- Screen has finsihed moving back
            else
                tx = tx - (tx * 0.1)
                -- Move the screen back gradually
            end
            ---]]

            --[[
            -- The less fancy way
            if math.floor(tx) <= 0 then
                letGo = false
            else
                tx = tx - 10
            end
            --]]
        end
    end
    
    gradualValues["fade"]=255-(((startPosition/tx)*255)*1.5)
    -- And now for the fading maths
    -- We subtract everything by 255 because we want to start at 0
    -- We multiply by 1.5 to make the fade softer
    -- The most important part is here >> (startPosition/tx)*255
    -- it divides our start position by our current position and
    -- multiplies it by 255 to keep it within the range of 0 and 255
    
    if tx > WIDTH/4*3 and not letGo then
        -- If we have gone further than 3 Quarters of the screen
        -- We are succesfully unlocked
        
        fill(255, 0, 0, gradualValues["fade"])
        rect(-5, -5, WIDTH+10, HEIGHT+10)
        fill(191, 174, 174, 255)
        fontSize(50)
        text("UNLOCKED", WIDTH/2, HEIGHT/2)
        -- Displaying a quick message letting us know we are unlocked
        
        -- unlocked = true
        -- This piece of code should be uncommented if you want to do something after being unlocked
    end
end

function touched(t)
    if t.state == BEGAN then
        startPosition = t.x
    elseif t.state == MOVING then
        tx = (t.x - startPosition) * 1.5
        -- We multiply the translation X by 1.5 to make the screen move faster
    elseif t.state == ENDED then
        letGo = true
        -- Time for the screen to snap back to reality
    end
end

Also i’m no expert so there might be a simpler way to do this

i have an error with if tx > WIDTH/43 not letGo then
i think it is
if tx > WIDTH/4
3 and not letGo then
thanks for sharing

@hpsoft You’re right, oops, thanks for the heads up and

@YoloSwag If you need any explanations i’d be happy to try and help

@Dalorbi. Your comments made it very easy to understand for a beginner like me, thanks!

@Dalorbi. Actually I do have one question. When your finger stays on the screen the image becomes really jerky after the first attempt. Is there any way to fix this?

@YoloSwag
The problem with the touches seems to be that when your finger stays in one place for a while it jumps to the t.state==ENDED code which sets letGo to true, telling the computer to transition backwards. The t.state==BEGAN code then runs which sets the start position to your current touch position.

Of course your touch hasn’t really ended so the t.state==MOVING section keeps trying to run, along with the incorrect startPosition values, this results in the forward and backward jerky movement that you observed.

The solution to this would be to tell the t.state==MOVING to not jump forward if t.state==ENDED has occurred, we can do this by adding and not letGo

    if t.state == BEGAN then
        startPosition = t.x
    elseif t.state == MOVING and not letGo then
        tx = (t.x - startPosition) * 1.5
        -- We multiply the translation X by 1.5 to make the screen move faster (150%)
    elseif t.state == ENDED then
        letGo = true
        -- Tells the program to snap back
    end

@Dalorbi No, it’s not because the touched function is being called with ENDED (the hardware doesn’t work like that), it’s because of your code. You’re only updating the lock screen’s offset when the touch is moved (the touched function is called only when your touch moves >= 0.5 pixels, and if you don’t move enough, it won’t be called). Here’s an example to fix it, by updating the offset in draw rather than in touched. (notice the new curTx value)

-- IOS 7 Gradual Fade
displayMode(FULLSCREEN)

function setup()
    gradualValues = {["fade"]=0}
    -- Out Fade, it doesn't need to be in a table, BUT!
    -- If we wanted, for example to increase text size
    -- Based on unlock progress we could do it easier as
    -- All our gradual values are in one place

    tx, ty = 0, 0
    curTx = 0
    -- Next We set the amounts we want to translate the screen by

    startPosition = 0
    -- The starting position of your touch, the screen and the fade
end

function draw()
    pushMatrix()
    -- We save the initial translation amount
    -- In this case the initial amount is 0

    translate(tx, ty)
    -- Then we translate, these values will change to make the screen slide along

    background(98, 133, 173, 255)

    -- All the UI Elements
    fill(60, 79, 94, 255)
    textMode(CENTER)
    font("HelveticaNeue-UltraLight")
    fontSize(120)
    text("3:06", WIDTH/2, HEIGHT/8*6.9)

    font("HelveticaNeue-Light")
    fontSize(20)
    text("Sunday, 8 June", WIDTH/2, HEIGHT/8*6.2)

    textMode(CORNER)
    font("HelveticaNeue")
    fontSize(16)
    text("iPad", 10, HEIGHT-30)
    text("100% [==]", WIDTH-80, HEIGHT-30)

    textMode(CENTER)
    font("HelveticaNeue-Light")
    fontSize(30)
    text("> slide to unlock", WIDTH/2, 30)
    popMatrix()

    -- A black sqaure that changes in alpha transperancy
    -- To give the illusion of a fade, (it starts at 0 transperancy)
    -- It's also a bit larger than necessary because for some reason
    -- The rect doesn't really cover the whole screen
    fill(0, 0, 0, gradualValues["fade"])
    rect(-5, -5, WIDTH+10, HEIGHT+10)


    if letGo then
        if not unlocked then
            ---[[ Fancy Bit of Code that gives us a smooth transition
            if math.floor(tx) <= 1 then
                tx = 0
                letGo = false
                -- Screen has finsihed moving back
            else
                tx = tx - (tx * 0.1)
                -- Move the screen back gradually
            end
            ---]]

            --[[
            -- The less fancy way
            if math.floor(tx) <= 0 then
                letGo = false
            else
                tx = tx - 10
            end
            --]]
        end
    else
        tx = (curTx - startPosition) * 1.5 -- We multiply the translation X by 1.5 to make the screen move faster
    end

    gradualValues["fade"]=255-(((startPosition/tx)*255)*1.5)
    -- And now for the fading maths
    -- We subtract everything by 255 because we want to start at 0
    -- We multiply by 1.5 to make the fade softer
    -- The most important part is here >> (startPosition/tx)*255
    -- it divides our start position by our current position and
    -- multiplies it by 255 to keep it within the range of 0 and 255

    if tx > WIDTH/4*3 and not letGo then
        -- If we have gone further than 3 Quarters of the screen
        -- We are succesfully unlocked

        fill(255, 0, 0, gradualValues["fade"])
        rect(-5, -5, WIDTH+10, HEIGHT+10)
        fill(191, 174, 174, 255)
        fontSize(50)
        text("UNLOCKED", WIDTH/2, HEIGHT/2)
        -- Displaying a quick message letting us know we are unlocked

        -- unlocked = true
        -- This piece of code should be uncommented if you want to do something after being unlocked
    end
end

function touched(t)
    if t.state == BEGAN then
        startPosition = t.x
    elseif t.state == MOVING then
        curTx = t.x -- Store the current touch's x value
    elseif t.state == ENDED then
        letGo = true
        -- Time for the screen to snap back to reality
    end
end

Also, the blur effect is in your lock screen’s background picture, on the screen with the numpad.

@SkyTheCoder @YoloSwag Oops sorry guys, guess my debugging skills aren’t as good as i thought, thanks for the help Sky, sorry if i caused any confusion