Rotate Screen Strange Transform

Questions
1

Hello everybody !

I don’t understand why a little rotation distord my image like that :

This is the code I use :

-- SetContextExperiment

displayMode(FULLSCREEN)

function setup()
    img = image(WIDTH-5,HEIGHT-4)
end

function draw2()
    pushMatrix()
    perspective(40, WIDTH/HEIGHT)
    camera(WIDTH/2,HEIGHT/2,150,WIDTH/2,HEIGHT/2,0,0,1,0)
    translate(0,0,-900)
    rotate(65,0,1,0)
    sprite("Documents:CodeaRotateTest0",WIDTH/2, HEIGHT/2)
    viewMatrix(matrix())
    ortho()
    popMatrix()
end

function draw()
    background(255, 255, 255, 255)
    draw2()
end

If someone have an explanation, I’m really interested !

Thanks in advance.

2

Doubt it would be anything to do with the perspective? I haven’t got my iPad here at the moment so I can’t experiment with it.

3

@hyrovitaliprotago i’ve made this little tweak to your program to see what is happening. Looks like some ‘build-in bug’ with 3D. I can see the sprite is split in 2 triangles, but this makes a bilinear interpolation of the texture that is not visually correct.
Solution: create a mesh of 10x10 rectangles filled with your sprite as a texture. Then it may look better…
Other solution: dont use 3d, manage the transform yourself…

-- SetContextExperiment

displayMode(FULLSCREEN)

function setup()
    img = image(WIDTH-5,HEIGHT-4)
    setContext(img)
    resetMatrix()
        background(255)
        fill(0)
        stroke(0)
        strokeWidth(4)
        local n = 20
        local x1,y1,x2,y2
        local w,h = img.width,img.height
        y1,y2 = 0,h
        for i=1,n do
            x1 = i*w/n
            x2 = x1
            line(x1,y1,x2,y2)
        end
        x1,x2 = 0,w
        for i=1,n do
            y1 = i*h/n
            y2 = y1
            line(x1,y1,x2,y2)
        end
    setContext()
end

function draw2()
    pushMatrix()
    perspective(40, WIDTH/HEIGHT)
    camera(WIDTH/2,HEIGHT/2,500,WIDTH/2,HEIGHT/2,0,0,1,0)
    translate(0,0,-900)
    rotate(65*math.sin(ElapsedTime/3),0,1,0)
    sprite(img,WIDTH/2, HEIGHT/2)
    viewMatrix(matrix())
    ortho()
    popMatrix()
end

function draw()
    background(128)
    draw2()
end
4

here is a video from the code above (the flat image is a simple rectangular grid)
http://www.youtube.com/watch?v=EQQ_Y9DQmig
you can also note a strange bug on top of the video recording: (@simeon) the first few lines have a ghosting effect (not present on the real display)

5

I’ve written about this, with a solution, here:

http://loopspace.mathforge.org/discussion/38/filling-a-quadrilateral

6

thaks!

7

Nevermind, completely misread the question.

8

I think I figured it out! Not a double post of the “nevermind” comment. I believe the problem there is sprite batching, a feature added a couple versions ago. It has been a known bug to mess up the image when used in 3D, with sprite(). To disable it, just call spriteBatching(false).

9

Hey @SkyTheCoder you’re the Boss! That solved it!

10

@SkyTheCoder what does the spritebatching fix?

11

i suppose the spritebatching(true) makes the sprite to be displayed as a mesh of 2 triangles, and the spritebatching(false) makes it be displayed as a true rectangle, hence the correctness of the texture image. I dont know how this is achiebed at low level though. Maybe the rectangle texture is included into one much bigger triangle, with transparent texture around? This would preserve the texture aspect.

12

Wow !! spriteBatching is a really nice feature !
Thanks @SkyTheCoder, and thanks @Jmv38 and @Andrew_Stacey too.