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

提供：yonewiki
837行目: 837行目:
}
}
Guitar1_tab4.draw();
Guitar1_tab4.draw();


const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
861行目: 859行目:
Guitar1tab_1st.x = Guitar1_Tab1_1.x
Guitar1tab_1st.x = Guitar1_Tab1_1.x
Guitar1tab_1st.y = Guitar1_Tab1_1.y
Guitar1tab_1st.y = Guitar1_Tab1_1.y


const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
886行目: 886行目:
Guitar2_St1.addKeySignature('D').setContext(ctx);
Guitar2_St1.addKeySignature('D').setContext(ctx);
Guitar2_St1.draw();
Guitar2_St1.draw();
const Guitar2_St1_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
];
const Guitar2_St1_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(Guitar1_St4_notes_1, [0, 1, 2, 3, 4, 5, 6, 7]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
const Guitar2_St1_beam_1 = new VF.Beam([
  Guitar2_St1_notes_1[0], Guitar2_St1_notes_1[1], Guitar2_St1_notes_1[2], Guitar2_St1_notes_1[3]
  ]);
const Guitar2_St1_beam_2 = new VF.Beam([
  Guitar2_St1_notes_1[4], Guitar2_St1_notes_1[5], Guitar2_St1_notes_1[6], Guitar2_St1_notes_1[7]
  ]);
var Guitar2_St1_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St1_Voice_1.setStrict(true);
Guitar2_St1_Voice_1.addTickables(Guitar2_St1_notes_1);
var Guitar2_St1_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St1_Voice_2.setStrict(true);
Guitar2_St1_Voice_2.addTickables(Guitar2_St1_notes_2);
var formatterGuitar2_St1 = new VF.Formatter().joinVoices([Guitar2_St1_Voice_1, Guitar2_St1_Voice_2]);
formatterGuitar2_St1.format([Guitar2_St1_Voice_1, Guitar2_St1_Voice_2], nStaveWidth - 20 - 10);
Guitar2_St1_Voice_1.draw(ctx, Guitar2St1);
Guitar2_St1_Voice_2.draw(ctx, Guitar2St1);
Guitar2_St1_beam_1.setContext(ctx).draw();
Guitar2_St1_beam_2.setContext(ctx).draw();
shiftGuitar2_1st= addShift(
  Guitar2_St1_notes_1,
  [0, 1, 2, 3, 4, 5, 6, 7],
  [3, 3, 3, 3, 3, 3, 3, 3.8]
);


const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);

2024年4月12日 (金) 22:16時点における版

VexFlow 使い方に戻る。

概要

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

　

タブ譜 コードフォーム


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


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

</script>


　

　

VexFlow 使い方に戻る。

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