I have a question for those who are experts on graphics 2.0 and shaders:
Is it possible to make a advanced page curl effect like in this video, using graphics 2.0 and shaders?
www.youtube.com/watch?v=Yg04wfnDpiQ
(It should of course also have the ability to turn the pages back again)
If it isn´t possible, I´m going to wait for the talented Jason Scroeders page curling module 
www.youtube.com/watch?v=n15AK4AR43Y
Thanx!
Tom
Dragging from a corner or horizontally looks pretty straightforward, but I’m not quite sure what an off-center curl is doing. I think the curl in these cases could be reasonably approximated by a cylinder (or half of one), the axis of which is perpendicular to the direction of motion.
*Plays with sheet of paper for a while*
Okay, I have a rough idea of how this must work. It looks like cones would suit the rest.
Off-hand it’s hard to estimate how difficult it would all be. I’ve got cylinder code, but nothing for cones. They are both conics, so in theory an either-or shader is possible.
I could put together some notes if someone wanted to pursue this, though probably not tonight. Not sure I’d be able to tackle it any time soon myself…
For anybody who knows, how do these sorts of techniques tend to handle motions that would tear a physical page?
Thanx for the input starCrunch!
I really would LOVE this kind of effect, but I havent started playing with shaders yet. I think this is going to be too much for me to handle as a novice.
Maybe Steven Johnson from Xibaba Studios would be the “shader maestro” for this kind of task :rolleyes: With the help from Jason Schroeder (and his module) and your (starCrunch) notes.
My storybook clients always ask for this effect and I see other Corona developers are asking for this effect.
It would be great if some coding ninja/ninjas took the challenge.
Our Corona storybook apps would look awesome!
The community could start a fundraiser.
I will chip in with $100 to the guy(s)/girl(s) who manages to make this effect and shares it with the community.
I would also print out a picture of you and put it on my nightstand, so I can thank you every night before I go to sleep 
(The effect has to be able to turn the pages both ways)
Oh, heh. That’s me, actually.
That… would be incredibly weird. 
I’m open to it (err, the page curl, not the picture thing), though it would be good to know I wasn’t stepping on any toes, say if Jason has plans to pick up on his own implementation soon. That said, I’ve got a few little projects I’d like to finish or at least get going on over the next couple weeks, so it’s not something I’d be willing to start immediately.
Also, I probably need to let all the touch mechanics stew in my mind for a while anyhow. (It would be a bit spooky if it calls for something I only just got working recently, but it actually might…)
No worries about stepping on toes, Steven. If you think there’s a good way to accomplish this using shaders, then please have at it! My own method works as seen in the video I made but it’s not as flexible (or as organized) as I’d want to consider it “release ready,” which it why it sort of withered on the vine, as other projects and client work picked up. I’ll try to revisit it when I can - but like you, I’m not able to drop everything and work on it immediately.
@Tom: if you want, I can post my “not ready for prime time” version of the module here, but you’d have to work through it on your own for now - and it’s probably none too pretty or organized. Let me know if that interests you at all.
Thanks,
Jason
Oh! So you are starCrunch, Steven
*Feels embarrassed and a little starstruck* :unsure:
The picture on the nightstand is off the table then, but not the money.
I´m happy to hear this is stewing in your mind Steven. It gives me hope.
There is of course no rush but I just feel like this is something that is missing in Corona.
I hope you get some help from the community with this, but I can’t contribute because this is way over my level of intelligence :unsure:
I would love to see your code @Jason.
I feel there is a need for both effects.
I would use the “Jason page curl” on books for children because that effect is less confusing for a child. But the advanced effect would be amazing in a book for youths or adults.
So no toe stepping in my mind
-Tom
Hi Tom,
You can download a zipped-up sample project (the one seen in that YouTube video) here: http://www.jasonschroeder.com/corona/pageCurl/pageCurlSample_Alpha.zip
You can load that project in the Simulator and try it out, and you’ll see “pageCurl.lua” is the module that enables the page curl effect.
In particular, I didn’t release this because I’m not sure it’s stable yet on all device types and screen ratios, and I’m certain that the math being used is not the most efficient (and might be downright wrong in some areas). This first pass at the module was all about getting it working in my sample - and it does - but I stand firm in my assertion that it’s “not ready for prime time” just yet. But you can at least take it for a spin and see how it works under the hood. You may even be able to use it in a project, depending on the particulars, but I don’t vouch for it’s durability just yet.
I’ll try to put some time into it in the next few weeks to see if I can spiff it up. If I do, I’ll post an update on this thread.
Thanks,
Jason
Nice job Jason!
I really like what you have done and I´m pretty impressed by the way you have solved this.
It seems to run smoothly on the simulator, but there is a lag on my Iphone 6 plus the first time I start the template and go to a scene (only from the first scene). After that it works great:
I will check this out when I get the time, but it seems like the module works great and I will try to implement this in a project one day. If it doesn´t work, I know who to blame
No seriously! You should not worry about the module not working perfectly Jason. The community can find the bugs themselves and post their own sollutions or improvements in the forum.
I like your effect a lot and it will look great in my books for children, but I´m also hoping for that advanced page curl one day for other projects. So just keep stewing Steven!
The advanced effect has the ability to make a Corona app go from " oh this is a cute app" ^_^ to " WOW THIS APP IS SO FREAKING BEAUTIFUL I WANT TO FRENCH HUG IT!" :o
Thanks for the hard work for the community Jason and Steven!
-Tom
It’s messy and far from complete–among other things, I’m still puzzling out the touch controls–but here’s a WIP for anyone interested: Page Curl I’ll try to give an overview of the ideas at some point, but that entails explanatory pictures that I don’t want to make just now.
I’ll probably try to turn this into a plugin eventually, so I’d be interested in others’ suggestions or experience from using similar libraries. Among other things:
DAAAAAAAAAMN, Steven.
Wow, that’s fantastic! Amazing work.
This would be really useful as a Composer scene transition option. It doesn’t need to be interactive, just a preset transition which occurs automatically between scenes. You might define: transition duration, easing, x,y start and end. Shadows would be nice…
Even with what you’ve done now, it could go straight into Composer scenes for those already using custom effectsList. Is it the enterFrame listener where you are defining the current looping animations? It would be great to know what to put in there to achieve say… a curl from bottom right to top left easing out with an inQuad type shape…
Very very cool.
Thanks!
@ kilopop
By the looks of it, I’m not really gaining much by breaking the three stages up into separate shaders (well, except for some interesting accidents when I got the alpha wrong!), so I’ll probably merge them soon. What you see in the enterFrame is updating the inputs, yes. (The “clip” shader should also just take an angle for consistency, rather than nx and ny.) Basically, the u and v arguments make up some point (each component goes from 0 to 1: 0 being left and bottom, respectively; 1, right and top) along the “edge”, where the page starts to curl, and angle (in radians) defines the outward-facing normal, i.e. the direction facing “away” from the page, perpendicular to the edge / curl axis.
Assuming you just want a right-to-left roll, you’d transition u from 1 to 0. (Or 0 to 1, with angle = math.pi.) You can play around from there.
Right now it’s wrapping as if around a basic circular cylinder, but I’m going to experiment with tapering between two radii (if you curl a physical page you can see how the shape gets a bit cone-like).
Nice one, have this working now as Composer scene transitions with u tethered to parameters returned from the effectsList.
Specifically about using the curl as Composer scene transitions: In order to curl a scene, the screen needs to be captured (display.captureScreen()), but there will be an extra step involved to save it to the cache in order for the image to be applied as a fill. Have yet to try this, but I imagine it will result in a pause before the transition begins… I’ll report back with findings, otherwise if anyone has ideas around screen captures vs speed tests? Or is there another way other than defining a paint fill? It would be better to pass an already loaded object such as a screen capture without saving it somewhere first…
@ kilopop
I saw your other thread about texture memory. I’ve now uploaded a new version with an all-in-one shader. I’ve only commented stuff out for now, so look at the code to see what’s changed. Basically, just take a capture and slap the shader on it rather than add a paint. Don’t bother with the “* 2” stuff you see me doing, since I assume the transition is full-screen already. Round it out by adding a #define NO_CLIP line early in kernel.fragment’s code. (As an aside, whenever captures / snapshots as paints do work, there will be much rejoicing on my part!)
For anyone interested, I’ve tried to explain what’s going on in the shader’s comments. I hope it at least gives an idea, but man, it’s hard to distill some of this stuff into words. :mellow:
EDIT : I suppose NO_CLIP gets it exactly backwards… probably will be NO_EXPAND in the future.
Good stuff Star Commander. Your new version works a treat! Now one screen capture is all that’s required which certainly helps with the texture memory biz. Roll on capture images in bitmapPaint…
The speed of the scene transitions has also improved although the curl is not quite as smooth on the device. In a scene transition of time=500, the pageCurl enterFrame function happens around 22 times. On iPad device, this is more like 7 times. Perhaps this is to do with the way I have set this up. But essentially, t is tethered to a sceneGroup property such as alpha or x which changes during a non-concurrent, custom made scene transition. You may have another approach with better speed results.
In your first version, the back of the page could be set as a color - is that easy to re-apply?
I have no idea how you do this stuff - it’s wizards work!
Hi.
About to head off to sleep here, but I’ll try to give a quick couple points.
On the smoothness thing I don’t know off-hand. Increasing shader length and including a bunch of if branches isn’t a free lunch, but your other comments don’t make it sound like it’s slow. Hmm.
If you only want to set the back of the page, just remove the second CoronaColorScale (), which handles the “front”. (Actually, that’s probably better terminology than the “lower” and “upper” I used in the comments.)
Shadows aside, this effect is mostly just some geometry and trigonometry. But yeah, some effects can get quite arcane.
Ah the magic of trig.
btw - how would you keep the front as the image but have the back of the page be a flat color - white probably to simulate a paper look… What do you add or change in your latest to get this effect?
The first CoronaColorScale(texture2D(…)) (the earlier return) is the back pixel. Basically, just replace the texture2D () call with vec4(1.) or vec4(1., 1., 1., 1.). White is all ones, just as in Corona itself.
If you don’t want the black border you can just strip the stuff in UPPER_SHADOWS or whatever I called it. (I’m actually thinking I can hoist that out into two or three manually oriented auxiliary rects–one per edge–with their own shader, then just layer the shadow on top of the front page. This would cut out those per-pixel tests for shadows in the effect proper and the shapes could be made a much better fit anyhow.)
By the way, since I’m seeing “real world use” in action, I’m considering all these things you’re trying for my stable of options.
Actually, since you’ve already been running with it (do you have a video or sample, by the way?), maybe I’d be wasting time trying to add my own scene transition support into an eventual plugin. I’m thinking in the end of just exposing some functions like SetNormal (), SetPoint (), and SetRadius () and abstracting away the underlying bits.
Have you considered putting together a suite of scene transitions? It sounds like you must already be playing around with them. I’d like to see how well “related” plugins end up working.
Your post was synchronistic timing as I’d just finished a version of a page curl which is just an animating image across the screen. So I have time to help test and work through a composer ready page curl.
You’re right, it’s been easy to create a transition module. So far, I’ve only required a proper fade to black, a 2.5d card cover book open effect and the page curl. With use of custom effects in the composer transition effectsList, any kind of transition is possible.
Anyway, I’ll PM you some video grabs and a break down of the Composer related code thus far…