Page flipping animation

[djtoon]

hi i saw a code on the forum
for this

does any one know how to flip it from right to left to left to right?

thanks

Code (glbasic) Select Expand


//! Draws a Flip-Page animation frame
// \param x%,y% - position of left/top page sheet
// \param w%,h% - width/height of the paper sheet -> these coords are used as texture points, too -> texture can be bigger, but starts at 0,0!
// \param px%,py% - point where you "drag" the bottom right corner to
FUNCTION FlipPageDraw%: x, y, w, h, px, py

IF px >= x+w THEN RETURN // tear the paper to the right

// Find the flip axis
LOCAL fcx, fcy // flip center point





fcx = (x+w+px)/2
fcy = (y+h+py)/2

// now get the direction of the flip edge (normal to the line px,py -> w,h)
LOCAL nx, ny
nx = y+h - py
ny = -(x+w - px)

// normalize
LOCAL nl = SQR(nx*nx + ny*ny)
IF nl < 1E-5 THEN RETURN // nothing visible
nx = nx / nl
ny = ny / nl

LOCAL tx, ty // top point (corner of flipped paper)
LOCAL t2x, t2y // 2nd top point (if the bending line hits the top edge, intersection of bottom paper top and bending line)
LOCAL bx, by // bottom point

// Get intersection y with the right paper edge
IF ABS(nx)>1E-7 AND ABS(ny)>1E-5

// bottom point
LOCAL u = (y+h-fcy)/ny
bx = fcx+u*nx
by = fcy+u*ny
IF bx<240
bx=240
ENDIF

// top point, intersection with right edge
// px + u*nx = x+w
LOCAL u = (x+w-fcx)/nx

ty = fcy + u*ny

LOCAL ty_first = ty

// py+u*ny = y
u = (y-fcy)/ny
t2x = fcx+u*nx
t2y = y

// find the real top point now
// That's a bit tricky now
// the folded edge is perpendicular to the bottom/mouse point line
// _and_ the length equals the distance of the current top point to top/right corner
LOCAL dx, dy // direction of bottom point to mouse point
dx = px-bx
dy = py-by
nl = SQR(dx*dx+dy*dy)
dx=dx/nl
dy=dy/nl

u = x+w - t2x

tx = t2x+dx * u
ty = t2y+dy * u

IF tx > x+w OR (py<y+h AND ty>y)
tx = x+w
ty = ty_first

t2x=tx
t2y=ty
ENDIF

// Draw the fine back of the page
// b, p, t - triangle
STARTPOLY 1, 0

POLYVECTOR tx, ty, 320,0,RGB(255,255,255)
POLYVECTOR t2x,t2y,0,0,RGB(210,210,210)
POLYVECTOR bx, by, 0,480,RGB(210,210,210)
POLYVECTOR px, py, 320,480,RGB(255,255,255)
ENDPOLY


PRINT tx,0,10
PRINT ty,0,20

PRINT t2x,0,30
PRINT t2y,0,40

PRINT bx,0,50
PRINT by,0,60

ENDIF


ENDFUNCTION


[Kitty Hello]

I don't understand what you mean. Got a sample image or yourtube video?

[Moru]

Might want to ask the question in the forum thread you found the code in :-)

[djtoon]

here is an image

i need the page to turn from left to right and not right to seft


[attachment deleted by admin]

[Kitty Hello]

http://www.glbasic.com/forum/index.php?topic=4383.msg32522#msg32522

I fixed it, so now you have a parameter to flip left->right or right->left.

Only problem so far is, when you drag the page over the center and then a lot up/down. The sheet will sort of look ugly on the side where it's "sticky". I hope you don't need that

Phew, that was really a hard work to do. I really should comment my code better.

[djtoon]

thank you so mutch

i wonder
how can i make the back a image too
i cant seem to get the image to wrap ok

[djtoon]

again thank you
i made it work

[Kitty Hello]

Can you post your changes?

[Slydog]

Wow neat, missed this one before.

It would be cool to model a 3D page, with say 10 x 10 vertices in a grid.
Put bones along the top and bottom.
Then create a 'flip' animation that flips the page (and the reverse flip if you can't simply reverse a regular animation in code).
For the back of the page, duplicate these vertices and 180 their normals. (still have one animations that animates both sets of front / back vertices).

Then in your GLB code you simply load the page flip 3D model, then apply the front image to the front page, and the back image to the back page.
While you are in the 'flip' move, it calls the flip animation which reveals the back page as it's hiding the front page (err . . . like a page flip!).
The image will stretch over the page because of the uv coordinates. 

If an animation could be set by how far into the animation (30% animated?), this could be a 'live' flip where you could move your finger / mouse back and forth and have the page follow the touch point, and depending on where you let go, it either continues the page flip if far enough, or the page falls back to the starting position if you didn't flip it far enough.

Ok somebody who knows 3d modeling . . . . go!

[Kitty Hello]

I did in Kakerlympics.

Code (glbasic) Select Expand


X_LOADOBJ "gfx/page.ddd", 0
X_LOADOBJ "gfx/book.ddd", 1
FlipPage(0,1,2) // or so...

FUNCTION DrawBook: left, right
X_MAKE3D 1,1000,45
X_CAMERA 0,15,25, 0,0,0
X_AMBIENT_LT  0, RGB(200,220,255)

X_CULLMODE 1
X_MOVEMENT -106, -48,40 // 0,0,0 is table top!
X_SETTEXTURE 10,-1
X_DRAWOBJ 10, 0

X_SETTEXTURE 11,-1
X_DRAWOBJ 11, 0
X_SETTEXTURE 12,-1
X_DRAWOBJ 12, 0


X_MOVEMENT -7,0,0

X_CULLMODE 0
X_SETTEXTURE -1,-1
X_DRAWOBJ 1, 0
// prev page
X_SETTEXTURE left, -1
X_SCALING 1,-1,1
X_ROTATION 180, 0,0,1
X_DRAWOBJ 0, 0
// next page
X_SCALING 1,1,1
X_SETTEXTURE right, -1
X_DRAWOBJ 0, 0
ENDFUNCTION

FUNCTION FlipPage: src, direction, num_all
LOCAL i, left, right, start, fin, stp, time
PLAYSOUND( 0, direction, 1)
left = src; right=src
src=MOD(src, num_all)
IF src<0 THEN src=src+num_all
left=MOD(src+num_all-1, num_all)
right=MOD(src+1, num_all)

start=1; fin=999; stp=GETTIMER()
IF direction<0
start=999; fin=1; stp=-GETTIMER()
ENDIF

FOR time=start TO fin STEP stp
i = time/ABS(fin-start)
DrawBook(left,right)
// current page
X_SCALING 1,(1-i/.50)*(1+SIN(i*180)*4),1
X_ROTATION i*180, 0,0,1
X_SETTEXTURE src, -1
X_DRAWOBJ 0, 0
X_MAKE2D
SHOWSCREEN
NEXT
ENDFUNCTION




[attachment deleted by admin]

[Slydog]

Exactly!   

[djtoon]

hi thre still a weird bug
im attaching a test project of 2 pages


if you move the mose to the left side and click you turn the left page
and the same thing to the right

but for some reson the right side page shifts to the right , even if the x pos in in the middle of the screen


any help please?



[attachment deleted by admin]

[Kitty Hello]

the drawsprite does not fit the coords of the DrawPage function's output.