Greyscale Luminosity Masks

[Elusien]

I have created a ZIP file with a bunch of HTML files in it. These files are parameterised and can produce quite complex luminosity masks (see below) for use e.g. in transitions. Just download the ZIP, unzip the HTML, edit to your liking, open in a browser and the PNG file will be downloaded automatically.

They are described here:

Resources for Shotcut (elusien.co.uk)

Click on the link there for more detailed information and to download the ZIP file. Some examples of what can be achieved.

Here’s a (slowed-down) transition I made earlier:

[Namna]

C’est génial
Cependant, comme je suis un peu critique, il me semble qu’avec le fichier “bricks” il y a un petit problème avec les 3 briques de droite (réglé sur 8 x 6). Elles apparaissent en dégradé et non pas en couleur unie

It’s great
However, as I am a bit critical, it seems to me that with the “bricks” file there is a small problem with the 3 bricks on the right (set to 8 x 6). They appear in gradient and not in solid color

Et autre petit détail, j’ai réglé 8 briques par ligne et il n’en met que 4

And another little detail, I set 8 bricks per line and it only puts 4

[Elusien]

I was hoping you wouldn’t find this until I had a fix - which I am working on and hope to put in place later this afternoon.

[jonray]

Wonderful! Thanks, @elusien

[Elusien]

@Namna I just fixed it - Enjoy.

[jonray]

Brilliant! The HTML file downloads a PNG automatically. @elusien strikes again… knock me down with a feather - how clever.
Straight out of the box I just made this short demo.
I just set each HTML file to 1920 x 1080 pixels. Done in 5 minutes.

Matte transition demos - using Elusien's greyscale luminosity mask HTML files

PS @elusien, how the £@&% did you design these? I’m in awe!

[Elusien]

@Namna

And another little detail, I set 8 bricks per line and it only puts 4

That too is now fixed.

[Elusien]

@jonray

I just set each HTML file to 1920 x 1080 pixels.

You don’t actually need to do this, since Shotcut upscales the luminence mask, though with 4K you might see a bit of pixellation with a 960x540 PNG.

If you have a different ratio though, say 4:3, you’d need to put in the correct resolution as otherwise the Shotcut would distort the masks and circles would become ellipses etc.

[jonray]

@Elusien

You don’t actually need to do this, since Shotcut upscales the luminence mask,

Ah, Ok, that makes sense. Thanks.

[Namna]

@Elusien

That too is now fixed.

Confirmé, merci, votre outil est formidable.

Confirmed, thanks, your tool is great.

[Elusien]

I was messing around with the GSAP library and realised it would be a great way of creating luminance masks. At first I created animations and saved them to MP4, but then realised for many animations I could just create a PNG file and feed it into thetransition’s “properties” as a “custom” preset. I could also use them with “Mask: From File” filters as well.

Once the “penny had dropped” it was a simple matter of parameterising them.

J’étais en train de jouer avec la bibliothèque GSAP et j’ai réalisé que ce serait un excellent moyen de créer des masques de luminance. Au début, j’ai créé des animations et les ai enregistrées sur MP4, mais j’ai ensuite réalisé que pour de nombreuses animations, je pouvais simplement créer un fichier PNG et l’introduire dans les “propriétés” de la transition en tant que préréglage “personnalisé”. Je pourrais également les utiliser avec les filtres “Mask: From File”. Une fois que le “penny était tombé”, il suffisait de les paramétrer.

[jonray]

@Elusien

it was a simple matter of parameterising them.

As you do…(!!)
Wow, that is so clever.

[Elusien]

I got stuck at one point and went on the GSAP forum website to see if anyone could help. Within half an hour one of their developers responded with the solution. It’s good to see other forums as useful as this one.

[Namna]

Je vois en haut du fichier html l’emploi de scripts externes. Si un jour ils sont modifiés sur leur serveur, cela ne fonctionnera plus en local?
Ne faudrait-il pas les télécharger pour les garder en local dans le même dossier que les fichiers html?
A quoi sert la ligne “intégrity”

I see at the top of the html file the use of external scripts. If one day they are modified on their server, it will not work locally?
Shouldn’t they be downloaded and kept locally in the same folder as the html files?
What is the purpose of the “integrity” line

[Elusien]

It is possible to download the scripts and include them, however, this would considerably bloat the files. These scripts are well maintained with versioning. It is extremely unlikely that anyone would modify these versions. A new version may become available, but the old version should never be changed. In fact the GSAP library is used by almost 10 million sites - so it should be OK, and in any case the latest version is 3.11.3 and the scripts use an older one, 3.6.0

The integrity attribute allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated. Subresource Integrity (SRI) is a W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been altered. See:

Subresource Integrity - Web security | MDN

I will change the <script> tag for the GSAP library. It should be:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js" integrity="sha512-1dalHDkG9EtcOmCnoCjiwQ/HEB5SDNqw8d4G2MKoNwjiwMNeBAkudsBCmSlMnXdsH8Bm0mOd3tl/6nL5y0bMaQ==" crossorigin="anonymous"></script>

Il est possible de télécharger les scripts et de les inclure, cependant, cela gonflerait considérablement les fichiers. Ces scripts sont bien entretenus avec le versioning. Il est extrêmement peu probable que quelqu’un modifie ces versions. Une nouvelle version peut devenir disponible, mais l’ancienne version ne doit jamais être modifiée. En fait, la bibliothèque GSAP est utilisée par près de 10 millions de sites - donc ça devrait aller, et dans tous les cas, la dernière version est la 3.11.3 et les scripts en utilisent une plus ancienne, la 3.6.0

L’attribut integrity permet à un navigateur de vérifier le script récupéré pour s’assurer que le code n’est jamais chargé si la source a été manipulée. L’intégrité des sous-ressources (SRI) est une spécification du W3C qui permet aux développeurs Web de s’assurer que les ressources hébergées sur des serveurs tiers n’ont pas été modifiées.

[Elusien]

I have added subresource Integrity checks for the GSAP library into the relevant HTML files in the ZIP online.

P.S. I took the opportunity to change the “bricks” default parameter so that the wall is “built” from the lowest layer of bricks to the top.

    --stagger_from  : end;  /* one of the following: start, end, center, edges, random, or a brick number like 13 */

J’ai ajouté des contrôles d’intégrité de sous-ressources pour la bibliothèque GSAP dans les fichiers HTML pertinents dans le ZIP en ligne.

PS J’en ai profité pour modifier le paramètre par défaut “briques” afin que le mur soit “construit” de la couche de briques la plus basse vers le haut.