VexFlow クレシェンド・デクレシェンド - 版の履歴

Yo-net: /* 概要 */

2024-03-16T18:50:12Z

概要

← 古い版		2024年3月17日 (日) 03:50時点における版
8行目:		8行目:


	それで、結局、また奥の手を発動させました。今度はさらに奥の手の奥の手です。ウェブフォントでフリーのBravura.woff2というのを使いました。FMuFLというプロジェクトの中で生まれた標準音楽フォントの一つです。もうひとつ奥の手は自分で作った音楽フォントを使うというのがあります。以前にわたくしは制作済みなので、それをひっぱりだしてくる感じになります。くわしくは、[[ギター用楽譜フォント\|こちらの記事]]ですね。		それで、結局、また奥の手を発動させました。今度はさらに奥の手の奥の手です。ウェブフォントでフリーのBravura.woff2というのを使いました。SMuFLというプロジェクトの中で生まれた標準音楽フォントの一つです。もうひとつ奥の手は自分で作った音楽フォントを使うというのがあります。以前にわたくしは制作済みなので、それをひっぱりだしてくる感じになります。くわしくは、[[ギター用楽譜フォント\|こちらの記事]]ですね。

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T14:58:31Z

クレシェンド・デクレシェンド

← 古い版		2024年3月16日 (土) 23:58時点における版
942行目:		942行目:


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


	なんか強引なことをやったほうが達成感があるせいか、管理人はBravuraフォントを使った描画が好きですね。今後もこの手法をねじ込んでいこうと思いました。		390行目あたりからが、Bravuraフォントを使ったデクレシェンド描画です。

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


951行目:		953行目:


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

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T14:54:21Z

クレシェンド・デクレシェンド

← 古い版		2024年3月16日 (土) 23:54時点における版
939行目:		939行目:


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


			そして、svgタグに線描画によってクレシェンドを入れ込む技について示しています。367行目からのスクリプトがそれにあたります。この後に示すBravuraフォントを使う方法とどっちが美しいかで、それぞれが歩む道はわかれると思います。


			なんか強引なことをやったほうが達成感があるせいか、管理人はBravuraフォントを使った描画が好きですね。今後もこの手法をねじ込んでいこうと思いました。


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


			とりあえず、次に進もう。

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T14:44:08Z

クレシェンド・デクレシェンド

← 古い版		2024年3月16日 (土) 23:44時点における版
668行目:		668行目:
	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);

	~~//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));~~


	//stave1003でクレシェンドデクレシェンドをつけようと頑張った形跡を示します。		//stave1003でクレシェンドデクレシェンドをつけようと頑張った形跡を示します。
827行目:		824行目:
	var svgContainer = document.getElementById('yonet202403Mid_Output01');		var svgContainer = document.getElementById('yonet202403Mid_Output01');

	~~// span要素内の最初のsvg要素を取得~~
	var svgElement = svgContainer.querySelector('svg');		var svgElement = svgContainer.querySelector('svg');

	~~// 新しいテキスト要素を作成~~
	var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');		var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	newText.setAttribute('x', '100');		newText.setAttribute('x', '100');
838行目:		833行目:
	newText.setAttribute('fill', 'black');		newText.setAttribute('fill', 'black');
	newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net';		newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net';
	~~// SVG要素に新しいテキスト要素を追加~~
	svgElement.appendChild(newText);		svgElement.appendChild(newText);

850行目:		845行目:
	newText2.textContent = 'Vocal';		newText2.textContent = 'Vocal';

	~~// グループ（g要素）を作成~~
	var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');		textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');

	~~// テキストをグループに追加~~
	textGroup2.appendChild(newText2);		textGroup2.appendChild(newText2);

	~~// グループをSVG要素に追加~~
	svgElement.appendChild(textGroup2);		svgElement.appendChild(textGroup2);

868行目:		861行目:
	newText3.textContent = 'E.Guitar';		newText3.textContent = 'E.Guitar';

	~~// グループ（g要素）を作成~~
	var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');		textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');

	~~// テキストをグループに追加~~
	textGroup3.appendChild(newText3);		textGroup3.appendChild(newText3);

	~~// グループをSVG要素に追加~~
	svgElement.appendChild(textGroup3);		svgElement.appendChild(textGroup3);

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T14:41:38Z

クレシェンド・デクレシェンド

差分を表示

Yo-net: /* 概要 */

2024-03-16T14:34:00Z

概要

← 古い版		2024年3月16日 (土) 23:34時点における版
33行目:		33行目:

	そうして、javascriptで強引にクレシェンドを呼び出すコードを書きます。かなり難しいですが、読み解いてほしいです。説明もしますけど、いかんせんJavascriptをある程度しっている必要はあります。敷居高いな。VexFlow。		そうして、javascriptで強引にクレシェンドを呼び出すコードを書きます。かなり難しいですが、読み解いてほしいです。説明もしますけど、いかんせんJavascriptをある程度しっている必要はあります。敷居高いな。VexFlow。


			SMuFLのグリフテーブルは[https://w3c.github.io/smufl/latest/tables/index.html https://w3c.github.io/smufl/latest/tables/index.html]から調べることができます。あるいはFontForgeのようなものでフォントファイルを開いて見つけるというのも手だと思います。クレシェンドはU+E53EとデクレシェンドのU+E53Fに配置されています。4.44 Dyanamicsの項目にあります。英語の項目名を読み解ける必要があります。探すのはそれぞれで頑張ってほしいですね。


			BravuraTextは、こういう説明文中に挟み込むような小さな文字としての音楽記号が詰め込まれているそうです。

2024年3月16日 (土) 14:26にYo-netによる

2024-03-16T14:26:33Z

← 古い版		2024年3月16日 (土) 23:26時点における版
11行目:		11行目:


	ご自分のサイトでBravuraフォントを使いたい場合は[https://github.com/steinbergmedia/bravura 公式サイト]からダウンロードしてくる必要があります。ウェブフォントの拡張子はwoffとwoffというのがあります。woffが初代ウェブフォントだったのですが、woff2というwoffより上位の圧縮フォントが登場してるらしいです。自分が作ったのは、まだttfとかotfの範疇の形式でFontForgeで作ったモノです。[[FontForge]]でウェブフォント作った経験がまだないので、そこはコレから習得する感じですね。		ご自分のサイトでBravuraフォントを使いたい場合は[https://github.com/steinbergmedia/bravura 公式サイト]からダウンロードしてくる必要があります。ウェブフォントの拡張子はwoffとwoffというのがあります。woffが初代ウェブフォントだったのですが、woff2というwoffより上位の圧縮フォントが登場してるらしいです。自分が作ったのは、まだttfとかotfの範疇の形式で[[フォント Font Forge\|FontForge]]で作ったモノです。[[フォント Font Forge\|FontForge]]でウェブフォント作った経験がまだないので、そこはコレから習得する感じですね。


			話がそれたので、それはおいておいて、ダウンロードしたフォントを自分のサイトにアップロードします。好きなところに配置してよいですが、あとで相対パスで指定するので、どこに置いたかは把握しておく必要はありますし、参照しやすいパスがいいでしょう。そして、以下のような記述をcssで追記します。以下の例はhtmlファイルから見て、ファイルと同じディレクトリにfontというフォルダを作って、その中にBravura.woff2などの一式のフォントを置いたとしたらの例です。


			<syntaxhighlight lang="css">
			@font-face {
			font-family: 'Bravura';
			src: url('./font/Bravura.woff2') format('woff2'),
			url('./font/Bravura.woff') format('woff');
			}

			@font-face {
			font-family: 'BravuraText';
			src: url('./font/BravuraText.woff2') format('woff2'),
			url('./font/BravuraText.woff') format('woff');
			}
			</syntaxhighlight>


			そうして、javascriptで強引にクレシェンドを呼び出すコードを書きます。かなり難しいですが、読み解いてほしいです。説明もしますけど、いかんせんJavascriptをある程度しっている必要はあります。敷居高いな。VexFlow。

2024年3月16日 (土) 14:12にYo-netによる

2024-03-16T14:12:07Z

← 古い版		2024年3月16日 (土) 23:12時点における版
6行目:		6行目:
	== '''概要''' ==		== '''概要''' ==
	クレシェンドやデクレシェンドもTextDynamics同様、音の長さの概念をもった仕組みを利用しますので、またVoiceクラスやFormatterクラスのお世話になるややこしさがあります。なんかいろいろ頑張ったんすけど、1小節目の位置からクレシェンドが描かれてしまってギブアップです。なんで？って感じ。4拍目だけまともに描けるのも、またミソだね。嫌になってきたから、このクレシェンドはもう使わねぇって決めたね。使わねぇ。何だコレだね。		クレシェンドやデクレシェンドもTextDynamics同様、音の長さの概念をもった仕組みを利用しますので、またVoiceクラスやFormatterクラスのお世話になるややこしさがあります。なんかいろいろ頑張ったんすけど、1小節目の位置からクレシェンドが描かれてしまってギブアップです。なんで？って感じ。4拍目だけまともに描けるのも、またミソだね。嫌になってきたから、このクレシェンドはもう使わねぇって決めたね。使わねぇ。何だコレだね。


			それで、結局、また奥の手を発動させました。今度はさらに奥の手の奥の手です。ウェブフォントでフリーのBravura.woff2というのを使いました。FMuFLというプロジェクトの中で生まれた標準音楽フォントの一つです。もうひとつ奥の手は自分で作った音楽フォントを使うというのがあります。以前にわたくしは制作済みなので、それをひっぱりだしてくる感じになります。くわしくは、[[ギター用楽譜フォント\|こちらの記事]]ですね。


			ご自分のサイトでBravuraフォントを使いたい場合は[https://github.com/steinbergmedia/bravura 公式サイト]からダウンロードしてくる必要があります。ウェブフォントの拡張子はwoffとwoffというのがあります。woffが初代ウェブフォントだったのですが、woff2というwoffより上位の圧縮フォントが登場してるらしいです。自分が作ったのは、まだttfとかotfの範疇の形式でFontForgeで作ったモノです。[[FontForge]]でウェブフォント作った経験がまだないので、そこはコレから習得する感じですね。

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T14:01:14Z

クレシェンド・デクレシェンド

← 古い版		2024年3月16日 (土) 23:01時点における版
422行目:		422行目:

	var crescendo4X = 1110; // X座標1110		var crescendo4X = 1110; // X座標1110
	var crescendo4Y = ~~290~~; // Y座標290		var crescendo4Y = 295; // Y座標290
	var crescendo4Width = 80; // クレシェンドの幅		var crescendo4Width = 80; // クレシェンドの幅
	var crescendo4Height = 100; // クレシェンドの幅		var crescendo4Height = 100; // クレシェンドの幅

Yo-net: /* クレシェンド・デクレシェンド */

2024-03-16T13:59:35Z

クレシェンド・デクレシェンド

← 古い版		2024年3月16日 (土) 22:59時点における版
450行目:		450行目:
	// クレシェンドの幅に応じて縦方向のスケーリング		// クレシェンドの幅に応じて縦方向のスケーリング
	var horizontalScale = crescendo4Width / textWidth;		var horizontalScale = crescendo4Width / textWidth;
	var verticalScale = crescendo4Height / textHeight; // 1.5は適当な調整値です		var verticalScale = 1.2;//crescendo4Height / textHeight; // 1.5は適当な調整値です

	newText4.setAttribute('transform', 'translate(' + crescendo4X + ',' + crescendo4Y + ') scale(' + horizontalScale + ',' + verticalScale + ')');		newText4.setAttribute('transform', 'translate(' + crescendo4X + ',' + crescendo4Y + ') scale(' + horizontalScale + ',' + verticalScale + ')');