Text animation - Learn theory of music - key signature charts

Made with Shotcut
21

Ah! Je connais Johnny Hallyday évidemment. J’ignorais que son surnom était Dicky par contre.
Le jour de sa mort, ma soeur a passé la soirée à visionner tout ce qu’elle a pu trouver à son sujet sur YouTube.

22

Oui, mais il faut écouter la reprise de ce titre par Dicky pour mesurer l’ampleur de son talent

23

Oups… oui en effet. J’aurais dû lancer la vidéo avant de commenter :grinning_face_with_smiling_eyes:
Dans votre post on voit la tronche de Halliday et le titre de la vidéo.

Rassurez-moi. Vous n’avez pas vraiment son album complet “20 Méga Hits” n’est-ce-pas ??

24

@jonray I have modified the HTML/CSS to animate both the Flats and the Sharps table. The new HTML file is below (just change the extension from “txt” to “html”).

Music_Keys.txt (6.7 KB)

Here is an OBS recording of the animation:

1 Like
25

PagePlus? I used to use that extensively … haven’t touched it in years (since I transitioned to using Linux more or less exclusively). It was good software at a great price, last time I used it. Is it still being developed?

1 Like
26

That’s GREAT!!! Thank you so much. The code is looking more complex, of course … I’ll be trying to analyse it. Especially how you used the variables and “calc” values like:

  :root {--dtime: 0.4;}

also I’m intrigued about:

 #flats>tbody>tr>td:nth-child(1)

etc… I’ve never seen ">"s used in that context before.

Yes, it’s a fantastic prog. Use it almost daily still! Discontinued years ago, unfortunately. Its successor is called Affinity but in my view Pageplus can’t be beaten as DTP software.

27

Ooops, sorry @elusien, you already answered this!! Not paying attention! Thanks!

28

The ‘>’ is a CSS CHILD selector, whereas ’ ’ is a CSS DESCENDANT selector e.g.

<div><span>Hi</span>
    <p><span>There</span></p>
</div>

‘div span’ will access both <span>s, whereas ‘div>span’ will only access the “Hi” <span>.

See:

1 Like
29

You live and learn! Thank you @elusien!

31

Jon, the following explanation should help with understanding the CSS code:

/*
	"--offset" offsets the animation of the FLATS table by 0 secs and the SHARPS table by 32 secs.
	"--erase" is the number of seconds when cell 7B FLATS and 0B SHARPS is deleted.
	"--cell-delay" is the number of seconds when each cell in turn appears (opacity set to 1).
	"--dell-delay" is the number of seconds when cells in the last column of the SHARPS table disappear (opacity set to 0).
*/
1 Like
32

Hi @jonray .

Congrats on the short video, must have taken quite some time to time all the reveals accurately.

I think I disagree with your method for the flat array though, that seems to imply there is a flat (i.e. Bb) in the key of C major (resp. A minor), whereas there shouldn’t be any. The whole middle column of the flat array should be moved down one line.

For those interested in musical theory, for that same purpose of keys signatures, I personally like the visuals of the circle of fifths more:

1 Like
33

Hi @Bertrand_G !
Thanks for your comments and great feedback!
Ah, the good old Circle of fifths!
Yes, I taught that method for years and years - and was taught it by my teachers, back in the Ice Age …

However, I found it be complex to teach. Least of all, getting kids to draw a circle divided into 12 segments… then the F# major/Gb major thing, etc…
Hence I devised my method… but I concede that you have found the one bugbear about it. The B in the top row of the middle column (flats) MAY imply that A minor/C major has one flat, whereas it has none (as shown by the left-hand “zero”).
I should first say that this is a work in progress - in my video tutorial I will be expaining more about it with a voice-over, and what I will explain is that the middle column is only to be used for determining the ORDER of flats and sharps. I tell my pupils not to correlate the middle row with the outside rows.

Kids get this - in fact over the years I have taught this to maybe hundreds of pupils, only one person didn’t get it straight away … and interestingly he was an adult (a parent of a pupil)…

So in my view, my method has the following advantages than the traditional Circle of 5ths (although it is based on exactly the same basic principle - ie in simple terms, Sharps go up in 5ths, Flats go up in 4ths)…

1 It’s based on a rectangle grid, not a circle (easier to draw),
2 it starts with ABC or ABCD (easy),
3 it’s concise,
4 it gives instantly the key signatures PLUS the ORDER of flats/sharps, and
5 it can be drawn quicky (a minute for each chart - perfect for kids taking Grade 5 Theory exams - they start the exam by writing out the charts on their scrap paper).

But a huge thanks for pointing this problem out - I will now change my voice-over script to make your point more clearly.

34

Wonderful, @Elusien !! thank you, this helps me a lot. I’m really interested in learning more about the
" – " variable thing.
EDIT : I meant:

 - -

(two dashes).

35

For an excellent introduction to CSS Variable (e.g. --color) see:

and here:

1 Like
36

Excellent suggestion in your excellent post. :grinning: Thank you, your excellency. :+1: :grinning:

37

That’s a very handy chart. If I were writing a music test, I think I’d quickly draw this chart on a piece of scrap paper to use as reference since it’s so quick and easy to construct.

1 Like
38

Thank you, @pbattersby that’s exactly why I thought of it - a quick and easy reference for kids taking music exams. I’ve never seen it laid out like this anywhere so I’m hoping I’m the first person to think of it… :face_with_raised_eyebrow: If that is correct, I wish I could copyright it somehow … :wink:

39

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.