Flipping Cards

[OpenXTalkPaul]

This is the method Paul talked about, using the lcb extension. You'll have to load that in via the "Tools" menu > "Extensions Manager", then open the oxtstack.

Widget from here.

That's the one from Hermann Hoch that inspired me to do my own experiments with that in Extension Builder.
And this one too: https://hh.on-rev.com/widgets/turnimage.html

They work fine with the Community Engine, but unlike most of his work (that were MIT licensed), HH did NOT include the source for those two widgets (so we can't include them with the IDE). So what I did was to experiment with that Builder-wrapped Skia image transform function myself, making the parameters into properties that are accessible from the Property Inspector.

Here's some documents about the mathematics of warping pixel images:
https://academicworks.cuny.edu/cgi/view ... xt=ho_pubs
https://quadst.rip/warp
https://people.computing.clemson.edu/~d ... -warps.pdf

To be honest, when I see math, like in some of those above links, my brain starts to ache,
Fortunately the Engine already includes libSkia which already has the needed transform functions enough to do a 2D to 3d-card flip (as seen in HH's work). If you want other sorts of distortions (like curved distortions) you'd have to work it out yourself and do the operations directly to the pixel image data.

[tperry2x]

I've been doing some tweening.
Clunky and chunky: BUT the blasted thing works . . .
Mind you, the thought of making all those images for 22 Tarot cards, or 52 playing cards, makes me feel a bit woozy.

Here's my clunky thing too.
I haven't gone too far with it, as it's rough - but you can see what I was thinking.

rough-flipping.gif (159.21 KiB) Viewed 5433 times

Essentially, divide the card image up into segments via script, then pull at each segment to give the illusion of it turning. Needs a lot of refinement, just an idea at present.

[OpenXTalkPaul]

Essentially, divide the card image up into segments via script, then pull at each segment to give the illusion of it turning. Needs a lot of refinement, just an idea at present.

That sounds like a pretty clever method (can't look at the script at the moment), and it looks pretty good too (as a GIF).

That reminds me, the engine had support for '9-Slice' images added to it at one point, and I never got around to trying that out.

You would only need a single common set of frames for the card-back, so that could be already cached and ready to go for the 'back' half of the animation.

[richmond62]

My stack used a series of images made using the 3D Transform thing in GIMP:
-

Screenshot 2024-12-31 at 11.59.21.png (222.82 KiB) Viewed 5392 times

-
As GIMP is Open Source I wonder if . . .

AND, having just discovered this, GIMP goes up in my estimation like nobody's business!

https://www.gimp.org/

[richmond62]

Screenshot 2024-12-31 at 14.33.15.jpg (202.64 KiB) Viewed 5378 times

-
Attached stack removed as a new version has been appended to the next posting.

[richmond62]

Here's a question that strikes me as a bit queer from across the way:

Was 19 enough resolution to make the action smooth? My gadget had 80 discrete steps in each direction, which was the minimum I felt in order to look OK.

19 images DOES make the animation look smooth.

I am now going to make a version with fewer images to see what I can get away with.

Using ONLY 10 images does NOT produce any obvious degradation over 19.
-

Screenshot 2024-12-31 at 20.08.12.png (263.08 KiB) Viewed 5361 times

[OpenXTalkPaul]

19 images DOES make the animation look smooth.

I am now going to make a version with fewer images to see what I can get away with.

Using ONLY 10 images does NOT produce any obvious degradation over 19.
-
Screenshot 2024-12-31 at 20.08.12.png

How many frames you need to look smooth enough (arbitrary) depends a lot on how much time your want your animation to consume. I always tried to used about 24 frames per-second (PAL video) or 30 fps (NTSC video) but I've also used half that (12/15 fps) to try to keep to smaller file sizes. So to do 30 fps you need to render 1 image every 1/30th of a second, that's about 33.3 milliseconds. That can be a bit of a strain for our 34+ year old interpreted scripting engine., specially if the images are on the larger size or are higher-resolution.

[tperry2x]

Not sure if you are still dabbling with this Richmond and Paul.
I was looking at Hermann Hoch's site - specifically, this page.

I was reading that the turnimage extension is licensed under "CC-BY", which as far as I can tell:

A Creative Commons (CC) license is one of several public copyright licenses that enable the free distribution of an otherwise copyrighted "work".[a] A CC license is used when an author wants to give other people the right to share, use, and build upon a work that the author has created. CC provides an author flexibility (for example, they might choose to allow only non-commercial uses of a given work) and protects the people who use or redistribute an author's work from concerns of copyright infringement as long as they abide by the conditions that are specified in the license by which the author distributes the work.

emphasis mine, so do you think we can use it?
I hope so - because it makes this all so 'flipping' easy

flippedy-flip-flip.gif (775.9 KiB) Viewed 4069 times

[richmond62]

That looks lovely. In class with a load of giggling Primary children . . . later.

BUT, my objection to it is that it is a widget written in "JCB": not xTalk as such.

[tperry2x]

BUT, my objection to it is that it is a widget written in "JCB": not xTalk as such.

I need a break from staring at C++ code for a while

I can make it as painless as possible:
(demo video)

I've checked, and any standalone you make does automatically bundle it all up, which is nice.

However - I just need to check / clarification if I'm allowed to post that stack (and see if I understand "CC-BY" licensing correctly...)
If so, it's as easy as on that video.
You then control it in xtalk (with xTalk scripting) by using:

To set the speed of the flip:

Code: Select all

set the animstep of widget "hhTurn" to [number]

To flip left:

Code: Select all

do "horizontal-180" in widget "hhTurn"

To flip right:

Code: Select all

do "horizontal+180" in widget "hhTurn"

To reset the angles of flip:

Code: Select all

do "resetangles" in widget "hhTurn"

To choose different images to flip:

Code: Select all

set the image1 of widget "hhturn" to the text of img "playingcardA"
set the image2 of widget "hhturn" to the text of img "playingcardB"

[tperry2x]

The one thing I do find ChatGPT useful for, is cutting through the cr4p that is legalese:

The CC-BY (Creative Commons Attribution) license is a permissive license that allows you to:

• Use the work for any purpose, including commercial use.

• Share the work by copying and redistributing it in any format.

• Adapt the work by remixing, transforming, or building upon it, even for commercial purposes.

Key Requirement:

Attribution: You must give appropriate credit to the original creator, provide a link to the license, and indicate if changes were made. The credit should not suggest the creator endorses you or your use.

In summary, CC-BY allows for almost any use as long as you give proper credit to the original creator.

That's it, - so as long as I fully credit Hermann Hoch for his work on which this is derived from, and mention that this example is modified slightly - then we are all good to use it?

Note on that demo video, I include a way to install the extension (without having to go through the normal process of installing the extension). You just need to click on the "install" button and the rest is done for you - makes it a one-click install, then the script to control this is very xTalk-like. Also, in testing - it all gets nicely popped into the standalone without the end user (receipient of the standalone) not needing to install anything either.

[tperry2x]

That's it, - so as long as I fully credit Hermann Hoch for his work on which this is derived from, and mention that this example is modified slightly - then we are all good to use it?

I know I keep going on about this, but the above demo vid I posted is probably the easiest way to do it. I just want to know if we have permission, - then I can draw a line over this one, and mark it as done.

[richmond62]

If the stack/widget/whatever is CC-BY you have no worries at all beyond, should you choose to use it in a bit of software to stick a note somewhere that says "This was done by Hermann Hoch and is licensed CC-BY".

[tperry2x]

If the stack/widget/whatever is CC-BY you have no worries at all beyond, should you choose to use it in a bit of software to stick a note somewhere that says "This was done by Hermann Hoch and is licensed CC-BY".

screenshot.png (98.71 KiB) Viewed 3847 times