flip book, like paper

Code Sharing
1

Love that you can write small snippets of code with just the ipad. Here is some code for a flip book.


function setup()
    strokeWidth(10)
    parameter("Degree",0,500)
 
    page1 = image(400,600)
    setContext(page1)
    fill(212, 161, 84, 255)
    rect(0,0,400,600)
    sprite("Planet Cute:Star",200,300)
    
    page2 = image(400,600)
    setContext(page2)
    fill(210, 68, 211, 255)
    rect(0,0,400,600)
    sprite("Planet Cute:Tree Tall",200,300)
end

function drawPage(d, i)
    d = math.min(math.max(45,d),180)
    pushMatrix()
    rotate(-d, 0,1,0)
    if d > 90 then 
        sprite(page2,200,0)
    else
        sprite(page1,200,0)
    end
    popMatrix()
end

function draw()
    background(40, 40, 50)
    camera(0,0,1400, 0,0,0)
    perspective(45)
    for i=1,10 do
        drawPage(Degree-30*i, i)
    end
end
2

well, except that the code looks crazy when I paste it into the forum :slight_smile:

3 
function setup()     
    strokeWidth(10)     
    parameter("Degree",0,500)       
    page1 = image(400,600)     
    setContext(page1)     
    fill(212, 161, 84, 255)     
    rect(0,0,400,600)     
    sprite("Planet Cute:Star",200,300)          
    page2 = image(400,600)     
    setContext(page2)     
    fill(210, 68, 211, 255)     
    rect(0,0,400,600)     
    sprite("Planet Cute:Tree Tall",200,300)
end

function drawPage(d, i)     
    d = math.min(math.max(45,d),180)     
    pushMatrix()     
    rotate(-d, 0,1,0)     
    if d > 90 then          
        sprite(page2,200,0)     
    else         
        sprite(page1,200,0)     
    end     
    popMatrix() 
end

function draw()     
    background(40, 40, 50)     
    camera(0,0,1400, 0,0,0)     
    perspective(45)     
    for i=1,10 do         
        drawPage(Degree-30*i, i)     
    end 
end

The magic of ~~~ formatting.

4

Ah. Thanks :slight_smile:

5

I did a search about Flip Card and I found this code.

I tried to adapt this code to create 3D Flip Card Effect and I still can not create this effect.

See here an example: css3 // 3D Flip Cards

Can someone help me to create this effect in Codea?

6

OK, guys! Maybe you got bored with my requests. I promise, this is the last time.

The last time, few months, but not definitive. :slight_smile:

Try to help me because I really need this effect.

7

try changing sprite(page1, 200,0) to sprite(page1, 0,0) to move the pivot point to the middle like in the css demo. good luck!