# Flipping book page effect on text

**URL:** <https://discourse.processing.org/t/flipping-book-page-effect-on-text/39059>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 3, 2022, 4:29pm UTC](https://discourse.processing.org/t/flipping-book-page-effect-on-text/39059 "2022-10-03T16:29:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fijthecreator](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Post date:** [October 3, 2022, 4:29pm UTC](https://discourse.processing.org/t/flipping-book-page-effect-on-text/39059/1 "2022-10-03T16:29:35Z")

</div>

Hi Community, as I have already opened up a discussion about a separate project I am curious about the possibility to recreate this effect: [3d Shape fill connects to first vertex on P5.js webGL - Stack Overflow](https://stackoverflow.com/questions/61699129/3d-shape-fill-connects-to-first-vertex-on-p5-js-webgl) in p5.js.

Is this possible to achieve and if that’s the case how could I achieve it? (Beginner friendly)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 8:00am UTC](https://discourse.processing.org/t/flipping-book-page-effect-on-text/39059/2 "2022-10-04T08:00:16Z")

</div>

Hi @fijthecreator,

As mentioned in the SO thread, this is a known limitation of p5.js WEBGL mode.

I would also suggest using [https://threejs.org/](https://threejs.org/) or a related 3d library to achieve what you want.

Also this thread might interest you:

> **[Animating pages of a book](https://discourse.threejs.org/t/animating-pages-of-a-book/28883)**
>
> Hi! I want to create 3d book with separate pages where i can manually flip the pages by click on a page. So I created a book with an animated page. I duplicated the page in blender that I have multiple animations, one for each page. I have no idea...

---

<div class="post-metadata">

**Author:** ![fijthecreator](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Post date:** [October 4, 2022, 12:25pm UTC](https://discourse.processing.org/t/flipping-book-page-effect-on-text/39059/3 "2022-10-04T12:25:36Z")

</div>

Thanks a lot for that feedback, while I kept experimenting with p5.js and how to achieve this effect I got that far:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/9/d9e901e13e6a5adcf940ab07026feb6f46a52997.jpeg)

With the following code:  
let img  
let shadow

function preload() {  
//img = loadImage(‘test.png’);  
img = createGraphics(400,400)  
img.fill(‘black’)  
img.noStroke()  
img.textSize(100)  
img.text(“VIZN.”,0,80)  
img.text(“VIZN.”,50,180)  
img.text(“VIZN.”,20,280)

img.filter(BLUR, 0)  
}

function setup() {  
createCanvas(400, 400,WEBGL);

}

function draw() {  
background(‘white’);  
rotateX(PI/4)  
rotateZ(PI/8)  
scale(4)  
texture(img)  
textureMode(NORMAL);

beginShape(TRIANGLE\_STRIP);  
for(let i=0;i\<10;i++){  
let posX = map(i,0,9,-40,40);  
let posZ = map(sin(millis()\*.005 + i),-1,1,0,5)  
vertex(posX,-40,posZ,i/9,0)  
vertex(posX,40,posZ,i/9,1)  
}  
endShape()

noStroke()  
plane(80,80)  
}