VexFlow 装飾音符 - 版の履歴

Yo-net: /* 装飾音符 */

2024-03-26T09:24:35Z

装飾音符

← 古い版		2024年3月26日 (火) 18:24時点における版
402行目:		402行目:


	<syntaxhighlight lang="javascript" line start="1" highlight="~~345~~-~~348~~">		<syntaxhighlight lang="javascript" line start="1" highlight="98-100,113,126-128,130,132-141">
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<script>		<script>

Yo-net: /* 装飾音符 */

2024-03-26T09:14:26Z

装飾音符

← 古い版		2024年3月26日 (火) 18:14時点における版
804行目:		804行目:


	最後に、管理人がもっとも美しいと感じたピアノ旋律のTHE BOOMの「からたち野道」のイントロの装飾音符の描き方を示しておきました。これくらいまで、VexFlowの描画技術があれば十分だと思います。装飾音符史上最高の使い方だと思いました。2番目は、JUDY AND ~~MARYの「散歩道」のギターソロの終わりの部分の装飾音符ですね。暫定1位と暫定2位を紹介しておきました。~~		最後に、管理人がもっとも美しいと感じたピアノ旋律のTHE BOOMの「からたち野道」のイントロの装飾音符の描き方を示しておきました。これくらいまで、VexFlowの描画技術があれば十分だと思います。装飾音符史上最高の使い方だと思いました。2番目は、JUDY AND MARYの「散歩道」のギターソロの終わりの部分の装飾音符ですね。暫定1位と暫定2位を紹介しておきました。からたちってのはミカン科の植物でトゲのある枝に果実がなります。戦争のある時代の少女が愛する人を想いながら神社へとむかうカラタチのある野道を空を見上げたり、赤い実を食べて、唇を赤くしたりしながら、日々、往復している様子を描いていると思います。



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

Yo-net: /* 装飾音符 */

2024-03-26T09:01:10Z

装飾音符

← 古い版		2024年3月26日 (火) 18:01時点における版
510行目:		510行目:
	new StaveNote({ keys: ["f/4", "a/4", "c/5"], duration: "4" })		new StaveNote({ keys: ["f/4", "a/4", "c/5"], duration: "4" })
	];		];
			//以下のようなオブジェクト指定はこのサイトだけの特別な記法です。
	notes1[0].addModifier(new VF.Accidental({type:'#'}), 0);		notes1[0].addModifier(new VF.Accidental({type:'#'}), 0);
			//一般的には以下の記述方法を使います。
			//.addModifier(new VF.Accidental('#'), 0)

	notes1[0].addModifier(new VF.GraceNoteGroup({notes: gracenotes1, slur: true}), 0);		notes1[0].addModifier(new VF.GraceNoteGroup({notes: gracenotes1, slur: true}), 0);
			//同じく
			//.addModifier(new VF.GraceNoteGroup(gracenotes1, true}), 0)

	var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
522行目:		527行目:
	stave1Voice.draw(ctx, stave1);		stave1Voice.draw(ctx, stave1);

			//Factoryクラスのオブジェクトfの関数を使う方法
	const stave2 = f.Stave({ x: stave1.width + stave1.x, y: stave1.y, width: nStaveWidth });		const stave2 = f.Stave({ x: stave1.width + stave1.x, y: stave1.y, width: nStaveWidth });
	stave2.setMeasure(2);		stave2.setMeasure(2);
538行目:		544行目:
	var formatter2 = new VF.Formatter().joinVoices([stave2Voice]);		var formatter2 = new VF.Formatter().joinVoices([stave2Voice]);
	formatter2.formatToStave([stave2Voice], stave2);		formatter2.formatToStave([stave2Voice], stave2);
	f.draw();		f.draw();//ここはいろいろな記述の最後に一回だけ使うと思う。なので、この先もっとこの方法で小節を描画する場合はそのスクリプトを先に書いて最後に.draw()を実行かな。
			//ここまで

	const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
564行目:		571行目:
	stave4Voice.draw(ctx, stave4);		stave4Voice.draw(ctx, stave4);

			//ここから「からたち野道」のイントロピアノ旋律。装飾音符を使う暫定1位。
	const stave5 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);		const stave5 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
	stave5.addClef("treble").setContext(ctx);		stave5.addClef("treble").setContext(ctx);

Yo-net: /* 装飾音符 */

2024-03-26T02:08:09Z

装飾音符

差分を表示

Yo-net: /* 装飾音符 */

2024-03-25T16:00:28Z

装飾音符

← 古い版		2024年3月26日 (火) 01:00時点における版
306行目:		306行目:
	new StaveNote({ keys: ["g/6"], duration: "8", stem_direction: -1 }),		new StaveNote({ keys: ["g/6"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["f/6"], duration: "8", stem_direction: -1 }),		new StaveNote({ keys: ["f/6"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["e/6"], duration: "8", stem_direction: -1 })		new StaveNote({ keys: ["e/6"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["e/6"], duration: "2", stem_direction: -1 })		new StaveNote({ keys: ["e/6"], duration: "2", stem_direction: -1 })
	];		];

Yo-net: /* 装飾音符 */

2024-03-25T15:58:03Z

装飾音符

@@ 301行目: / 301行目: @@
 stave8.setMeasure(8);
 stave8.draw();
 const stave9 = new Stave(stave5.x, stave5.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);

Yo-net: /* 装飾音符 */

2024-03-25T15:50:00Z

装飾音符

← 古い版		2024年3月26日 (火) 00:50時点における版
673行目:		673行目:

	またまたかゆいところに手が届かないVexFlowが露見してますね。小難しいことは対応してるくせに大事なところがいい加減なんだよな。装飾音符と音符の幅も大きいままで変えられないし。ラデツキー行進曲とか装飾音符が最高な曲を美しく描けないなんて淋しいじゃない。		またまたかゆいところに手が届かないVexFlowが露見してますね。小難しいことは対応してるくせに大事なところがいい加減なんだよな。装飾音符と音符の幅も大きいままで変えられないし。ラデツキー行進曲とか装飾音符が最高な曲を美しく描けないなんて淋しいじゃない。


			最後に、管理人がもっとも美しいと感じたピアノ旋律のTHE BOOMの「からたち野道」のイントロの装飾音符の描き方を示しておきました。これくらいまで、VexFlowの描画技術があれば十分だと思います。装飾音符史上最高の使い方だと思いました。2番目は、JUDY AND MARYの「散歩道」のギターソロの終わりの部分の装飾音符ですね。暫定1位と暫定2位を紹介しておきました。



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

Yo-net: /* 装飾音符 */

2024-03-25T15:43:46Z

装飾音符

@@ 275行目: / 275行目: @@
 stave7.setMeasure(7);
 stave7.draw();
 const stave8 = new Stave(stave7.width + stave7.x, stave5.y, nStaveWidth).setContext(ctx);

Yo-net: /* 装飾音符 */

2024-03-25T15:33:18Z

装飾音符

← 古い版		2024年3月26日 (火) 00:33時点における版
256行目:		256行目:
	new StaveNote({ keys: ["g/5"], duration: "4", stem_direction: -1 }),		new StaveNote({ keys: ["g/5"], duration: "4", stem_direction: -1 }),
	new StaveNote({ keys: ["b/5"], duration: "4", stem_direction: -1 }),		new StaveNote({ keys: ["b/5"], duration: "4", stem_direction: -1 }),
	dotted(new StaveNote({ keys: ["f/5"], duration: "4d", stem_direction: -1 }),		dotted(new StaveNote({ keys: ["f/5"], duration: "4d", stem_direction: -1 })),
	new StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }),		new StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }),
	new StaveNote({ keys: ["f/5"], duration: "16", stem_direction: -1 })		new StaveNote({ keys: ["f/5"], duration: "16", stem_direction: -1 })

Yo-net: /* 装飾音符 */

2024-03-25T15:30:17Z

装飾音符

← 古い版		2024年3月26日 (火) 00:30時点における版
41行目:		41行目:
	BarLine,		BarLine,
	Beam,		Beam,
			Dot,
	StaveConnector,		StaveConnector,
	Modifier,		Modifier,
231行目:		232行目:

	stave5Voice.draw(ctx, stave5);		stave5Voice.draw(ctx, stave5);

			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;
			}

	const stave6 = new Stave(stave5.width + stave5.x, stave5.y, nStaveWidth).setContext(ctx);		const stave6 = new Stave(stave5.width + stave5.x, stave5.y, nStaveWidth).setContext(ctx);
239行目:		256行目:
	new StaveNote({ keys: ["g/5"], duration: "4", stem_direction: -1 }),		new StaveNote({ keys: ["g/5"], duration: "4", stem_direction: -1 }),
	new StaveNote({ keys: ["b/5"], duration: "4", stem_direction: -1 }),		new StaveNote({ keys: ["b/5"], duration: "4", stem_direction: -1 }),
	~~new VF.Dot.buildAndAttach~~(new StaveNote({ keys: ["f/5"], duration: "4d", stem_direction: -1 ~~}), { all: true~~ }),		dotted(new StaveNote({ keys: ["f/5"], duration: "4d", stem_direction: -1 }),
	new StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }),		new StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }),
	new StaveNote({ keys: ["f/5"], duration: "16", stem_direction: -1 })		new StaveNote({ keys: ["f/5"], duration: "16", stem_direction: -1 })