Visual effect dissolve?

[gingerbeardman]

I've decided to convert a famous 1992 Christmas animation from HyperCard to Decker. I think it would make a super 30th Anniversary surprise for the artist who is a friend of mine.

I'm happy to either keep everything to this one issue, or split it.

HyperCard to Decker

• onmouseup = on click (like for like)
• play built-in sound at with specific properties (workaround by importing recorded sounds)
• visual effect dissolve (missing)

Currently the only real thing missing is visual effect dissolve. And arguably the sound playback is simpler or less versatile depending on your point of view.

---

Details of the project...

Progress

1. I've exported the images using HyperCardPreview and an old Mojave MacBook Pro.
2. I can see the code by inspecting the original stack in HyperCard under emulation.

Specs

• 503 cards
• 1 image per card
• 1 simple script to advance
• one sound for the first frame
• another sound for all subsequent frames
• visual effect dissolve

To Do

1. Import all images, one per card
   • initial attempt at this was quite confusing, I expect the image to remain resizable but it does not?
2. Record original sounds
3. Rewrite script

HyperTalk script

on mouseup
  global fg
  if fg is 1 then
    play flute tempo 120  d3e a3e
    visual effect dissolve slowly
    go next
    put 2 into fg
    exit mouseup
  end if

  if fg is 2 then
    play flute tempo 120  a3e d3e
    visual effect dissolve slowly
    go next
    put 1 into fg
    exit mouseup
  end if

end mouseup

[JohnEarnest]

Sounds like a fun project!

Decker cards themselves do not produce click events, but the pointer interface exposes live information about the mouse button and can serve as a substitute. You need to kick off the initial event, perhaps with a button on the first card, or via the view[] event on that card. If I understand the above script, an equivalent might be something like

on wait do
  while !pointer.held sleep[] end
  while  pointer.held sleep[] end
end

on view do
  while 1
    play["flute1"]
    go["Next" "BoxIn"]
    wait[]
    play["flute2"]
    go["Next" "BoxIn"]
    wait[]
  end
end

Assuming that "flute1" and "flute2" sounds exist, and temporarily substituting "BoxIn" as a transition animation. Note that choosing an invalid transition name with go[] results in no delay at all.

Dissolve is a bit complicated, but I think it could be achieved with a suitable lookup table and the canvas.merge[] operation in a custom transition. The transit.deck example is a very basic editing/preview tool for building new transition functions with a few extra examples.

If you're importing 503 images, it might be a good idea to automate the process with Lilt, which can create decks from scratch, add cards, and load images from GIF files.

I'm not exactly sure why this is an issue? The itch community forum would be a good place to showcase WIPs.

[gingerbeardman]

This issue is a (verbose) request for visual effect dissolve 🙃

I should have really kept it short and sweet, sorry about that.

[JohnEarnest]

Did a bit of tinkering with a dissolve transition, and along the way found some bugs in canvas.merge[], so it was a good exercise.

Firstly, I generated a 32x32 image with a uniform distribution of 256 grays to use as a lookup table. The idea will be to use the tween value to select a threshold in this table; lower values will show the new image, higher values will show the old image. To avoid doing the work of generating this LUT at runtime, I encoded it:

lut:image["%%IMG1ACAAIE89euIjSGos8HDHDdaH0cTJI1FA4vxarzRTKlUc0N/Az4L8n7UcRCOz68jQ5bwirLO5ymT7VnFa7t3owcHH1cqgoe6SHc4uD3FLVSFBA+RGwQf9ROaTpLZZwFhZhDyTLlt7vyk4AoXn62MWR2jQbwRzFIHNHxlBRAj11jfi9pE29hm9KMYyqAVzUvNLBQ6QWv6nsobtztFugL4AHnxgrdCst32fmiwEDEq95NMtX/gg5w/0S+kSnztUJJhDOverTrq4h+R8G727VJH1Y4SqxSJXntWPre+I+Tay8eCdZULeLyeNZ4oB+6qMGD5u9YKucjH/zh4/zjE3t07rtnf82TF4/qMqAGfSPol2+TmbYy+dm54J4OY0xt30/d6CGVfYmBNgeFdSzHSkakxejZF72l7YrMsxxUDsIdQfF20ZIZbTM8anpEMOgwcEg+Cwi5hZNRrjcCVFtEl6GMIAbzvxqadk+qmqINLbjn5P6gq9nhhyhP9GJ+GTg8heKTd716IoH4bfKNSJeruxCMXMy9qQ7SSxivNrNtcQ6EyNujoGyunVUFIWTTBS90qhd/tOw4s8llGwbIo/p668h25riz/fIFb0CZ3DLAUScmqlbn0vAjaAEdwQc6FV/2Od8ZAJsekhxzq23ZUCXBOxMpQOz5Sv+l+XTCdxFoDMeiYNs4zvLplNCxx1z3g34UZbK6AfXfIUvDP+QQPCviJiKYGW8qM/pjmjZlsi3aUjqqtrmdt2dMMBvvMy1xqvB03s2ZlsjR11JjAAnIHgm2hsVlMqmtLECew+6Vz0k5wISHk9ZmGgFVg4uOOJXefEK1SXRTVHPXnz44lwhUOM2i0r+ECfuxT2TxuBdUHw/8sKuX5RIHdkiFFthZLshFneWPrZBrSUmBOI8fJ42ciuGgN9PG9LosqPmpTNA0TNaD3jzGlCCySM644qCuV/4dM1DjUVoAbkAZB7XEAe20YPt8IMdFsmR3nuv+JtZsn+pl+b/HwHGLU5YsVOLr+yCklQUMumWjuha3Y4nF4RYSy62w1igwEmzSu5aXEbkkh+FXkXz/ALx8n4T+1W5gZ3ZRbGGm/DAoXlZkIUZ2moEIZgjxDTVSf5akWClhK8Qn/cubTyHWSj0V0esqi3qEdcZd52VJ71lzTh2KXClabvc1NMsDuKjtSZ+q0TbPvwKNEzUyR8OTNp3Fd/SSWIujSpLWiXSffnMLjSuHQbF3+OYg2tYQxDpFDWyTgR6C0SlZwwqSX2rqt93Iea7+q23wVF7fi+v+qLSl8EPPclZ/nWStew1di7s+gdtGUIMnI+5nAptZHayMAvTToLD3Wi5Y9dlRX9rKLA6mHBkhyAtX6GYKuvxKUXbUj97hEMWNQ="]

Now the transition function itself. We get a canvas (c) to draw on, images with snapshots of the current and next card (a and b), and a tween from 0-1 (t). The canvas pixels all begin clear (pattern 0), so our first merge[] operation will tile the entire canvas with pixels from the LUT, drawing a repeated texture. Then, we use those tiled pixels to index into pixels from one of the source images:

on Dissolve c a b t do
 c.merge[lut]
 c.merge[((floor 255*t) take b),(256 take a)]
end

And to register this as a transition animation usable throughout the deck, I'd just add

transition[Dissolve]

All of this could in any script, really, so long as the transition is registered sometime before you try to use it. At some point in the near future I'll package this up as a module with some more fun extra transitions, to make it even easier to use.

[JohnEarnest]

I've packaged the above "Dissolve" transition along with many more in a new example deck called "Public Transit": https://github.com/JohnEarnest/Decker/commit/91cae19c7a18e8a439110197ecf198ba473e9eed

Adding a dissolve transition to your own projects is as simple as importing the module from this deck and then using it just like any of the built-in transitions.

I think this comprehensively addresses the ask for an equivalent to Hypercard's "visual effect dissolve", while also providing a clear example for Decker users to follow in making their own modules of transitions.

[gingerbeardman]

Many thanks, John. Above and beyond!