My latest "flute" music video, "Sunset Over a Distant Horizon"

Made with Shotcut
1

Hi folks,
Here’s my newly-completed “flute” video featuring my latest composition for flute and piano or backing track. All made with Shotcut.

To highlight two techniques:

  1. The SQUARES transition 0:34 at and various other points in the video - it was discussed recently in this thread:

Many thanks to @elusien for his invaluable help with the HTML/CSS and for the JavaScript coding he provided, to make this possible.

  1. The TITLE TEXT (beginning) - and also the BLOCK text with RANDOM letters appearing and disappearing (at position 3:12). This follows on from this thread:

The BLOCK TEXT: Here’s the HTML file I used for these four lines of text. Delete the fake TXT extension:
JonRay LETTER BY LETTER animated text LINE 01 In this block of text, the text appears.html.txt (5.5 KB)

I adapted the technique for four lines of text by creating (screen capturing) each animated line separately and stacking the 4 tracks vertically in Shotcut, applying Blend Mode: Hard Light to each track, and positioning each line with the SP filter.

Here’s a quick EXTRA demo I made to further highlight this technique. Took about 6 minutes:

When I have time I’m going to explore the possibility of tweaking the HTML file so it makes four lines automatically, not just one. I’m sure it can be done. My brief would be for each of the four lines to :

  1. be spaced vertically evenly on the screen,
  2. have the letters of EACH LINE start appearing randomly from the beginning (not each letter from the whole four lines of text which would take too long),
  3. be centered horizontally.
6 Likes
2

Jon, the download file above is not HTML, it’s the text of the description.

1 Like
3

Thanks so much, @elusien. Fixed.

4

I really, really love this piece @jonray. Of all the compositions you shared here, this is my favorite. Bravo.

1 Like
5

Wow, thank you @musicalbox. It’s not too difficult compared to some of mine - you could play it on your recorder … :laughing:

1 Like
6

Jon, I tweaked the HTML to handle multiple lines and center vertically and horizontally, using “display: flex”. I’m not sure about requirement 2) though. If the lines contain widely different numbers of characters, I think that would not look too good (e.g. a line of 3 characters would fully appear almost at once).

shotcut forum post BLOCK TEXT RANDOM.html.txt (5.3 KB)

1 Like
7

WOW! That is incredible! As it happens I tried to tweak it myself, not really knowing what I was doing. You can see this from my amateur attempt: (PLEASE NOTE, THIS CODE DOESN’T WORK. I’m just posting it for @elusien’s interest and to give him a laugh)… :rofl:

JonRay LETTER BY LETTER animated text try01 4 line experiment (DOESNT WORK) .html.txt (7.9 KB)

A MILLION THANKS, @elusien. This is fantastic!

8

“display: flex” and “display: grid” are extremely useful for positioning elements in HTML. There are various examples on:

See the following webpages to learn more:

and:

2 Likes
9

Excellent. Thank you. Can I be a complete PAIN? About the no. 2 thing:
( having the letters of EACH LINE start appearing randomly from the beginning (not each letter from the whole four lines of text which would take too long), -
is this possible?
I still think the letters appearing in your code take too long to appear.

I experimented, amalgamating the flex positioning of yours with my (strange amateur) way of duplicating the JS script, and got something closer to what I had before:
JonRay LETTER BY LETTER animated text try05 4 line experiment LINE 01 This is LINE 1 of a 4-line text block.html.txt (7.9 KB)

However, the letter-spacing is all wrong, and I completely don’t understand why the red box of line 4 is so vertically short…
You will no doubt be able to sort it out in the blink of an eye … :wink:
Thanks again, @elusien No worries if you don’t have the time to do this.

10

Jon, your main problem was a mismatch between <div>s and their closing </div>s. I’ve made a couple of minor tweaks to the code I uploaded last time:

a) I changed the “shuffled” function to fix the timing problem;

	 const shuffled = (Array.from({length: all_characters.length}, (_, index) => Math.floor(index/nlines) + 1)).sort((a, b) => 0.5 - Math.random());

So now 4 characters will be animated concurrently, rather than one-at-a-time.

b) I accessed each text line in CSS by using the “nth-child(n)” CSS construct instead of introducing more classes/IDs:

    .text_line:nth-child(1) { background:blue; }
    .text_line:nth-child(2) { background:orange; }
    .text_line:nth-child(3) { background:lightgreen; }
    .text_line:nth-child(4) { background:red; }

shotcut forum post BLOCK TEXT RANDOM.html.txt (5.6 KB)

2 Likes
11

Totally brilliant! You make it seem so easy! Thank you again, @elusien!

12

I wish I could claim all the credit, but things like the “shuffled” function can be fairly easily discovered with a quick Google search, although I did modify the code to tailor it to your needs.

I’ve been coding for over 50 years, some of which was extremely complicated assembly level programming, fixing bugs and adding features to operating systems. Javascript is one of the easiest languages I’ve programmed in and being able to link this with HTML and CSS and quickly display the graphical output in a browser window is something I couldn’t have even dreamed of in the beginning.

2 Likes
13

It works exactly how I wanted it and I could never have thought of it without your expertise! It’s great to collaborate!

1 Like
14

I’m more than happy to help out with any other projects you come up with.

1 Like
15

Thanks so much @elusien. That means a lot that you are there to help with HTML/CSS/JS etc. I will be definitely knocking on your door again!

16


:upside_down_face:

1 Like
17

:+1: :grinning_face_with_smiling_eyes: :grinning_face_with_smiling_eyes:

1 Like
18

Encore une belle vidéo de @jonray et un nouveau fichier html d’ @Elusien à conserver précieusement.
J’ai essayé de comprendre le code, jusqu’aux keyframes ça va, j’ai même pu ajouter des déplacements horizontaux et verticaux. Par contre le dernier script reste encore un mystère pour moi.
Voici mon fichier modifié.
Lorsque les 4 lignes ont la même longueur, l’effet aléatoire n’est pas très aléatoire, les lettres de chaque ligne s’animent en même temps. Mais c’est un détail, dans la pratique on n’a pas souvent 4 lignes identiques.
Merci et bravo pour votre travail.

Another nice video from @jonray and a new html file from @Elusien to keep.
I tried to understand the code, up to the keyframes it’s ok, I could even add horizontal and vertical moves. But the last script is still a mystery to me.
Here is my modified file.
When the 4 lines have the same length, the random effect is not very random, the letters of each line are animated at the same time. But it is a detail, in practice we do not often have 4 identical lines.
Thank you and congratulations for your work.

Texte animé Jonray.html.txt (4.3 KB)

2 Likes
19

Bonjour @namna - merci pour vos mots - et pour le fichier HTML modifié. C’est amusant!

Hi @namna - thank you for your words - and for the amended HTML file. It is fun!

20

Hi @elusien, I’m knock, knock, knockin’ at your door … :slight_smile:
I’m giving you a little homework … (!)

So I revisited my “subtitles” HTML /CSS from about 3 years ago (remember this?)

SUBTITLES animated with CSS keyframes 002XX NEW May 2022.html.txt (5.4 KB)

… and changed the code according to my recently advanced knowledge of CSS - notably using variables:

 :root {
   --length: 4s;
    --L: -0.5s;
 }

and combining with calc:

 fade-out 1s  ease 	forwards 	calc(var(--L) + (2  * var(--length)));

to give the animation timings - by the way that took me ages to work out and I punched the air when it worked!!

However, what I’d like to do is to be able to apply “span” animations (letter-by-letter) to these subtitles, not just having the whole line of text fading or moving.

I’ve tried lots of things with your JS code for the other recent animations but nothing I’ve done works.
Could this be done? I’m hoping that it will be a breeze for you to work out!
Only if you have the time of course! Many thanks!