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

**URL:** <https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193>\
**Category:** Project Guidance\
**Created:** [August 11, 2020, 11:17pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193 "2020-08-11T23:17:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [August 11, 2020, 11:17pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/1 "2020-08-11T23:17:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 12, 2020, 4:26am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/2 "2020-08-12T04:26:25Z")

</div>

https://www.openprocessing.org/sketch/65678/embed/?

---

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [August 13, 2020, 10:10pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/3 "2020-08-13T22:10:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 13, 2020, 11:12pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/4 "2020-08-13T23:12:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [August 13, 2020, 11:27pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/5 "2020-08-13T23:27:53Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 14, 2020, 9:35am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/6 "2020-08-14T09:35:59Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 20, 2020, 9:41pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/7 "2020-09-20T21:41:06Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [September 21, 2020, 8:43am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/8 "2020-09-21T08:43:00Z")

</div>

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](http://lagers.org.uk/zzz/PageTurner-200921a.zip) and it you find the problem please let me know.

---

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [September 21, 2020, 7:25pm UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/9 "2020-09-21T19:25:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [September 22, 2020, 1:37am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/10 "2020-09-22T01:37:52Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)\
**Post date:** [September 22, 2020, 1:40am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/11 "2020-09-22T01:40:56Z")

</div>

Of course Daniel Schiffman already has a killer example…

[![](https://img.youtube.com/vi/JunJzIe0hEo/maxresdefault.jpg "Coding Challenge #63.1: Texturing Cloth Simulation Part 1") ](https://www.youtube.com/watch?v=JunJzIe0hEo)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [September 22, 2020, 9:14am UTC](https://discourse.processing.org/t/how-to-create-page-peel-or-page-turn-effect-in-processing/23193/12 "2020-09-22T09:14:31Z")

</div>

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 🙂

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](http://www.lagers.org.uk/gallery/gy-geom-1/index.html)