Page 2 of 2
Re: Flipping Cards
Posted: Mon Dec 30, 2024 8:37 pm
by OpenXTalkPaul
tperry2x wrote: ↑Sun Dec 29, 2024 4:50 pm
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.
Re: Flipping Cards
Posted: Mon Dec 30, 2024 11:14 pm
by tperry2x
richmond62 wrote: ↑Mon Dec 30, 2024 7:01 pm
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 5780 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.
Re: Flipping Cards
Posted: Tue Dec 31, 2024 12:39 am
by OpenXTalkPaul
tperry2x wrote: ↑Mon Dec 30, 2024 11:14 pm
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.
Re: Flipping Cards
Posted: Tue Dec 31, 2024 10:01 am
by 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 5739 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/
Re: Flipping Cards
Posted: Tue Dec 31, 2024 12:34 pm
by richmond62

- Screenshot 2024-12-31 at 14.33.15.jpg (202.64 KiB) Viewed 5725 times
-
Attached stack removed as a new version has been appended to the next posting.
Re: Flipping Cards
Posted: Tue Dec 31, 2024 5:59 pm
by 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 5708 times
Re: Flipping Cards
Posted: Tue Jan 14, 2025 1:03 am
by OpenXTalkPaul
richmond62 wrote: ↑Tue Dec 31, 2024 5:59 pm
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.
Re: Flipping Cards
Posted: Mon Jan 20, 2025 2:48 pm
by 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 4416 times
Re: Flipping Cards
Posted: Mon Jan 20, 2025 3:16 pm
by 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.
Re: Flipping Cards
Posted: Mon Jan 20, 2025 7:50 pm
by tperry2x
richmond62 wrote: ↑Mon Jan 20, 2025 3:16 pm
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"
Re: Flipping Cards
Posted: Wed Jan 22, 2025 10:06 pm
by 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.
Re: Flipping Cards
Posted: Sat Jan 25, 2025 7:02 am
by tperry2x
tperry2x wrote: ↑Wed Jan 22, 2025 10:06 pm
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.

Re: Flipping Cards
Posted: Sat Jan 25, 2025 8:31 am
by 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".
Re: Flipping Cards
Posted: Sat Jan 25, 2025 9:01 am
by tperry2x
richmond62 wrote: ↑Sat Jan 25, 2025 8:31 am
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 4194 times