I know this is probably never gonna get added but I thought I’d mention it anyways. It would be cool if there was a filter where it makes clones of the original media and makes it fly through the air in random directions as if it emitting copies of itself. There could be controls for where the particles go and how fast the move.
(I know this is a weird example of what i’m talking about but it demonstrates it well) You can see at the parts of the video with the numbered eggs that there are multiple eggs being emitted.
Yes, you’re right it can be done with an Overlay HTML filter using WebVfx. I do something similar with my framework with the “franmentation” option. There I split an image into multiple chunks and animate each chunk. I’d use that as the basis for some code to take a picture and animate multiple copies of it I might have a look at it if I can find some spare time.
I thought so.
I’ve managed to create an effect using your fragmentation code. It’s an image that’s in pieces that come together. It works but I’d like to use it as an overlay or maybe a transition. Can’t figure out how to get the fragmentation to overlay on a video or image. Any tips?
Thanks for the tip @Elusien.
Finally got HTML overlay to work. The implode/defragment sequence can be used for a transition or titling. Have to work on the explosion effect next.
In case any user wishes to use these effects I’ve put the folders containing the html code, and a sample image here.
Both effects are set to use Image.jpg for the frag/defrag effect. If you need to use a png, simple copy Image.png into the folder and edit the html code to to use Image.png instead of Image.jpg.
The data control attribute is set to 2 seconds at 30 fps. The column width and height are set to 10.
The easiest way to use the effects is to copy the folder(s) to the project you are working on
and create one folder for each effect then use the overlay HTML filter to apply the effect to the image.
Put the image you want to use in the folder and overwrite my sample image.
WOW - fantastic demos, @sauron . @elusien 's fragmentation/defrag work so well as transitions!!! Can’t wait to experiment with this. Thanks sauron for making the resources available for download. Excellent work
It took me a while to figure out how to modify the code.
Html overlay wasn’t working until 18.12.23. Now it’s working pretty well with the Beta. At times it slows to a crawl. Found it easier to use chrome browser to do most of the experimenting.
Looking forward to see what you do with the frag/defrag.
Hey, hey, HEY! - Success today making transitions (inspired by @sauron ’ s work above) using @Elusien 's Defragmentation feature (part of his WebVfx framework).
So, my demo has 8 images (they are frame captures grabbed using Shotcut, from a video). I called them image01.png, image02.png etc. I copied the “Defragmentation” HTML file 8 times, changing the image of each one to image01.png, image02.png etc…
My folder looked like this:
Then imported the 8 pngs onto 8 video tracks, as shown here:
I should have included my track layout and made things a bit easier. You have 7 tracks too many. Did mine with 1 track for the transitions and 1 audio track.
Ah, a much simpler solution! Wish I’d done that! Thank you.
Anyway I think it’s a really cool effect. I have no idea whatsoever how anyone can think of code to produce this effect. Mind-blowing!
Also, question to @elusien - could the code be adapted so as to achieve transitions between video clips, rather than still images? Thanks.
I’m afraid not. My HTML fragmentation code can only handle static images. You could get a snapshot image of the the last frame of one clip, apply the fragmentation filter to it, then get a snapshot image of the first frame of the next clip and apply the defragment filter to that. Similar to what you did in your video.
However, there are a whole set of different transitions (67 to be precise) showcased on here:
To see how they perform you can play about with them by moving your mouse pointer across the individual images. You can tailor them by clicking on the image. Dan has been good enough to provide me with some code that I am using to make it simple for any user of Shotcut to make use of them. See here:
I have written the first bit of code and now it is fairly easy to do the rest. I should have something available for people to try within the next few days.
The code is an Overlay HTML filter that you apply to a transition. To use it:
You create a very simple HTML file that has just the HTML ‘<canvas>’ tag in it specifying the name of the transition you want to use and any of its parameters that you want changing e.g. ‘<canvas id=“swirl”></canvas>’
You then create a transition between two clips as would normally (dragging the left clip part way over the right).
You then select the transition area on the track and apply the Overlay HTML filter (with the WebVfx option ticked) to it.
Et voila - the transition is applied. It uses the GPU for rendering the transition.
I will make an announcement on the forum when I have the finished product for people to use. At some stage I might get round to adding some of my own transitions into this new framework.
Did mine with 1 track for the transitions and 1 audio track.
