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