image magnifier

Code Sharing
1

I don’t know if this has any use or not, but I thought I would share it anyways. It magnifies an area of an image. I’m using the Cargo Bot Startup Screen image here, but any image can be used. Move your finger around the screen to move the magnified area.


displayMode(FULLSCREEN)

function setup()
    img1=readImage("Cargo Bot:Startup Screen")
    iw2=img1.width/2
    ih2=img1.height/2
    w2=WIDTH/2
    h2=HEIGHT/2
    cx=w2
    cy=h2
    img2=image(100,100)
end

function draw()
    background(40, 40, 50)
    rectMode(CENTER)
    sprite(img1,w2,h2)
    magnify()
    noFill()
    stroke(127, 127, 127, 255)
    strokeWidth(2)
    rect(cx,cy,104,104)
    sprite(img2,cx,cy)
end

function magnify()
    -- limit x,y range to image
    if cx<w2-iw2+11 then
        cx=w2-iw2+11
    end
    if cx>w2+iw2-11 then
        cx=w2+iw2-11
    end
    if cy<h2-ih2+11 then
        cy=h2-ih2+11
    end
    if cy>h2+ih2-11 then
        cy=h2+ih2-11
    end
    
    -- convert screen x,y to image x,y values
    px=cx-w2+iw2
    py=cy-h2+ih2
    
    -- read selected image area and magnify it.
    y1=100
    for y=py+10,py-10,-1 do
        x1=1
        for x=px-10,px+10 do
            r,g,b,a=img1:get(x,y)
            for a1=x1,x1+5 do
                for b1=y1,y1+5 do
                    img2:set(a1,b1,r,g,b,a)
                end
            end
            x1=x1+5
        end
        y1=y1-5
    end
end

function touched(t)
    if t.state==MOVING then
        cx=cx+t.deltaX
        cy=cy+t.deltaY
    end
end
2

Hi @Dave1707 This tool is simple but very nice. Thanks for sharing.

3

Hi Dave. Your code was running 12fps on my ipad1, so i modified the slow part (image copy) to make it run real time: now it is ~58 fps. You can find it there: http://jmv38.comze.com/CODEAbis/server.php#forumCode at the bottom of the list.

4

Thanks @Jmv38 . I’ve been playing around with the image get and set functions and totally forgot about the image copy function. Also thanks for the noSmooth addition. I thought I’d add code to allow the change in magnification. Just use two fingers to increase or decrease the size by moving two fingers away or towards each other.


displayMode(FULLSCREEN)

function setup()
    img1=readImage("Cargo Bot:Startup Screen")
    iw2=img1.width/2
    ih2=img1.height/2
    w2=WIDTH/2
    h2=HEIGHT/2
    cx=w2
    cy=h2
    img2=image(20,20)
    tab={}
    size=100
end

function draw()
    background(40, 40, 50)
    rectMode(CENTER)
    sprite(img1,w2,h2)
    magnify()
    noFill()
    stroke(127, 127, 127, 255)
    strokeWidth(2)
    rect(cx,cy,size+4,size+4)
    noSmooth()
    sprite(img2,cx,cy,size,size)
end

function magnify()
    -- limit x,y range to image
    if cx<w2-iw2+11 then
    cx=w2-iw2+11
    end
    if cx>w2+iw2-11 then
        cx=w2+iw2-11
    end
    if cy<h2-ih2+11 then
        cy=h2-ih2+11
    end
    if cy>h2+ih2-11 then
        cy=h2+ih2-11
    end
    -- convert screen x,y to image x,y values
    px=cx-w2+iw2
    py=cy-h2+ih2
    -- read selected image area and magnify it.
    img2 = img1:copy(px-10,py-10,20,20)
end
function touched(t)
    if t.state==MOVING then
        cx=cx+t.deltaX
        cy=cy+t.deltaY
    end
    if t.state==BEGAN then
        d1=0
        d2=0
        table.insert(tab,vec3(t.x,t.y,t.id))
    end
    if t.state==MOVING and #tab == 2 then
        for z=1,2 do
            if t.id==tab[z].z then
                tab[z].x=t.x
                tab[z].y=t.y
            end
        end
        d1=(tab[1].x-tab[2].x)^2+(tab[1].y-tab[2].y)^2
        if d1>d2 then
            size = size + 1
        elseif d1<d2 then
            size = size - 1
        end
        if size>500 then
            size=500
        end
        if size<20 then
            size=20
        end 
        d2=d1
    end
    if t.state==ENDED then
        for z=1,#tab do
            if t.id==tab[z].z then
                table.remove(tab,z)
                return
            end
        end
    end  
end
5

Cool! I’ve updated my repo with this version.