JIGSAW PUZZLE 2d-video v_100

hh hh at hyperhh.de
Thu Dec 27 23:10:02 EST 2018


JigsawPuzzle2d-video is a HTML5 standalone that demoes what LC is able to do.
I have seen such "live" computed puzzle pieces until now only in specialized
native apps.

Images.
You can choose a built-in image or import a local one into the standalone.
Moreover choose the base width for the pieces and whether to rotate the
pieces. The base width determines the number of pieces. If for example the
image has size 480x360 then a square width of 60 yields 8x6 = 48 pieces.
As a help you can be notified (the image will be inverted) whenever you are
very close to the correct location.

Videos.
As above but without importing, use one of the nine built-in looping videos.
The segmenting of the video frames is done with canvas methods in javascript.
This will stress your CPU/GPU! It runs at about ten times faster in
the IDE with a browser widget, but sadly this is memory-leaking (5 MBytes
per second). The HTML5 standalone runs at about two times faster in Safari
than Firefox or Chrome/Opera. Reduce the number of pieces if you have less
than 2-3 frames per second.

Technique used: The pieces are live in LC computed polygon graphics of linear
and cubic bezier curves.
They are filled with backpattern-images from portions of the whole imagedata.
Only this last imagedata part is for the videos "outsourced" to javascript.

A pure LC version of the technique used is available in "Sample stacks".
This has images only but is even fast enough for the slowest Raspi.

Test (and download the source and the calling HTML page (contains short but
important javascripts) from
(US) http://hh.on-rev.com/html5/jigsawPuzzle2d-video-9.0.2hhX.html
or 
(EU) http://hyperhh.de/html5/jigsawPuzzle2d-video-9.0.2hhX.html






More information about the Use-livecode mailing list