VexFlow 連桁 - 版の履歴

Yo-net: /* 異なる音の長さ同士における連桁 */

2023-02-10T13:37:13Z

異なる音の長さ同士における連桁

← 古い版		2023年2月10日 (金) 22:37時点における版
206行目:		206行目:
	Accidental,		Accidental,
	Beam,		Beam,
			Dot,
	} = Vex.Flow;		} = Vex.Flow;

Yo-net: /* 異なる音の長さ同士における連桁 */

2023-02-10T13:36:53Z

異なる音の長さ同士における連桁

← 古い版		2023年2月10日 (金) 22:36時点における版
233行目:		233行目:
	const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw();		const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw();
	const notes3_1 = [		const notes3_1 = [
	new StaveNote({ keys: ["c/4"], duration: "8" }),		dotted(new StaveNote({ keys: ["c/4"], duration: "8d" })),
	new StaveNote({ keys: ["d/4"], duration: "8" }),		new StaveNote({ keys: ["d/4"], duration: "16" }),
	];		];
	const notes3_2 = [		const notes3_2 = [
	new StaveNote({ keys: ["e/4"], duration: "16" }),		dotted(new StaveNote({ keys: ["e/4"], duration: "16d" })),
	new StaveNote({ keys: ["f/4"], duration: "16" }),		new StaveNote({ keys: ["f/4"], duration: "32" }),
	new StaveNote({ keys: ["g/4"], duration: "16" }),		dotted(new StaveNote({ keys: ["g/4"], duration: "16d" })),
	new StaveNote({ keys: ["a/4"], duration: "16" }),		new StaveNote({ keys: ["a/4"], duration: "32" }),
	];		];
	const notes3_3 = [		const notes3_3 = [
	new StaveNote({ keys: ["c/4"], duration: "8" }),		new StaveNote({ keys: ["c/4"], duration: "16" }),
	new StaveNote({ keys: ["d/4"], duration: "8" }),		new StaveNote({ keys: ["d/4"], duration: "8" }),
			new StaveNote({ keys: ["d/4"], duration: "16" }),
	];		];
	const notes3_4 = [		const notes3_4 = [
	new StaveNote({ keys: ["e/4"], duration: "16" }),		new StaveNote({ keys: ["e/4"], duration: "16" }),
	new StaveNote({ keys: ["f/4"], duration: "16" }),		new StaveNote({ keys: ["f/4"], duration: "16" }),
	new StaveNote({ keys: ["g/4"], duration: "16" }),		new StaveNote({ keys: ["g/4"], duration: "32" }),
			new StaveNote({ keys: ["g/4"], duration: "32" }),
	new StaveNote({ keys: ["a/4"], duration: "16" }),		new StaveNote({ keys: ["a/4"], duration: "16" }),
	];		];
266行目:		268行目:
	beams3.forEach((beam) => beam.setContext(ctx).draw());		beams3.forEach((beam) => beam.setContext(ctx).draw());

			function dotted(staveNote, noteIndex = -1) {
			if (noteIndex < 0) {
			Dot.buildAndAttach([staveNote], {
			all: true
			});
			}
			else {
			for(noteIndexValue of noteIndex){
			Dot.buildAndAttach([staveNote], {
			index: noteIndexValue
			});
			}
			}
			return staveNote;
			}
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 単純な連桁 */

2023-02-10T13:29:38Z

単純な連桁

← 古い版		2023年2月10日 (金) 22:29時点における版
189行目:		189行目:
	なんだかややこしいですが、これが連桁の描き方の基本です。他にもいろいろ方法はありますので、そのあたりは慣れてきてから取り組むといいでしょう。描画する順番は、５線譜(Stave)、StaveNote＆Voice、Beamの順となります。		なんだかややこしいですが、これが連桁の描き方の基本です。他にもいろいろ方法はありますので、そのあたりは慣れてきてから取り組むといいでしょう。描画する順番は、５線譜(Stave)、StaveNote＆Voice、Beamの順となります。


			== '''異なる音の長さ同士における連桁''' ==
			前の項目では、同じ音分同士を繋げましたが、次は異なる長さのものを繋げてみましょう。連符については後で考えますので、8分16分、32分とその付点ありの音のみで考えましょう。表示は複雑ですが、記述としては容易に想像がつく変更です。付点が同時につかわれたり、間に32分が入ったりするだけです。

			<div id="yonet202302_Output02"></div>
			<yjavascript></script>
			<script>
			(function(){
			const {
			Factory,
			Stave,
			StaveNote,
			Formatter,
			Voice,
			Barline,
			Accidental,
			Beam,
			} = Vex.Flow;

			const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', 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());

			})();
			</yjavascript>


			<syntaxhighlight lang="JavaScript" line start="1">
			</syntaxhighlight>



	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

Yo-net: /* 単純な連桁 */

2023-02-10T13:17:08Z

単純な連桁

@@ 168行目: / 168行目: @@
 　これまで一小節分の音符をひとつの配列にまとめていましたが、連桁を描くにはより細かい単位での配列にしなければならず、ひとつの連桁ごとにグループにした配列に細分化しなければなりません。そして、細分化したものを繋げたものを、一小節のnotesとしています。3小節目のデータなので、自身で定義する変数名には基本的に3という接尾句をつけています。3小節目の1つめの連桁を 3_1 のようにします。
-　notes3_1 ～ notes3_4 までを定義し、繋げたものを notes3 としました。定義は
 [[VexFlow 使い方]]に戻る。

Yo-net: /* 単純な連桁 */

2023-02-10T12:51:07Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:51時点における版
165行目:		165行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>

			これまで一小節分の音符をひとつの配列にまとめていましたが、連桁を描くにはより細かい単位での配列にしなければならず、ひとつの連桁ごとにグループにした配列に細分化しなければなりません。そして、細分化したものを繋げたものを、一小節のnotesとしています。3小節目のデータなので、自身で定義する変数名には基本的に3という接尾句をつけています。3小節目の1つめの連桁を 3_1 のようにします。

			notes3_1 ～ notes3_4 までを定義し、繋げたものを notes3 としました。定義は



	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

Yo-net: /* 単純な連桁 */

2023-02-10T12:35:17Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:35時点における版
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 使い方]]に戻る。

Yo-net: /* 単純な連桁 */

2023-02-10T12:33:00Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:33時点における版
50行目:		50行目:
	Formatter.FormatAndDraw(ctx, stave2, notes2);		Formatter.FormatAndDraw(ctx, stave2, notes2);

	const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.~~DOUBLE~~).setContext(ctx).draw();		const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw();
	const notes3_1 = [		const notes3_1 = [
	new StaveNote({ keys: ["c/4"], duration: "8" }),		new StaveNote({ keys: ["c/4"], duration: "8" }),
84行目:		84行目:

	beams3.forEach((beam) => beam.setContext(ctx).draw());		beams3.forEach((beam) => beam.setContext(ctx).draw());


	})();		})();

Yo-net: /* 単純な連桁 */

2023-02-10T12:32:10Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:32時点における版
77行目:		77行目:

	stave3.setContext(ctx).draw();		stave3.setContext(ctx).draw();


	notes3.forEach((StaveNote) => StaveNote.setStave(stave3));		notes3.forEach((StaveNote) => StaveNote.setStave(stave3));
84行目:		83行目:
	voice3.setContext(ctx).draw();		voice3.setContext(ctx).draw();

	beams3.forEach((beam) => beam.setContext(~~f.getContext()~~).draw());		beams3.forEach((beam) => beam.setContext(ctx).draw());

Yo-net: /* 単純な連桁 */

2023-02-10T12:30:24Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:30時点における版
78行目:		78行目:
	stave3.setContext(ctx).draw();		stave3.setContext(ctx).draw();

	~~beams3.forEach((b) => {b.setContext(ctx).draw();});~~

	notes3.forEach((StaveNote) => StaveNote.setStave(stave3));		notes3.forEach((StaveNote) => StaveNote.setStave(stave3));
85行目:		84行目:
	voice3.setContext(ctx).draw();		voice3.setContext(ctx).draw();

			beams3.forEach((beam) => beam.setContext(f.getContext()).draw());

Yo-net: /* 単純な連桁 */

2023-02-10T12:05:20Z

単純な連桁

← 古い版		2023年2月10日 (金) 21:05時点における版
78行目:		78行目:
	stave3.setContext(ctx).draw();		stave3.setContext(ctx).draw();

	// beams3.forEach((b) => b.setContext(ctx).draw());		beams3.forEach((b) => {b.setContext(ctx).draw();});

	notes3.forEach((StaveNote) => StaveNote.setStave(stave3));		notes3.forEach((StaveNote) => StaveNote.setStave(stave3));

	const voice3 = new Voice({beat_value: 4, num_beats: 4}).setMode(3).addTickables(notes3);		const voice3 = new Voice({beat_value: 4, num_beats: 4}).setMode(3).addTickables(notes3);
	new Formatter().joinVoices([voice3]).formatToStave([voice3], stave3);		new Formatter().joinVoices([voice3]).formatToStave([voice3], stave3);