scale command

Code Sharing
1

Here’s an example of using the “scale” command to draw objects scaled for the iPad, iPhone4 and iPhone5. The screen size outlines are based on the pixel width and height of the 3 devices and not the actual inch sizes. Since I don’t have an iPhone, I’m just assuming these displays are close. Tap the screen to switch between the 3 devices. You can also rotate the iPad and the corresponding screens will also rotate. This might help someone trying to write code for the different devices.


displayMode(FULLSCREEN)

function setup()
    res={vec2(768,1024),vec2(320,480),vec2(320,568)}
    device={"iPad","iPhone 4","iPhone 5"}
    w=WIDTH
    h=HEIGHT
    dev=1
end

function draw()
    background(40,40,50)
    fill(255)
    stroke(255)
    strokeWidth(4)
    
    scale(w/WIDTH,h/HEIGHT) -- change scale for different device
    
    -- show text 
    text(device[dev],200,250)
    text("Width-"..w.."  ".."Height-"..h,200,200)
    text("Tap screen for next device",200,175)
    text("Rotate screen to change orientation",200,150)
    
    -- show outline of the devices display by pixel size
    line(1,1,1,HEIGHT)
    line(1,HEIGHT,WIDTH,HEIGHT)
    line(WIDTH,HEIGHT,WIDTH,1)
    line(WIDTH,1,1,1)  
     
    -- draw objects on device screen  
    ellipse(700,700,20)   
    ellipse(400,400,100,50)
    ellipse(200,700,100,50)
    line(200,700,750,100)
    line(WIDTH/2,0,WIDTH/2,HEIGHT)
    line(0,HEIGHT/2,WIDTH,HEIGHT/2)
    rect(550,550,100,50)
    
    -- check for screen rotation
    if HEIGHT>WIDTH then
        w=res[dev].x
        h=res[dev].y        
    else
        w=res[dev].y
        h=res[dev].x      
    end        
end

function touched(t) -- touch screen for next device
    if t.state==BEGAN then
        dev=dev+1
        if dev>3 then
            dev=1
        end
    end
end
2

Updated with new phones.


displayMode(FULLSCREEN)

function setup()
    res={vec2(768,1024),vec2(320,480),vec2(320,568),vec2(375,667),vec2(414,736)}
    device={"iPad","iPhone 4","iPhone 5","iPhone 6","iPhone 6 plus"}
    w=WIDTH
    h=HEIGHT
    dev=1
end

function draw()
    background(40,40,50)
    fill(255)
    stroke(255)
    strokeWidth(4)

    scale(w/WIDTH,h/HEIGHT) -- change scale for different device

    -- show text 
    text(device[dev],200,250)
    text("Width-"..w.."  ".."Height-"..h,200,200)
    text("Tap screen for next device",200,175)
    text("Rotate screen to change orientation",200,150)

    -- show outline of the devices display by pixel size
    line(1,1,1,HEIGHT)
    line(1,HEIGHT,WIDTH,HEIGHT)
    line(WIDTH,HEIGHT,WIDTH,1)
    line(WIDTH,1,1,1)  

    -- draw objects on device screen  
    ellipse(700,700,20)   
    ellipse(400,400,100,50)
    ellipse(200,700,100,50)
    line(200,700,750,100)
    line(WIDTH/2,0,WIDTH/2,HEIGHT)
    line(0,HEIGHT/2,WIDTH,HEIGHT/2)
    rect(550,550,100,50)

    -- check for screen rotation
    if HEIGHT>WIDTH then
        w=res[dev].x
        h=res[dev].y        
    else
        w=res[dev].y
        h=res[dev].x      
    end        
end

function touched(t) -- touch screen for next device
    if t.state==BEGAN then
        dev=dev+1
        if dev>5 then
            dev=1
        end
    end
end
3

The scale command is brilliant as is dave’s code. Now I just need a scale command for touches too, I think…

4

@MrScience101 Here’s an updated version. I modified some draw code and added code for the touched() function where you have to tap within the RED square for the next device. In order for the touch to stay within the RED square for the different devices, I had to multiply the t.x and t.y values by w/WIDTH and h/HEIGHT. The circle and square are distorted on the different devices, and I’m not sure how well this code actually compares on other devices since I just have the iPad.

displayMode(FULLSCREEN)

function setup()
    res={vec2(768,1024),vec2(320,480),vec2(320,568),vec2(375,667),vec2(414,736)}
    device={"iPad","iPhone 4","iPhone 5","iPhone 6","iPhone 6 plus"}
    w=WIDTH
    h=HEIGHT
    dev=1
    dx,dy=0,0
end

function draw()
    background(40,40,50)
    fill(255)
    stroke(255)
    strokeWidth(4)

    scale(w/WIDTH,h/HEIGHT) -- change scale for different device

    -- show text 
    text(device[dev],200,250)
    text("Width-"..w.."  ".."Height-"..h,200,200)
    text("X = "..dx.."     Y = "..dy,200,900) 
    text("Slide finger around for x,y values",200,870) 
    text("Tap RED square for next device",600,870)
    text("Rotate screen to change orientation",200,150)

    -- show outline of the devices display by pixel size
    line(1,1,1,HEIGHT)
    line(1,HEIGHT,WIDTH,HEIGHT)
    line(WIDTH,HEIGHT,WIDTH,1)
    line(WIDTH,1,1,1)  

    -- draw objects on device screen  
    ellipse(200,400,100,100)   
    ellipse(200,700,100,50)
    line(200,700,750,100)
    line(WIDTH/2,0,WIDTH/2,HEIGHT)
    line(0,HEIGHT/2,WIDTH,HEIGHT/2)
    rect(550,550,100,100)

    -- check for screen rotation
    if HEIGHT>WIDTH then
        w=res[dev].x
        h=res[dev].y        
    else
        w=res[dev].y
        h=res[dev].x      
    end 

    fill(255,0,0)
    rect(WIDTH-100,HEIGHT-100,100,100)
    text("Curcle",200,400)
    text("Square",600,600)
    text("Ellipse",200,700)
end

function touched(t)
    if t.state==BEGAN then
        if t.x>w-100*w/WIDTH and t.x<w and t.y>h-100*h/HEIGHT and t.y<h then
            dev=dev+1
            if dev>5 then
                dev=1
            end
        end
    end
    if t.state==MOVING then
        dx=t.x
        dy=t.y
    end
end