Do you remember those little toys we had as kids that were a matrix of letters or numbers with one tile missing that you used to slide around to jumble up the characters then try to recreate the original?
I’ve been working on a small HTML/CSS/Javascript program to recreate this digitally and thought it might be useful for revealing titles. See the video below for what I mean.
The HTML file can be downloaded below. It is parameterised so you can easily tailor it to your requiremets without needing any coding knowledge. Just remove the “.txt” suffix and run it in a browser.
Just run it as a “Browser Source” in OBS Studio, recording the animation and then open this clip in Shotcut.
Or you could run it in a browser window and use screen-recording software, like Sharex, to record it instead of OBS Studio.
I do remember playing with those when I was young. I also remember that instead of numbers or letters, some of these toys had sections of an image. Just saying
I’m already working on that variation. Life is a bit hectic at present, and I don’t have as much spare time as previous as family is about to visit us for Christmas. But I hope to get this done reasonably quickly before the weekend.
Wow, this could be great for video titles. I, too, am old enough to remember these toys. Back then, with no internet to play with, it kept us amused for hours…
Thanks @elusien for yet another creative HTML idea…
Encore une belle réalisation! Vous nous étonnerez toujours On va pouvoir faire des animations de titres originales. Mais j’ai un peu de mal à comprendre la règle pour définir les paramètres --tiles_per_row & --rows en fonction du texte que l’on choisit. J’ai souvent ce type d’alerte.
Another great achievement! You will always amaze us
We will be able to make original title animations.
But I have a little trouble to understand the rule to define the --tiles_per_row & --rows parameters according to the text we choose.
I often have this kind of alert.
Mea Culpa. These 2 CSS variables should NOT be there. They are not parameters for you to change as set in the Javascript. Just move them to the second :root declaration below. i.e. here:
/*
=================================
Do not change anything below here
=================================
*/
:root {
However, this should not cause your problem. I am coding the “image slider” now and am seeing the same error as you. If I cannot get to the bottom of it quickly I may ask you to post the lines of text you are using. But give me an hour or two, as my dinner is just about to be served.
*Mea culpa. Ces 2 variables CSS ne devraient PAS être là. Ce ne sont pas des paramètres que vous pouvez modifier tels qu’ils sont définis dans Javascript. Déplacez-les simplement vers la deuxième déclaration :root ci-dessous.
Cependant, cela ne devrait pas causer votre problème. Je code maintenant le “curseur d’image” et je vois la même erreur que vous. Si je ne peux pas aller au fond des choses rapidement, je peux vous demander de publier les lignes de texte que vous utilisez. Mais donnez-moi une heure ou deux, car mon dîner est sur le point d’être servi.*
Je cherchais juste à comprendre comment les régler au cas ou on n’a pas un titre de 5 lignes de 6 caractères. Par exemple juste pour tester quand j’ajoute des lettres HIDDENE TEXTES: REVEALED USING SLIDERS J’obtiens l’erreur.
I was just trying to figure out how to set them up in case we don’t have a 5 line 6 character title.
For example just to test when I add letters
HIDDENE
TEXTES:
REVEALED
USING
SLIDERS
I get the error.
Capt James T Kirk: Scotty, that last timewarp jump has turned the Starship Enterprise into a 2-dimensional object and scrambled the individual parts. Can you fix it?
Chief Engineer Scott: Och aye Jim. My dilithium crystals are all but drained. But I’ve got some chewing gum, a short length of string and some duct tape, so of course I can fix it. Give me a minute.
Captain Kirk: Scotty, you’ve done it again!! At the end of your shift you will find a small surprise waiting for you in your quarters.
Mr Spock: Mr Scott, I could not help but notice a flaw in the gift the captain sent you. If you watch your monitor closely, you will see that the tile located in the lower right quadrant remains black during the entire animation sequence. It is logical that this was not noticeable in your initial animation since that part of your image is already black.
@Elusien J’ai un problème avec les caractères qui encadrent le texte à afficher " ’ ’ const text = ` (ligne 18)
Si dans mon texte j’utilise une apostrophe j’ai une erreur. J’ai essayé de les remplacer par un guillemet mais c’est pareil. Par quoi remplacer ces apostrophes ?
I have a problem with the characters that surround the text to be displayed const text = ` (ligne 18)
If I use an apostrophe in my text I get an error.
I tried to replace them with a quotation mark but it’s the same.
What should I replace these apostrophes with?
The “quotes” surrounding the text need to be “BACKTICKs”, i.e. the character `
This is because Javascript does not allow newline characters in strings that are within normal (single- and double-) quotes, unless they are replaced by the string “\n”.
Les “guillemets” entourant le texte doivent être des “BACKTICK”, c’est-à-dire le caractère `
En effet, Javascript n’autorise pas les caractères de nouvelle ligne dans les chaînes qui se trouvent entre guillemets normaux (simples et doubles), à moins qu’ils ne soient remplacés par la chaîne “\n”.
const text = `
<any lines of text>
Elusien’s program
<any lines of text>
`;
i.e. the lines of text should enclosed in BACKTICKs (`) and then you can have single quotes (’) or double-quotes (") in the text.
If you want a BACKTICK itself in the lines of text you must escape it with a BACKWARD-SLASH (\), and if you want a BACKWARD-SLASH in the lines of text you must escape it with itself (\\)
const text = `
The next character is a BACKTICK \`
The next character is a BACKSLASH \\
Elusien’s program
<any lines of text>
`;
N.B. While checking this out I found what looks to be a bug/quirk in the Javascript “reduce” method. I had to change my code to circumvent it, so please download the new HTML file (I updated it in post #1 above)
les lignes de texte doivent être entourées de BACKTICK (`) et vous pouvez ensuite avoir des guillemets simples (’) ou des guillemets doubles ("") dans le texte.
Si vous voulez un BACKTICK lui-même dans les lignes de texte, vous devez l’échapper avec un BACKWARD-SLASH (\), et si vous voulez un BACKWARD-SLASH dans les lignes de texte, vous devez l’échapper avec lui-même (\\)
N.B. En vérifiant cela, j’ai trouvé ce qui semble être un bogue/bizarre dans la méthode “réduire” de Javascript. J’ai dû modifier mon code pour le contourner, veuillez donc télécharger le nouveau fichier HTML (je l’ai mis à jour dans le message #1 ci-dessus)
Je suis désolé, j’ai été trompé par mon logiciel d’édition qui colore en rouge les erreurs. J’aurai du essayer malgré cette erreur signalée car cela fonctionne comme vous le dites. C’est donc moi qui maintenant fait mon méa culpa.
I’m sorry, I was fooled by my editing software that colors the errors in red.
I should have tried it despite this error reported because it works as you say.
So now I’m the one doing my mea culpa.
