「VexFlow タブ譜 コードフォーム」の版間の差分

提供：yonewiki
(同じ利用者による、間の5版が非表示)
7行目: 7行目:
== '''概要''' ==
== '''概要''' ==
　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。
　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。
　1小節に2コードある場合、矢印でどの部分からがそのコードかを示す矢印を描く関数を追加しました。矢印を描くのって数学の知識いるよね。プログラムの世界だけにあるatan2関数とかね。三角関数を使いこなせないと、矢印をひくのは難しい。


　
　
993行目: 996行目:
const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);
const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);
Guitar2_St3.draw();
Guitar2_St3.draw();
const Guitar2_St3_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "2", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["b/4"], duration: "4", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["b/4"], duration: "4", stem_direction: -1 }),
];
const Guitar2_St3_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar2_St3_notes_1, [0, 1, 2]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
var Guitar2_St3_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St3_Voice_1.setStrict(true);
Guitar2_St3_Voice_1.addTickables(Guitar2_St3_notes_1);
var Guitar2_St3_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St3_Voice_2.setStrict(true);
Guitar2_St3_Voice_2.addTickables(Guitar2_St3_notes_2);
var formatterGuitar2_St3 = new VF.Formatter().joinVoices([Guitar2_St3_Voice_1, Guitar2_St3_Voice_2]);
formatterGuitar2_St3.format([Guitar2_St3_Voice_1, Guitar2_St3_Voice_2], nStaveWidth - 20 - 10);
Guitar2_St3_Voice_1.draw(ctx, Guitar2_St3);
Guitar2_St3_Voice_2.draw(ctx, Guitar2_St3);
shiftGuitar2_3st= addShift(
  Guitar2_St3_notes_1,
  [0, 1, 2],
  [1, 1, 1]
);


const Guitar2_St4 = new Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx);
const Guitar2_St4 = new Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx);
1,455行目: 1,507行目:
};
};
insertTextToSVG(Guitar2_st2_option);
insertTextToSVG(Guitar2_st2_option);
var Guitar2_st3_option = {
    textContent: ["\uFF88", "\uFF87", "\uFF87"], // 必須文字列
    strID: "Guitar2_st3", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar2_3st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2_st3_option);


var Guitar2tab_st1_option = {
var Guitar2tab_st1_option = {
1,502行目: 1,567行目:
};
};
insertTextToSVG(Guitar2tab_st2_option);
insertTextToSVG(Guitar2tab_st2_option);
var Guitar2tab_st3_option = {
    textContent: ["\uFF03", "５", "４", "３", "：", "＿", "？", "？"], // 必須文字列
    strID: "Guitar2tab_st3", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar2tab_3st.x + 10, y:Guitar2tab_3st.y + 80},
{x:Guitar2tab_3st.x + 15, y:Guitar2tab_3st.y + 90},
{x:Guitar2tab_3st.x + 30, y:Guitar2tab_3st.y + 90},
{x:Guitar2tab_3st.x + 45, y:Guitar2tab_3st.y + 90},
//{x:Guitar2tab_3st.x + 27, y:Guitar2tab_3st.y + 50},//3弦中ポジ
//{x:Guitar2tab_3st.x + 10, y:Guitar2tab_3st.y + 60},//4弦内ポジ
{x:Guitar2tab_3st.x + 42, y:Guitar2tab_3st.y + 70},//5弦外ポジ
{x:Guitar2tab_3st.x + 10, y:Guitar2tab_3st.y + 60},//内全セーハ
//{x:Guitar2tab_3st.x + 42, y:Guitar2tab_3st.y + 60},//外全セーハ
{x:Guitar2tab_3st.x + 80, y:Guitar2tab_3st.y + 30},//1弦ネックマーク
//{x:Guitar2tab_3st.x + 60, y:Guitar2tab_3st.y + 40},//2弦ネックマーク
//{x:Guitar2tab_3st.x + 60, y:Guitar2tab_3st.y + 50},//3弦ネックマーク
//{x:Guitar2tab_3st.x + 60, y:Guitar2tab_3st.y + 60},//4弦ネックマーク
//{x:Guitar2tab_3st.x + 60, y:Guitar2tab_3st.y + 70},//5弦ネックマーク
{x:Guitar2tab_3st.x + 80, y:Guitar2tab_3st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2tab_st3_option);


var EGuitar2Text_options = {
var EGuitar2Text_options = {

2024年4月13日 (土) 00:35時点における版

VexFlow 使い方に戻る。

概要

　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。


　1小節に2コードある場合、矢印でどの部分からがそのコードかを示す矢印を描く関数を追加しました。矢印を描くのって数学の知識いるよね。プログラムの世界だけにあるatan2関数とかね。三角関数を使いこなせないと、矢印をひくのは難しい。

　

タブ譜 コードフォーム


　コードは以下のとおりです。 


<div id="yonet202403Mid_Output01"></div>
<script>

</script>


　

　

VexFlow 使い方に戻る。

「https://wiki.yo-net.jp/index.php?title=VexFlow_タブ譜_コードフォーム&oldid=7798」から取得