show drums score with 6, 7 stroke. #1612

hirasaki1985 · 2024-03-01T11:58:16Z

hirasaki1985
Mar 1, 2024

I want to show drums score with 6, 7 stroke.
But I can't did it.

VexFlow view

6stroke and 7stroke are wrong view.
I want to show like this.

drums 6 stroke.

drums 7 stroke.

source code



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>


<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js"></script>
<script>
const {
    Renderer,
    Stave,
    StaveNote,
    Beam,
    Voice,
    Formatter,
    Tuplet,
    GhostNote
} = Vex.Flow;

// const
const scoreWidth = 210 * 5
const scoreHeight = 207 * 5

// get element
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);


// resize
renderer.resize(scoreWidth, scoreHeight);
const context = renderer.getContext();

// bottom notes
const bottomNotes = [
  new StaveNote({
    keys: ['c/4'],
    duration: 'q',
    stem_direction: -1
  }),
  new StaveNote({
    keys: ['c/4'],
    duration: 'q',
    stem_direction: -1
  }),
  new StaveNote({
    keys: ['c/4'],
    duration: 'q',
    stem_direction: -1
  }),
  new StaveNote({
    keys: ['c/4'],
    duration: 'q',
    stem_direction: -1
  })
];


const stave2_2 = new Stave(0, 0, 400);
stave2_2.setContext(context).draw();


// 3 stroke
const note2_2_1 = [
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  })
];
const beam2_2_1 = new Beam(note2_2_1)
const tuple2_2_1 = new Tuplet(note2_2_1)

// 5 stroke
const note2_2_2 = [
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
];
const beam2_2_2 = new Beam(note2_2_2)
const tuple2_2_2 = new Tuplet(note2_2_2, {ratioed: false})

// 6 stroke
const note2_2_3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
];
const beam2_2_3 = new Beam(note2_2_3)
const tuple2_2_3 = new Tuplet(note2_2_3)

// 7 stroke
const note2_2_4 = [
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
  new StaveNote({
    keys: ['c/5'],
    duration: '8'
  }),
];
const beam2_2_4 = new Beam(note2_2_4)
const tuple2_2_4 = new Tuplet(note2_2_4)

const measure2_2 = [
  // 上段
  new Voice().setStrict(false).addTickables(
    note2_2_1
      .concat(note2_2_2)
      .concat(note2_2_3)
      .concat(note2_2_4)
    ),
  // 下段
  new Voice().addTickables(bottomNotes),
];

// format
new Formatter().joinVoices(measure2_2).format( measure2_2, 400 - 30 );

measure2_2.forEach(function(v) {
  v.draw(context, stave2_2);
});

const beams2_2 = [beam2_2_1, beam2_2_2, beam2_2_3, beam2_2_4, tuple2_2_1, tuple2_2_2, tuple2_2_3, tuple2_2_4]
beams2_2.forEach((b) => {
  b.setContext(context).draw();
})
</script>
</body>
</html>

How do I solve this?
Please teach me how to show 6, 7 stroke.

Answered by AaronDavidNewman

Mar 2, 2024

Here is a 7

// smo119401 etc are notes
const smo119414 = new VF.Tuplet([smo119401,smo119403,smo119405,smo119407,smo119409,smo119411,smo119413], 
{"num_notes":7,"notes_occupied":4,"ratioed":false,"bracketed":true,"location":1});

View full answer

AaronDavidNewman · 2024-03-02T15:07:12Z

AaronDavidNewman
Mar 2, 2024
Collaborator

Here is a 7

// smo119401 etc are notes
const smo119414 = new VF.Tuplet([smo119401,smo119403,smo119405,smo119407,smo119409,smo119411,smo119413], 
{"num_notes":7,"notes_occupied":4,"ratioed":false,"bracketed":true,"location":1});

1 reply

hirasaki1985 Mar 4, 2024
Author

@AaronDavidNewman I did it! Thank you so much!

hirasaki1985 · 2024-03-04T13:38:25Z

hirasaki1985
Mar 4, 2024
Author

@AaronDavidNewman
I'm sorry, I have another question.

How can I show drums ghost note, like this.

(●)

Could you please teach me?

0 replies

AaronDavidNewman · 2024-03-04T22:19:36Z

AaronDavidNewman
Mar 4, 2024
Collaborator

That is just a parenthesis modifier. You add it directly to the note.

        note.addModifier(new Parenthesis(ModifierPosition.LEFT), 0);
        note.addModifier(new Parenthesis(ModifierPosition.RIGHT), 0);

1 reply

hirasaki1985 Mar 5, 2024
Author

@AaronDavidNewman Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

show drums score with 6, 7 stroke. #1612

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

show drums score with 6, 7 stroke. #1612

hirasaki1985 Mar 1, 2024

VexFlow view

drums 6 stroke.

drums 7 stroke.

source code

Replies: 3 comments · 2 replies

AaronDavidNewman Mar 2, 2024 Collaborator

hirasaki1985 Mar 4, 2024 Author

hirasaki1985 Mar 4, 2024 Author

AaronDavidNewman Mar 4, 2024 Collaborator

hirasaki1985 Mar 5, 2024 Author

hirasaki1985
Mar 1, 2024

Replies: 3 comments 2 replies

AaronDavidNewman
Mar 2, 2024
Collaborator

hirasaki1985 Mar 4, 2024
Author

hirasaki1985
Mar 4, 2024
Author

AaronDavidNewman
Mar 4, 2024
Collaborator

hirasaki1985 Mar 5, 2024
Author