How to create "Page Peel" or "Page Turn" effect in Processing?

I am looking to recreate the “page turn” or “page peel” effect in Processing for a project.

I have a string of text I am displaying and I want to have this page peel away to reveal another page underneath.

What do I need here? I do not see any page peel specific libraries so I am curious if anyone has any tips on what libraries might support this?

Do I need to go full on 3D? Is this a mesh? What is a good start to look into for this?

Thank you!

1 Like

1 Like

Thank you! Am I missing something though? I get this error:

Cannot find a class or type named “Book”

Is it possible I don’t have the right library? I am on Processing 3

you can download the whole thing as zip
I agree though that openprocessing does only show ONE pde

Anyway, I downloaded and it totally didn’t run, maybe @quark can help

I had difficulties with private PGraphicsJava2D pg;

Thank you!

Yes I received a similar error once I signed in and downloaded all of the files.

My error was: "Cannot find a class or type named “PGraphicsJava2D”

Is that because this is from an older version of Processing like Processing 2? Or maybe there are other dependencies?

Thank you for your help!

1 Like

Wow - this is a very old sketch from circa 2014 and was created with Processing 2 and webpages still allowed Applets. :grinning:

First thing to say is that the code is created in Java Mode so uses the Java language therefore will not run in a webpage. If you want something for the Internet it would need converting to Javascript or find a Javascript page turner library on line. At the time I remember some JS page-turners of varying complexity and not all were free.

I did do a much more complex version that allowed for animation even on the page being turned. Unfortunately I can’t find the code for either but I have downloaded the example from OpenProcessing and if you are interested in a Java version then I will try and convert the code for Processing 3.

2 Likes

@quark – I just took a look at this to see if I could quickly convert it to PGraphics and P3 – but I wasn’t sure about the use of the .g2 references. Were those built-in in Processing 2? I mainly skipped from P1 to P3.

The sketch is very old and uses P2 when P2D and P3D were software emulations and did not use OpenGL. At that time all sketches were displayed using a JFrame and had a java.awt.Graphics2D (g2) drawing context. In P3 P2D and P3D use OpenGL windows so we cannot use the PGraphics class to reference the book image buffer, rather we need to use PGraphicsJava2D.

Anyway back in August I had a go converting the sketch to P3 myself and go it working except for one bug. The back (non moving) pages should appear behind the turning page, I was going to try and fix it but got side tracked and forgot about it. Anyway you can download this P3 sketch here and it you find the problem please let me know.

1 Like

Awesome thank you for the tips everyone I am going to try this again today!

Okay, after digging in it looks like we will need to look at a newer approach.

@quark I really appreciate the time you put into resurrecting that sketch. However, it needs to be modernized a bit so lets see what we can do.

First, I need to think of how to organize this. It seems like we need to apply a texture (our image of some text) to a mesh so we can manipulate it easily.

Then once we do that it’s all about the math used to turn over the page right?

Okay, so I dug into the libraries looking for some examples and it seems like the ToxicLibs library is the best but it’s also pretty deprecated. last blog post was in 2011. Yikes!

Still haven’t found any examples in there about how to apply a texture to a rectangular mesh but I will keep looking.

What about other libraries? Do we know of any?

Thanks!

Of course Daniel Schiffman already has a killer example…

3 Likes

Although the Toxiclibs library was created a decade ago it has been updated for Processing 3 so is good to use. I think it was Schiffman that updated it :slight_smile:

The sketch I created uses 2D and clipping zones to produce the page turn affect, you could use a mesh but the mathematics is likely to be more challenging.

Anyway I used what I learnt on this sketch to create a more sophisticated example using the Dart IDE, JavaScript and Processing core. You can see it here

1 Like