大譜表を描く(SVG)

grandstaff-title

『海の上のピアニスト』(The Legend of 1900)(1998)
大西洋を往復する豪華客船で生まれた1900(ティム・ロス)は、ピアノ弾きです。ずっと船の上でピアノだけを弾いてきてるので、羨ましいほど技が極まってます。ピアノバトルもあって、速弾きするシーンにはぞくぞくしました。
今回は「ド星の輪をつける」の続きで、大譜表を描いてみます。

ヘ音記号が、「SVGで五線譜を描く(その3)」と同じく、inkscapeを使って手で描きました。そしてスクリプトとしてまとめたのがこれです。

     1	onpu(){
     2		x=120
     3		for i in $@;do
     4			onkai=`expr 200 - $i \* 10`
     5			b2=`expr $onkai - 5`
     6			b1=`expr $onkai - 70`
     7			bx=`expr $x + 12`
     8			for j in 0 12;do
     9			if [ $i -eq $j ] ; then
    10				barx1=`expr $x - 20`
    11				barx2=`expr $x + 20`
    12				dosei="<line x1=\"$barx1\" y1=\"$onkai\" x2=\"$barx2\" y2=\"$onkai\" stroke=\"black\" stroke-width=\"2.5\"/>"
    13				break
    14			else
    15				dosei=""
    16			fi
    17			done
    18	cat <<EOL
    19	<ellipse cx="$x" cy="$onkai" rx="14" ry="9" fill="black" transform="rotate(-25,$x,$onkai)"/>
    20	<line x1="$bx" y1="$b1" x2="$bx" y2="$b2" stroke="black" stroke-width="2.5"/>
    21	$dosei
    22	EOL
    23		x=`expr $x + 60`;
    24		done
    25	}
    26	a=`onpu 0 1 2 3 4 5 6 7 8 9 10 11 12`
    27	
    28	cat <<EOL > /tmp/tmp.svg
    29	<svg width="980" height="400">
    30	<rect x="0" y="0" width="1280" height="400"
    31	fill="white"></rect>
    32	<line x1="10" y1="100" x2="1270" y2="100" stroke="black"/>
    33	<line x1="10" y1="120" x2="1270" y2="120" stroke="black"/>
    34	<line x1="10" y1="140" x2="1270" y2="140" stroke="black"/>
    35	<line x1="10" y1="160" x2="1270" y2="160" stroke="black"/>
    36	<line x1="10" y1="180" x2="1270" y2="180" stroke="black"/>
    37	
    38	<line x1="10" y1="300" x2="1270" y2="300" stroke="black"/>
    39	<line x1="10" y1="320" x2="1270" y2="320" stroke="black"/>
    40	<line x1="10" y1="340" x2="1270" y2="340" stroke="black"/>
    41	<line x1="10" y1="360" x2="1270" y2="360" stroke="black"/>
    42	<line x1="10" y1="380" x2="1270" y2="380" stroke="black"/>
    43	<line x1="10" y1="100" x2="10" y2="380" stroke="black"/>
    44	$a
    45	
    46	<path stroke="black" stroke-width="1"
    47	d="m 56.35986,168.66933 c 0,0 -4.61429,-0.97143 
    48	-5.82857,-7.77143 -1.69321,-9.48198 10.88767,-14.08481 
    49	16.75714,-10.44286 5.0332,3.12306 5.49313,13.26802 
    50	3.15714,17.97143 -7.39019,14.87984 -32.05714,6.31429 
    51	-33.02857,-12.38571 -0.85171,-16.39547 23.31429,-34.24286 
    52	23.31429,-34.24286 15.69195,-18.14484 14.27911,-29.83344 
    53	5.1,-45.9 -9.67568,6.65963 -13.98784,17.86559 
    54	-12.87143,28.41428 0.37615,3.13466 11.41428,91.55715 
    55	11.41428,91.55715 -0.97143,1.7 0.60315,6.29524 
    56	-7.04285,9.71428 -5.75143,2.57185 -13.95304,-3.97819 
    57	-10.44286,-4.61428 2.43211,-0.44074 6.02055,-2.16783 
    58	6.55714,-7.04286 0.43495,-3.9516 -3.88571,-9.22857 
    59	-10.68571,-6.31429 -9.70669,7.11557 0.006,19.9073 
    60	12.38571,20.64286 11.15395,-1.12296 11.46971,-11.74642 
    61	11.17143,-17.00001 -0.25271,-3.70639 -10.68571,-84.02856 
    62	-10.68571,-84.02856 -0.24286,-5.1 3.59877,-18.50425 
    63	9.95714,-18.94286 3.30325,-0.22786 5.82315,8.82371 
    64	1.45714,15.78572 -8.98571,14.32857 -33.79055,29.19106 
    65	-35.21428,44.68571 -1.58507,16.3288 12.24666,29.92904 
    66	26.71428,30.35714 7.60069,-0.91625 18.84479,-6.24743 
    67	20.15714,-21.12857 0.94007,-10.65967 -8.01428,-18.21428 
    68	-19.91428,-16.75714 -2.98171,0.36511 -10.17437,4.05167 
    69	-12.14286,9.95714 -2.57761,8.56468 2.2775,14.91145 
    70	9.71429,17.48572 z"
    71	/>
    72	
    73	<path stroke="black" stroke-width="1"
    74	d="m 43.037329,311.67862 c 7.993845,-3.48451 
    75	14.258454,5.47241 7.173963,11.06838 -6.45173,5.09616 
    76	-17.013942,-2.30443 -13.323075,-12.09325 4.714319,-12.50319 
    77	27.267029,-15.20024 35.45988,-2.86959 7.511421,11.30509 
    78	2.869586,23.98153 -5.329237,33.61514 -6.084824,7.14968 
    79	-33.061716,20.825 -33.061716,20.825 l 0,0 c 0,0 
    80	23.658537,-17.02074 28.552371,-29.63873 5.382081,-13.87684 
    81	2.578791,-29.22674 -5.534201,-30.13063 -6.058788,-0.67504 
    82	-13.203561,0.26772 -15.987689,6.76402 -1.844735,4.30438 
    83	2.049704,2.45966 2.049704,2.45966 z"
    84	/>
    85	
    86	<path stroke="black" stroke-width="1"
    87	d="m 87.925847,310.03882 a 4.0994077,4.5093484 0 0 1 
    88	-4.063277,4.50917 4.0994077,4.5093484 0 0 1 
    89	-4.134902,-4.42969 4.0994077,4.5093484 0 0 1 
    90	3.990388,-4.58725 4.0994077,4.5093484 0 0 1 
    91	4.205243,4.34882"
    92	/>
    93	
    94	<path stroke="black" stroke-width="1"
    95	d="m 88.130826,327.05136 a 4.0994077,4.5093484 0 0 1 
    96	-4.063277,4.50917 4.0994077,4.5093484 0 0 1 
    97	-4.134902,-4.42968 4.0994077,4.5093484 0 0 1 
    98	3.990388,-4.58726 4.0994077,4.5093484 0 0 1 
    99	4.205243,4.34882"
   100	/>
   101	
   102	</svg>
   103	EOL
   104	inkscape -z -e out.png /tmp/tmp.svg

46行目〜100行目が、inkscapeで描いたpathですが、小数部の桁数が大きいのでテキスト量が多くなってしまっています。
小数第一位までの数字に置換しましょう。

~$ sed -n 46,84p t.sh | perl -pe 's/([\d\.]+)/sprintf("%1.1f",$1)/ge' | tee path.txt
<path stroke="black" stroke-width="1.0"
d="m 56.4,168.7 c 0.0,0.0 -4.6,-1.0 
-5.8,-7.8 -1.7,-9.5 10.9,-14.1 
16.8,-10.4 5.0,3.1 5.5,13.3 
3.2,18.0 -7.4,14.9 -32.1,6.3 
-33.0,-12.4 -0.9,-16.4 23.3,-34.2 
23.3,-34.2 15.7,-18.1 14.3,-29.8 
5.1,-45.9 -9.7,6.7 -14.0,17.9 
-12.9,28.4 0.4,3.1 11.4,91.6 
11.4,91.6 -1.0,1.7 0.6,6.3 
-7.0,9.7 -5.8,2.6 -14.0,-4.0 
-10.4,-4.6 2.4,-0.4 6.0,-2.2 
6.6,-7.0 0.4,-4.0 -3.9,-9.2 
-10.7,-6.3 -9.7,7.1 0.0,19.9 
12.4,20.6 11.2,-1.1 11.5,-11.7 
11.2,-17.0 -0.3,-3.7 -10.7,-84.0 
-10.7,-84.0 -0.2,-5.1 3.6,-18.5 
10.0,-18.9 3.3,-0.2 5.8,8.8 
1.5,15.8 -9.0,14.3 -33.8,29.2 
-35.2,44.7 -1.6,16.3 12.2,29.9 
26.7,30.4 7.6,-0.9 18.8,-6.2 
20.2,-21.1 0.9,-10.7 -8.0,-18.2 
-19.9,-16.8 -3.0,0.4 -10.2,4.1 
-12.1,10.0 -2.6,8.6 2.3,14.9 
9.7,17.5 z"
/>

<path stroke="black" stroke-width="1.0"
d="m 43.0,311.7 c 8.0,-3.5 
14.3,5.5 7.2,11.1 -6.5,5.1 
-17.0,-2.3 -13.3,-12.1 4.7,-12.5 
27.3,-15.2 35.5,-2.9 7.5,11.3 
2.9,24.0 -5.3,33.6 -6.1,7.1 
-33.1,20.8 -33.1,20.8 l 0.0,0.0 c 0.0,0.0 
23.7,-17.0 28.6,-29.6 5.4,-13.9 
2.6,-29.2 -5.5,-30.1 -6.1,-0.7 
-13.2,0.3 -16.0,6.8 -1.8,4.3 
2.0,2.5 2.0,2.5 z"
/>

~$ 

さらに、小数点以下が0のものは、整数にします。

~$ sed 's/\.0//g' -i path.txt
~$ cat -n path.txt
     1	<path stroke="black" stroke-width="1"
     2	d="m 56.4,168.7 c 0,0 -4.6,-1 
     3	-5.8,-7.8 -1.7,-9.5 10.9,-14.1 
     4	16.8,-10.4 5,3.1 5.5,13.3 
     5	3.2,18 -7.4,14.9 -32.1,6.3 
     6	-33,-12.4 -0.9,-16.4 23.3,-34.2 
     7	23.3,-34.2 15.7,-18.1 14.3,-29.8 
     8	5.1,-45.9 -9.7,6.7 -14,17.9 
     9	-12.9,28.4 0.4,3.1 11.4,91.6 
    10	11.4,91.6 -1,1.7 0.6,6.3 
    11	-7,9.7 -5.8,2.6 -14,-4 
    12	-10.4,-4.6 2.4,-0.4 6,-2.2 
    13	6.6,-7 0.4,-4 -3.9,-9.2 
    14	-10.7,-6.3 -9.7,7.1 0,19.9 
    15	12.4,20.6 11.2,-1.1 11.5,-11.7 
    16	11.2,-17 -0.3,-3.7 -10.7,-84 
    17	-10.7,-84 -0.2,-5.1 3.6,-18.5 
    18	10,-18.9 3.3,-0.2 5.8,8.8 
    19	1.5,15.8 -9,14.3 -33.8,29.2 
    20	-35.2,44.7 -1.6,16.3 12.2,29.9 
    21	26.7,30.4 7.6,-0.9 18.8,-6.2 
    22	20.2,-21.1 0.9,-10.7 -8,-18.2 
    23	-19.9,-16.8 -3,0.4 -10.2,4.1 
    24	-12.1,10 -2.6,8.6 2.3,14.9 
    25	9.7,17.5 z"
    26	/>
    27	
    28	<path stroke="black" stroke-width="1"
    29	d="m 43,311.7 c 8,-3.5 
    30	14.3,5.5 7.2,11.1 -6.5,5.1 
    31	-17,-2.3 -13.3,-12.1 4.7,-12.5 
    32	27.3,-15.2 35.5,-2.9 7.5,11.3 
    33	2.9,24 -5.3,33.6 -6.1,7.1 
    34	-33.1,20.8 -33.1,20.8 l 0,0 c 0,0 
    35	23.7,-17 28.6,-29.6 5.4,-13.9 
    36	2.6,-29.2 -5.5,-30.1 -6.1,-0.7 
    37	-13.2,0.3 -16,6.8 -1.8,4.3 
    38	2,2.5 2,2.5 z"
    39	/>
~$ 

これを最初のスクリプトへ反映します。

~$ sed 46,84d t.sh > tmp.sh
~$ sed '45r path.txt' -i tmp.sh

実行してみます。

~$ . tmp.sh

実行すると、タイトルの画像が生成されます。

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA