「VexFlow 連桁」の版間の差分
(→単純な連桁) |
(→単純な連桁) |
||
88行目: | 88行目: | ||
</yjavascript> | </yjavascript> | ||
<syntaxhighlight lang="JavaScript" line start="1"> | |||
<div id="yonet202302_Output01"></div> | |||
<script> | |||
(function(){ | |||
const { | |||
Factory, | |||
Stave, | |||
StaveNote, | |||
Formatter, | |||
Voice, | |||
Barline, | |||
Accidental, | |||
Beam, | |||
} = Vex.Flow; | |||
const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } }); | |||
const ctx = f.getContext(); | |||
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw(); | |||
stave1.addClef("treble").setContext(ctx).draw(); | |||
stave1.addTimeSignature('C').setContext(ctx).draw(); | |||
const notes1 = [ | |||
new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "1" }) | |||
.addModifier(new Accidental('b'), 1), | |||
]; | |||
Formatter.FormatAndDraw(ctx, stave1, notes1); | |||
const stave2 = new Stave(360, 50, 350).setContext(ctx).draw(); | |||
const notes2 = [ | |||
new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" }) | |||
.addModifier(new Accidental('n'), 1), | |||
new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" }) | |||
.addModifier(new Accidental('#'), 2), | |||
new StaveNote({ keys: ["e/4", "g/4", "b/4"], duration: "4" }) | |||
.addModifier(new Accidental('##'), 2), | |||
]; | |||
Formatter.FormatAndDraw(ctx, stave2, notes2); | |||
const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw(); | |||
const notes3_1 = [ | |||
new StaveNote({ keys: ["c/4"], duration: "8" }), | |||
new StaveNote({ keys: ["d/4"], duration: "8" }), | |||
]; | |||
const notes3_2 = [ | |||
new StaveNote({ keys: ["e/4"], duration: "16" }), | |||
new StaveNote({ keys: ["f/4"], duration: "16" }), | |||
new StaveNote({ keys: ["g/4"], duration: "16" }), | |||
new StaveNote({ keys: ["a/4"], duration: "16" }), | |||
]; | |||
const notes3_3 = [ | |||
new StaveNote({ keys: ["c/4"], duration: "8" }), | |||
new StaveNote({ keys: ["d/4"], duration: "8" }), | |||
]; | |||
const notes3_4 = [ | |||
new StaveNote({ keys: ["e/4"], duration: "16" }), | |||
new StaveNote({ keys: ["f/4"], duration: "16" }), | |||
new StaveNote({ keys: ["g/4"], duration: "16" }), | |||
new StaveNote({ keys: ["a/4"], duration: "16" }), | |||
]; | |||
const notes3 = notes3_1.concat(notes3_2).concat(notes3_3).concat(notes3_4); | |||
const beams3 = [new Beam(notes3_1), new Beam(notes3_2), new Beam(notes3_3), new Beam(notes3_4)]; | |||
stave3.setContext(ctx).draw(); | |||
notes3.forEach((StaveNote) => StaveNote.setStave(stave3)); | |||
const voice3 = new Voice({beat_value: 4, num_beats: 4}).setMode(3).addTickables(notes3); | |||
new Formatter().joinVoices([voice3]).formatToStave([voice3], stave3); | |||
voice3.setContext(ctx).draw(); | |||
beams3.forEach((beam) => beam.setContext(ctx).draw()); | |||
})(); | |||
</script> | |||
</syntaxhighlight> | |||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2023年2月10日 (金) 21:35時点における版
VexFlow 使い方に戻る。
概要
音符の旗同士を繋ぐ連桁(れんこう:英 Beem ビーム)について、記述します。連桁?はしげた?みなさんはなんと呼んでいるのでしょうか?自分も連桁とは思っていませんでしたが、そうなのだからそうなんだろう。音符の丸いところは符頭(たま)、丸いところから伸びた棒が符幹(ぼう)、8分音符より短いやつらにつけられる符尾(はた)と専門用語いっぱいあります。読み方はちがいますよ。ふとう、ふかん、ふび、ですね。
単純な連桁
連桁には複雑なものもありますが、まずは単純な8分音符4つや2つを繋げるもの、つまり同じ音分同士を繋ぐというものをやってみましょう。16分音符同士とかです。
<div id="yonet202302_Output01"></div>
<script>
(function(){
const {
Factory,
Stave,
StaveNote,
Formatter,
Voice,
Barline,
Accidental,
Beam,
} = Vex.Flow;
const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } });
const ctx = f.getContext();
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
stave1.addClef("treble").setContext(ctx).draw();
stave1.addTimeSignature('C').setContext(ctx).draw();
const notes1 = [
new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "1" })
.addModifier(new Accidental('b'), 1),
];
Formatter.FormatAndDraw(ctx, stave1, notes1);
const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
const notes2 = [
new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" })
.addModifier(new Accidental('n'), 1),
new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
.addModifier(new Accidental('#'), 2),
new StaveNote({ keys: ["e/4", "g/4", "b/4"], duration: "4" })
.addModifier(new Accidental('##'), 2),
];
Formatter.FormatAndDraw(ctx, stave2, notes2);
const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw();
const notes3_1 = [
new StaveNote({ keys: ["c/4"], duration: "8" }),
new StaveNote({ keys: ["d/4"], duration: "8" }),
];
const notes3_2 = [
new StaveNote({ keys: ["e/4"], duration: "16" }),
new StaveNote({ keys: ["f/4"], duration: "16" }),
new StaveNote({ keys: ["g/4"], duration: "16" }),
new StaveNote({ keys: ["a/4"], duration: "16" }),
];
const notes3_3 = [
new StaveNote({ keys: ["c/4"], duration: "8" }),
new StaveNote({ keys: ["d/4"], duration: "8" }),
];
const notes3_4 = [
new StaveNote({ keys: ["e/4"], duration: "16" }),
new StaveNote({ keys: ["f/4"], duration: "16" }),
new StaveNote({ keys: ["g/4"], duration: "16" }),
new StaveNote({ keys: ["a/4"], duration: "16" }),
];
const notes3 = notes3_1.concat(notes3_2).concat(notes3_3).concat(notes3_4);
const beams3 = [new Beam(notes3_1), new Beam(notes3_2), new Beam(notes3_3), new Beam(notes3_4)];
stave3.setContext(ctx).draw();
notes3.forEach((StaveNote) => StaveNote.setStave(stave3));
const voice3 = new Voice({beat_value: 4, num_beats: 4}).setMode(3).addTickables(notes3);
new Formatter().joinVoices([voice3]).formatToStave([voice3], stave3);
voice3.setContext(ctx).draw();
beams3.forEach((beam) => beam.setContext(ctx).draw());
})();
</script>
VexFlow 使い方に戻る。