VexFlow アルペジオ - 版の履歴

2024年3月17日 (日) 16:11にYo-netによる

2024-03-17T16:11:03Z

@@ 547行目: / 547行目: @@
 <div id="yonet202403Mid_Output01"></div>
 <script>
 (function(){
 class Position {
@@ 635行目: / 636行目: @@
 stave1.setMeasure(1);
 stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);
-stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);
+stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
 Instrument1.x = stave1.x - 30;
@@ 709行目: / 710行目: @@
 var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);
-//stave1003でクレシェンドデクレシェンドをつけようと頑張った形跡を示します。
 const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
 stave3.setEndBarType(VF.Barline.type.NONE);
 stave3.setSection("B", 0);
 stave3.setMeasure(3);
 stave3.draw();
@@ 748行目: / 724行目: @@
 stave4.draw();
 const stave5 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
@@ 884行目: / 879行目: @@
 newText2.setAttribute('fill', 'black');
 newText2.textContent = 'Vocal';
 var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');

2024年3月17日 (日) 14:31にYo-netによる

2024-03-17T14:31:28Z

← 古い版		2024年3月17日 (日) 23:31時点における版
979行目:		979行目:


	がんばったな。まず、stave1003の定義周辺でVexFlowでクレシェンドやデクレシェンドを付けようと頑張った形跡をしめしました。なんか、変な座標に引っ張られることがあるみたいで、ものすごい幅のバグった描画になってしまう問題から抜け出すことができないことがありました。みなさんの環境では、楽譜の構造が違っているゆえに何ら問題ないけど？みたいなことはあるのかもしれません。わかりません。		Staveの4番目あたりにサンプルのコードを記述しました。またひとつやれることが増えましたね。


	そして、svgタグに線描画によってデクレシェンドを入れ込む技について示しています。367行目からのスクリプトがそれにあたります。この後に示すBravuraフォントを使う方法とどっちが美しいかで、それぞれが歩む道はわかれると思います。ややこしさはこちらだと思います。逆向きのクレシェンドを描くときも座標の計算のやり直しが必要ですね。座標計算が好きな人はこっちかな。


	~~390行目あたりからが、Bravuraフォントを使ったデクレシェンド描画です。~~

	なんか強引なことをやったほうが達成感があるせいか、管理人はBravuraフォントを使った描画が好きですね。今後もこの手法をねじ込んでいこうと思いました。配置さえすれば複雑な図形が描けるってことですからね。汎用性が高いっす。


	~~スクリプトの解説はおいおいやっていきます。~~


	~~とりあえず、次に進む？~~

Yo-net: /* 概要 */

2024-03-17T14:29:59Z

概要

← 古い版		2024年3月17日 (日) 23:29時点における版
50行目:		50行目:
	</tr>		</tr>
	</table>		</table>


			直線の矢印はBrush(ブラシ)という和音奏法で、滑らかにそして鳴らす音の順番にしばられる必要もないけど矢印の向きには一応従うイメージで演奏するという指示なんだそうです。滑らかという指示なので、アルペジオよりゆっくりになりがちだそうです。ブラシで一音一音こすりだすようなイメージだとか。


			矢印の始点にRがあるのはRasgueado(ラスゲアード)といってフラメンコのギターのような掻き鳴らすという意味があるとのことです。一音一音を順番に強くならしていくみたいな感じだそうです。


			つまり、どっちもあまり使わない記号ってことです。そういうどうでもいいところには、つっこんでいくんだよなぁVexFlow。

Yo-net: /* 概要 */

2024-03-17T14:06:49Z

概要

← 古い版	2024年3月17日 (日) 23:06時点における版
20行目:	20行目:


		<table style="border: 0; border-collapse: collapse;">
		<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
		<td>コード</td>
		<td>表示内容</td>
		</tr>
		<tr>
		<td>1</td>
		<td>上向き矢印</td>
		</tr>
		<tr style="background-color: #cccccc;">
		<td>2</td>
		<td>下向き矢印</td>
		</tr>
		<tr>
		<td>3</td>
		<td>上向きナミナミ矢印</td>
		</tr>
		<tr style="background-color: #cccccc;">
		<td>4</td>
		<td>下向きナミナミ矢印</td>
		</tr>
		<tr>
		<td>5</td>
		<td>R付き上向きナミナミ矢印</td>
		</tr>
		<tr style="background-color: #cccccc;">
		<td>6</td>
		<td>R付き下向きナミナミ矢印</td>
		</tr>
		</table>

Yo-net: /* 概要 */

2024-03-17T14:03:28Z

概要

← 古い版		2024年3月17日 (日) 23:03時点における版
6行目:		6行目:
	== '''概要''' ==		== '''概要''' ==
	アルペジオは和音、コード、ハーモニーの構成音を順番に鳴らすような奏法です。時間差をおきながら和音の構成音が重なっていくというのが本来の意味です。管楽器では複数のパートが協力しあってひとつのアルベジオを構成することもありますが、あまり用いられません。ピアノ、ギター、ハープなどの撥弦楽器で多く見られる奏法です。ギターの場合、和音ならすときにゆっくり各弦にアプローチすることで、ジャラーンと微妙な時間差を長めにすることで、アルペジオ奏法を演出します。和音の構成音をフレット上でまとめて押さえた状態で、各弦を32, 16, 8, 4音符のような単位で次々と弾くのもアルペジオと呼ばれています。フィンガーピッキングを行うものをアルペジオと呼んだりもします。それぞれの音を重ねていくという奏法をさしていることが多いです。音を重ねないのにアルペジオと表現する楽譜もみかけますので、どういう意味なのかは、書いた人のみぞ知るということはあると思います。ここではジャラーンとならす音符の横に上方向や下方向なみなみの矢印を記すアルペジオの記譜を紹介します。ギターの音符単位でゆっくり弾いていくアルペジオは範囲指定されることが多いと思います。範囲指定の方はまた別途考えましょう。		アルペジオは和音、コード、ハーモニーの構成音を順番に鳴らすような奏法です。時間差をおきながら和音の構成音が重なっていくというのが本来の意味です。管楽器では複数のパートが協力しあってひとつのアルベジオを構成することもありますが、あまり用いられません。ピアノ、ギター、ハープなどの撥弦楽器で多く見られる奏法です。ギターの場合、和音ならすときにゆっくり各弦にアプローチすることで、ジャラーンと微妙な時間差を長めにすることで、アルペジオ奏法を演出します。和音の構成音をフレット上でまとめて押さえた状態で、各弦を32, 16, 8, 4音符のような単位で次々と弾くのもアルペジオと呼ばれています。フィンガーピッキングを行うものをアルペジオと呼んだりもします。それぞれの音を重ねていくという奏法をさしていることが多いです。音を重ねないのにアルペジオと表現する楽譜もみかけますので、どういう意味なのかは、書いた人のみぞ知るということはあると思います。ここではジャラーンとならす音符の横に上方向や下方向なみなみの矢印を記すアルペジオの記譜を紹介します。ギターの音符単位でゆっくり弾いていくアルペジオは範囲指定されることが多いと思います。範囲指定の方はまた別途考えましょう。


			音符クラスのStaveNoteオブジェクトの中の関数addStrokeという関数を使います。StaveNoteクラスのオブジェクトnotes4というものがあったとしたら、notes4[0].addStroke(0, new VF.Stroke(3))のようにするとアルペジオを示すナミナミの矢印記号を楽譜に追記することができます。


			addStroke関数の引数の説明


			'''第一引数：'''StaveNoteの和音の構造配列があるとしたら、その一番最初の位置に対して、0.5増える都度半音上がった位置を矢印の描画開始点になっていきます。負の値にすると下がっていきます。但し矢印の長さは変わりません。


			'''第二引数：'''アルペジオの上向きならnew VF.Stroke(3)のように描画する記号を指定する関数を指定します。通常はVex.Flow.Stroke()という関数の引数の数字を変更するだけで、描画される記号が変わります。4なら下向きです。各引数による描画記号の対応は次の表に示す通りです。

Yo-net: /* アルペジオ */

2024-03-17T13:45:48Z

アルペジオ

← 古い版		2024年3月17日 (日) 22:45時点における版
239行目:		239行目:
	];		];
	notes4[0].addStroke(0, new VF.Stroke(3));		notes4[0].addStroke(0, new VF.Stroke(3));
			notes4[1].addStroke(0, new VF.Stroke(4));
			notes4[2].addStroke(0, new VF.Stroke(3));
			notes4[3].addStroke(0, new VF.Stroke(4));

	var stave4Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave4Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });

Yo-net: /* アルペジオ */

2024-03-17T13:42:59Z

アルペジオ

← 古い版		2024年3月17日 (日) 22:42時点における版
238行目:		238行目:
	new StaveNote({ keys: ["f/4", "a/4", "c/5", "e/5"], duration: "4" })		new StaveNote({ keys: ["f/4", "a/4", "c/5", "e/5"], duration: "4" })
	];		];
			notes4[0].addStroke(0, new VF.Stroke(3));

	var stave4Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave4Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });

Yo-net: /* アルペジオ */

2024-03-17T13:38:57Z

アルペジオ

← 古い版		2024年3月17日 (日) 22:38時点における版
235行目:		235行目:
	new StaveNote({ keys: ["c/4", "e/4", "g/4", "b/4"], duration: "4" }),		new StaveNote({ keys: ["c/4", "e/4", "g/4", "b/4"], duration: "4" }),
	new StaveNote({ keys: ["d/4", "f/4", "a/4", "c/5"], duration: "4" }),		new StaveNote({ keys: ["d/4", "f/4", "a/4", "c/5"], duration: "4" }),
	new StaveNote({ keys: ["e/4", "g/4", "b/4", "d/4"], duration: "4" }),		new StaveNote({ keys: ["e/4", "g/4", "b/4", "d/5"], duration: "4" }),
	new StaveNote({ keys: ["f/4", "a/4", "c/5", "e/5"], duration: "4" })		new StaveNote({ keys: ["f/4", "a/4", "c/5", "e/5"], duration: "4" })
	];		];

Yo-net: /* アルペジオ */

2024-03-17T13:37:59Z

アルペジオ

← 古い版		2024年3月17日 (日) 22:37時点における版
233行目:		233行目:

	const notes4 = [		const notes4 = [
	new StaveNote({ keys: ["c/4"], duration: "4" }),		new StaveNote({ keys: ["c/4", "e/4", "g/4", "b/4"], duration: "4" }),
	new StaveNote({ keys: ["d/4"], duration: "4" }),		new StaveNote({ keys: ["d/4", "f/4", "a/4", "c/5"], duration: "4" }),
	new StaveNote({ keys: ["e/4"], duration: "4" }),		new StaveNote({ keys: ["e/4", "g/4", "b/4", "d/4"], duration: "4" }),
	new StaveNote({ keys: ["f/4"], duration: "4" })		new StaveNote({ keys: ["f/4", "a/4", "c/5", "e/5"], duration: "4" })
	];		];

Yo-net: /* アルペジオ */

2024-03-17T13:30:09Z

アルペジオ

← 古い版		2024年3月17日 (日) 22:30時点における版
233行目:		233行目:

	const notes4 = [		const notes4 = [
	new StaveNote({ keys: ["c/4"], duration: "4"~~, stem_direction: -1~~ }),		new StaveNote({ keys: ["c/4"], duration: "4" }),
	new StaveNote({ keys: ["d/4"], duration: "4"~~, stem_direction: -1~~ }),		new StaveNote({ keys: ["d/4"], duration: "4" }),
	new StaveNote({ keys: ["e/4"], duration: "4"~~, stem_direction: -1~~ }),		new StaveNote({ keys: ["e/4"], duration: "4" }),
	new StaveNote({ keys: ["f/4"], duration: "4"~~, stem_direction: -1~~ })		new StaveNote({ keys: ["f/4"], duration: "4" })
	];		];