Author Topic: Page flipping animation  (Read 6259 times)

Offline Kitty Hello

  • code monkey
  • Administrator
  • Prof. Inline
  • *******
  • Posts: 10852
  • here on my island the sea says 'hello'
    • View Profile
Page flipping animation
« on: 2010-Apr-06 »
Code: (glbasic) [Select]
// --------------------------------- //
// Project: PageFlip
// Start: Tuesday, April 06, 2010
// IDE Version: 7.308


FOR i=0 TO 999
DRAWRECT RND(500), RND(500), 32, 32, RGB(RND(255), RND(128), RND(255) )
GRABSPRITE 0, 0,0, 512, 512
DRAWRECT 0,0,600,600,RGB(255,255,255)
FOR i=0 TO 999
PRINT "Page 2", RND(500), RND(500)
GRABSPRITE 1, 0,0, 512, 512

// flip thingy
LOCAL mx%, my%, b1%, b2%
MOUSESTATE mx, my, b1, b2

DRAWRECT 0,0,777,777,RGB(128,128,128)
FlipPageDraw(0, 50,50,480,320, mx, my, FALSE)

//! 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%: id%, x, y, w, h, px, py, bLeftToRight%

// draw a frame for where the paper would be
DRAWRECT x,y,w,h, RGB(0xaa, 0xaa, 0xaa)

IF bLeftToRight%
INC x, w

IF (w>0 AND px >= x+w) OR (w<0 AND px <=x+w)  // tear the paper to the right
POLYVECTOR x,y, x,y,0xffffff
POLYVECTOR x,y+h,x,y+h,0xffffff
POLYVECTOR x+w,y+h,x+w,y+h,0xffffff
POLYVECTOR x+w,y,x+w,y,0xffffff

// Find the flip axis
LOCAL fcx, fcy // flip center point. Center between bottom right corner and mouse pos (on bending line)
fcx = (x+w+px)/2
fcy = (y+h+py)/2

// now get the direction of the flip edge (normal to the line px,py -> x+w,y+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

// if nx=0 we get div/0 -> make a very small value
IF ABS(nx)<=1E-5 THEN nx=1E-4
IF ABS(ny)<=1E-5 THEN ny=1E-4

// Get intersection y or bending line with the bottom paper edge
u = (y+h-fcy)/ny
bx = fcx+u*nx
by = fcy+u*ny

// 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 // intersection of bending line with top edge
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 intersection point to mouse point
dx = px-bx
dy = py-by
nl = SQR(dx*dx+dy*dy)

// length of bended page at top edge
u = x+w - t2x
IF w<0 THEN u=-u // flip direction if turning page left to right

tx = t2x+dx * u // move top bending intersection perpendicular to lower teared paper edge
ty = t2y+dy * u

// dont' fold paper too much off the right
// OR  we're far too left with the mouse
IF (w>0 AND tx > x+w) OR (w<0 AND tx < x+w) OR (py<y+h AND ty>y)
tx = x+w
ty = ty_first


// Draw the front of that page
POLYVECTOR t2x,t2y,t2x,t2y,0xffffff
POLYVECTOR bx, by, bx ,by ,0xffffff
POLYVECTOR x, y+h, x  ,y+h,0xffffff
POLYVECTOR x, y,   x  ,y  ,0xffffff
POLYVECTOR tx, y,  tx ,y  ,0xffffff

// Draw the fine back of the page
// b, p, t - triangle
POLYVECTOR tx, ty, 0,0,0xffffff
POLYVECTOR t2x,t2y,0,0,0xcccccc
POLYVECTOR bx, by, 0,0,0xcccccc
POLYVECTOR px, py, 0,0,0xffffff


Still some work to do to make it look really well - but it's a start...

[edit] Option to flip from left to right added.
« Last Edit: 2011-Jun-30 by Kitty Hello »

Offline thomasp

  • Mc. Print
  • *
  • Posts: 14
    • View Profile
Re: Page flipping animation
« Reply #1 on: 2010-Apr-06 »
Schick!  :)

Offline bigsofty

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 2793
    • View Profile
Re: Page flipping animation
« Reply #2 on: 2010-Apr-06 »
Very cool effect!


“It is practically impossible to teach good programming style to students that have had prior exposure to BASIC.  As potential programmers, they are mentally mutilated beyond hope of regeneration.”
(E. W. Dijkstra)

Offline Hatonastick

  • Dr. Type
  • ****
  • Posts: 474
  • Amstrad CPC 6128
    • View Profile
Re: Page flipping animation
« Reply #3 on: 2010-Jul-11 »
Brilliant!  I love that effect mate. :)
Mat. 5: 14 - 16

Android: Toshiba Thrive Tablet (3.2), Samsung Galaxy Tab 2 (4.1.2).
Netbook: Samsung N150+ Netbook (Win 7 32-bit + Ubuntu 11.10).
Desktop: Intel i5 Desktop with NVIDIA GeForce GTX 460 (Win 8.1 64-bit).