Flipping book page effect on text

p5.js Coding Questions
1

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 in p5.js.

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

3 Likes
2

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/ or a related 3d library to achieve what you want.

Also this thread might interest you:

1 Like
3

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

image
image2000×2000 71.9 KB

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)
}

1 Like