"Quick Licks" Notation Builder Help

Table of contents

0. Introduction
1. STEP 1 - Create a visual pattern
      1a - Edit Window - general
      1b - General Editing buttons
      1c - CopyPaste, Cut and Clear
      1d - Move noteheads at current column
      1e - Save, and Load the pattern
2. STEP 2 - Save the visual pattern
      2a - Explanation
      2b - Redrawing of Certain Elements
3. STEP 3 - Create and Compile a Drumputer script based on your pattern
      What can't it interpret?
Other info
4. Why PNG instead of GIF or JPG images?
5. What's with the "20" and "FF" things?
6. Why don't you use one of the many available fonts instead of the individual character images?



Did you ever just have a little lick/part creep into your head that you had to get down on paper?
Did you feel compelled to share that lick with your friends but, by the time you wrote it down, scanned it, etc. the tedium got in the way of your creativity?
Wouldn't it be good if you could instantly hear what your lick sounds like?
Do you find that Sibelius® and Finale® are too much for what you're trying to do?
If you answered yes to any of these questions, then the "Quick Licks" Rudimental Drumming Notation Builder may be for you.

First of all, there is no cost for this - IT'S FREE!!.

Secondly, like the Drumputer itself, it's located on the web for you to use from any net-connected machine on the planet. There's nothing to install!!!

Thirdly, this may not be the speediest application for creating notation. Why? This is a browser-based application that uses your browser's Dynamic HTML capabilities to dynamically change the contents of the page, the speed of which is directly related to the speed of your computer (it seems to work fine on a 800 MHz computer, though) but not necessarily the speed of your Net connection (initially the characters,etc. need to be transferred but for the most part, all of the editing occurs locally on your computer, without Net transfers involved). Every edit of the main pattern requires the main cell of the pattern edit table to dynamically refresh the showing of 8 * 41 = 328 images (5 lines of the main pattern and two lines above and 1 below for cursor-movement buttons, indicators). All of these images are 11x11 pixels (except for "CLR" and "CUT" which are 22x11 and "COPY" and "UNDO" which are 33x11).

The actual HTML code behind the edit box will be somewhat like the following:

(You could take the above and, using the downloadable images, do something unique with the idea, if you want)

Everytime you make an edit or move the "cursor indicator lines", the above contents changes and the browser has to re-interpret the contents. That's a lot of work for the browser to do each time.

And, if you increase the width, or decide you want staff lines, that adds even more overhead.

So, basically, there's a hell of a lot of stuff going on whenever you do something and that's why it can be somewhat slow depending completely on the speed of your computer.

However, given all of that, it's not that bad, if I do say so myself.

Once you're satisfied that it looks the way you want, scroll down further and click the "CREATE IMAGE TO SAVE" button, it will then actually stitch all the images together and give you one solid object you can then save.

Furthermore, it will try to produce a drumputer script from what you create and then you can try to compile that via the drumputer and HEAR WHAT YOU WROTE!!!!

Also, you can edit either in No-Staff-Lines mode, Single Staff-Line mode, or Staff-Lines mode. When using it in "Staff Lines" mode, it should be slower than single-line mode. But, honestly, on a 800MHz machine I haven't really noticed it and even on a 200 MHz clunker it's still workable (but noticeably slow).

Lastly, this is FREE. (in other words, you're always free to purchase and install Sibelius or Finale and climb their learning curve, if that's your desire)

Step 1 - Create A Visual Pattern

Click on any character (or pre-defined pattern) to insert it (or overwrite with it) into the pattern. Individual characters always insert/overwrite at the current row and column position. Pattern/Character insertion/overwrite also moves the cursor indicators to the right, appropriately.
Pattern insertion/overwrite forces the row back to the top and inserts/overwrites the pattern from there. You can change the width of the pattern with the dropdown box below it. It can be anywhere from 5 to 99 characters wide. If you increase the width of a pattern after you've already added some characters to it, they will be retained (it's increased on the right--hand side).

1a - Edit Window - general

If you look at the above image, you'll see the little yellow lines, these are the "cursor indicators" (trying to overlay a cursor on top of the edit window has proven, so far, to really slow things down, so I went with this instead). You move the cursor indicators simply by clicking anywhere on the pattern-edit area (the "white" part). As far as the layout of the "Pattern Edit Window", the top line contains the "CLR", "COPY" buttons and the selection "ruler" line and the bottom line includes the "CUT" and "UNDO" buttons (more on the first 3 in the "CopyPaste, Cut and Clear" section). The UNDO button lets you undo up to 10 edits in a row.

1b - General Editing Buttons

  • CLEAR ALL - this will clear out the entire editing canvass, respecting the chosen width and putting staff lines in at the right place. The Cursor Indicators are not changed. The UNDO buffer is cleared, too.
    the next 3 are duplicated - one each for "character-at-a-time" editing, and also one each for multi-line editing. Single-character editing operates only on the current row at the current column while multi-line editing operates on all rows at the current column.
  • BACKSPACE - this will perform like the keyboard "Backspace" key when editing normal text (i.e. everything from the current column to the far right is moved over one position to the left, replacing that one character)
  • DELETE - this will perform like the keyboard "Delete" key when editing normal text (i.e. everything to the right of the current column is shifted left one position which results in the current position being overwritten)
  • INSERT - this will insert a space or staff-line character, if applicable, at the current position moving everything that was in this position and to the right of it over one more position.

    1c - CopyPaste, Cut and Clear

    Later on in the development of this thing, I realized that I needed the ability to copy and paste parts. So, to do this it takes 4 steps, the first three involving clicking on the "ruler" (the top line in the edit window).
    1. Click on the first column
    2. Click on the second column
    This creates the "COPY" (or "CUT") range
    3. Click on the third column where you want to do the:
       or INSERT
    4a. Click on "COPY" to Copy the original range of characters to the new location
       (in this case it was inserted)
    4b. Click on "CUT" to Cut the range of characters out of the pattern
       NOTE: In INSERT mode (left), it will remove the selection AND the space it took up.
       In OVERWRITE mode (right), it will leave an empty space where the selection was removed.

    1d - Move noteheads at current column

    This is a really cool feature, I think. If you're in "Staff Lines" mode and you find that the voicing is wrong, simply select the column where the offending note is and move the noteheads up or down as appropriate (this also works for grace notes). If there is more than 1 notehead in that column, it will move them together if there is room (otherwise, you can just click on individual characters to fix it). Here's a before and after image of pushing the "UP" button.
    ... after pushing "Move Noteheads Up" button ==>

    1e - Save, and Load a pattern

    Down near the bottom of the page, you'll see the gray-background area. The contents in this box change with every edit you make to the main pattern. This is where you save the pattern that you're working on and re-load it also. If you wanted to pass on what you're working on to a friend, simply select all the text in this window (make sure you scroll enough to get it all), copy it (using the right-click menu, etc) and then paste it into your email and then give them the URL to come here and they go to the same place, paste in the text, and push the button and it will load the pattern into the edit area so that they can manipulate it further. You may also want to save the Drumputer Script if you've made any modifications to the upper SET statements, etc.


    Step 2 - Save the visual pattern

    2a - Explanation

    As mentioned on the pages themselves, what you see in the edit window is not really an image but rather a 41x8 (or 13 in staff-lines mode) grid of individual images. This is because this web page is utilizing Dynamic HTML and it can't create images on the fly. So instead we string a bunch of HTML <IMG SRC="..."> tags together everytime you do an edit and this gives the illusion (assuming a fast computer on your end) that it's being created on the fly. Anyway, click the "CREATE IMAGE TO SAVE" button. This will change the underlying image by sending the request back to a program at the website asking it to take the string of characters we've put together and stitch them together to form a single image and serve it back to you (benefits of which are outlined in the "Redrawing..." section directly below this). You can change the character size used from "Normal" (each character is 11x11 pixels) to "Tiny" (8x8) or "Large" (16x16). At this point you can right click the image and save it whereever you want. I'll leave it up to you to decide what else you want to do with the saved images. (i.e. paste into your favourite Word Processor program, as images, and print them out).

    2b - Redrawing of Certain Elements

    I got to a certain point in the development of the "QuickLicks" when I realized there are some visual notation elements that simply can't be done on a character-by-character basis, primarily (in the drumputer-world) (de)crescendos and repeat indicator that straddle bar lines. In the case of crescendos, the bitmap characters that I've designed are only used in the design phase to emphasize beginning and ending of (de)crescendos; you place the beginning character, and the end character (and optionally, the middle character which is inconsequential but you can use if you want -- avoiding using it will save you time), when you then choose to generate the visual pattern, the start and end characters (and everything in between) will be removed and replaced with a properly-drawn (de)crescendo as in the following:

    Designing a crescendo
    Re-drawn so it looks
    more like a crescendo

    Repeat symbols (characters and ) that straddle a bar line (i.e. or in exactly that order) are re-drawn, also:

    Designing a repeat over a bar-line
    Re-drawn so it looks
    more like how it's intended

    Same thing using bar lines: Put the repeat symbol characters in the middle of the staff like so:

    Designing a repeat over
    a bar-line with staffs
       Produces the following:   
    Re-drawn so it looks more
    like how it's intended


    Step 3 - Create and Compile a Drumputer script

    You can basically, when in single-character mode, put any character anywhere you want. However, in order to interpret the pattern (and reduce the time needed to do it), the following simple rules are used: As far as grouping notes into triplets or quintuplets is concerned, once it encounters a left grouping character (like or ) it stores that position until it hits a right grouping character (like or ). If, in between those, a tuplet-defining (3,5,6) character was found on line one, it'll convert all notes between the two grouping characters to their new tripletized/quintupletized counterpart. It will also work based on the "minor" grouping characters (like or ) but it becomes less clear what to do when these are used, sometimes. When you find the grouping is not being interpreted properly you should then use the and grouping characters on line 1 and this should solve the problem.

    What can't it interpret?

    There are a few limitations to this routine:
  • Repeats (line repeats that is) are not interpreted as repeats because this is something you'd do with the SET REPEATS=... anyway.
  • Repeat symbols (if you use and together) will cause the previous bar's worth of notes to be duplicated. If, however, you throw a barline in between them this is ignored because it can be ambiguous as to what this means.
  • Bar lines are ignored.
  • If you put in a time signature on lines 3 and 4, they will not be interpreted as such (use SET TIMESIG=... instead).
  • The only way to do quarter note triplets is to use the and grouping characters on line 1.
  • 8th-note triplet patterns that contain embedded 16th-note duplets (i.e. "dadigida") should always use the and grouping characters on line 1.
  • Ruffs () can only come after non-tripletized 8th notes or quarter notes because the previous note is shrunk by a 24th-note and the two 48th-notes of the ruff are inserted.
  • Buzzes are best accomplished by using the "Virtual Drumline" ® soundfonts provided by "Tap Space Publications". Their "Virtual Drumline" contains multiple buzz rolls, one of which (pitch 89) I use in this case. Otherwise, what I do is use either 6 or 12 48th notes to simulate 8th-note or quarter-note buzzes.
  • Probably quite a bit else - but try it and see how you like it (hey, waddaya expect for free?)

    As far as what to do with the SET statements, etc. in the Drumputer script, it's best to take a look at the main Drumputer help files, starting with this one.

    Also, if you have a "Sound Blaster Live" soundcard (or any that can handle Soundfont files) you might want to download the Marching Percussion Soundfont and then uncomment (remove the leading ' character) the line that says:
    SET DEFAULTS=MARCHPERC3.SF2,1   the 1 refers to the bank YOU've loaded it into
    or, even better, get "Virtual Drumline" from TapSpace Publications and change that line to:
    Either one of these will give you a much truer marching drumline sound than what your soundcard usually does. If you're using buzz roll note-flags (B1,ED,C7) and you SET DEFAULTS=VIRTDRUMLINE,1 then it will use pitch/program 89 ("long buzz") for the proper duration of the roll. Paste the following into the No-Staff-Lines mode Save/Load box for an example of buzzes:



    4 - Why PNG instead of GIF or JPG images?

    The application that creates the hybrid image cannot output GIF images. This is because Unisys used to own the copyright on the compression algorithm used when creating GIF images and the software being used by the ISP that hosts this site is using an older version that avoided legal hassles by not allowing output in GIF format. Fortunately, most modern browsers support PNG images. The reason why this format was chosen over the hugely popular JPG format is because JPGs are not suitable for graphics because they use a "lossy" compression. (Rule of thumb - only use JPGs for photo images, NOT for graphics, logos, etc.)


    5 - What's with the "20", "F0", and "FF" things?

    WARNING: Computer-Science ahead - These are hexadecimal (base 16, as opposed to our normal decimal, or base 10, number system) codes corresponding to character codes that these different characters have been mapped to. If you look up at the character chart, and hover your mouse over any one of them, you'll see what their codes are. These could have been listed in decimal notation but then they wouldn't be as compact (and because the underlying HTML is so large, I wanted to make sure it was as compact as possible). So, "20" in hexadecimal = 32 (in decimal, 2x16+0=32) which is the ASCII code for a space, which is what you see whereever the "20"s are -- by the way, it may be obvious, but it takes 2 hex digits to represent one character so if your pattern is 20 characters wide, the hex representation will be 40 hexadecimal digits. The "FF" combination should also occur fairly frequently since it's the character code for the normal note head (code 255 in decimal).


    6 - Why don't you use one of the many available fonts instead of the individual character images?

    I would, except they tend to include the flag character and the notehead character as a single item in the font. I need the flag part to be separated so I can interpret what kind of note it is (which you can do if it's all one character but by separating them it means you can have many more noteheads). I'd like it if one of the big music notation companies (or someone else) would create a font with the following characteristics:
    1. has items like the characters I've done so that the noteheads are separated from the note "flags" (the parts that define the resolution of the note - single-line=8th notes, 2 lines=16th notes, single flag=8th note, double-flag = 16th note, etc.)
    2. if the "heads" and "flags" were separated like this, the font would have to remove all "kerning", "leading" and whatever other fancy font terms refer to the space between characters. Each character should be the same height and width. I want each character to fit snug against the next.
    3. It should be a fixed-space, "symbol" font
    Until such time as a font like this comes along, I gotta stick to these bitmaps (but if anybody wants to get ambitious, let me know).


    Any Other Questions?

    Email me: pauljohnston@cyberus.ca