星座のプログラムを作り変えました。11月の星座ということで、さそり座です。 今回も Snap.svg を使いました。2か月ぶりに瞬きするアニメを復活しました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script src="js/snap.svg-min.js"></script> <script src="js/zodiac07.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac07.js の中で更新、追加しています。
今回の svg 要素でも Adobe Illustrator で作成したさそりの絵をそのまま貼り付けています。 Illustrator のレイヤーが g 要素として出力され、元の絵は左上に位置していて、まだ、 transform 属性が指定されていません。
<h2>実行結果</h2>
<svg id="Zodiac" xmlns="http://www.w3.org/2000/svg" width="640" height="400">
<rect x="0" y="0" width="640" height="400" style="fill:#111"/>
<g id="Scorpius">
<ellipse cx="210.878" cy="192.364" rx="92" ry="47" transform="translate(-74.257 205.455) rotate(-45)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="148.878" cy="267.364" rx="12" ry="15" transform="translate(-22.736 13.993) rotate(-5)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="152.878" cy="297.364" rx="13" ry="18" style="fill: #111467; stroke: #000; stroke-width: 2px;"/>
<ellipse cx="152.878" cy="329.364" rx="15" ry="12" transform="translate(-209.397 354.054) rotate(-69)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="129.878" cy="351.364" rx="18" ry="14" transform="translate(-136.324 87.809) rotate(-25)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="97.878" cy="363.364" rx="17" ry="11" transform="translate(-118.375 55.39) rotate(-20)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="68.878" cy="364.364" rx="15" ry="12" style="fill: #111467; stroke: #000; stroke-width: 2px;"/>
<ellipse cx="39.878" cy="360.364" rx="10" ry="16" transform="translate(-321.475 330.749) rotate(-79)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="14.878" cy="349.364" rx="10" ry="18" transform="translate(-221.086 91.299) rotate(-40)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="16.878" cy="322.364" rx="15" ry="10" transform="translate(-215.318 98.113) rotate(-43)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="38.878" cy="303.364" rx="14" ry="10" transform="translate(-218.503 138.148) rotate(-50)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="60.878" cy="280.364" rx="18" ry="12" transform="translate(-224.032 246.648) rotate(-71)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="82.758 254.554 55.186 266.587 65.255 279.021 82.758 254.554" style="fill: #111467; stroke-width: 0px;"/>
<ellipse cx="158.878" cy="246.364" rx="16" ry="24" transform="translate(-122.658 164.664) rotate(-41)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="170.878" cy="233.364" rx="21" ry="36" transform="translate(-114.15 184.198) rotate(-44)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="185.878" cy="215.364" rx="29" ry="45" transform="translate(-87.308 135.981) rotate(-33)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="203.878" cy="198.364" rx="31" ry="46" transform="translate(-80.129 182.413) rotate(-41)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="223.878" cy="179.364" rx="31" ry="46" transform="translate(-62.916 185.869) rotate(-40)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="241.878" cy="161.364" rx="28" ry="40" transform="translate(-47.646 188.179) rotate(-39)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="300.243" y="155.205" width="12" height="67" transform="translate(-40.624 283.981) rotate(-47)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="291.311" y="181.114" width="12" height="67" transform="translate(-37.206 364.786) rotate(-60)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="268.277" y="209.165" width="12" height="67" transform="translate(-84.588 315.673) rotate(-53)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="241.365" y="232.571" width="11" height="57" transform="translate(-112.07 244.76) rotate(-44)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="217.267" y="250.563" width="11" height="57" transform="translate(-121.484 184.235) rotate(-36)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="214.206" y="61.242" width="12" height="67" transform="translate(-8.142 167.707) rotate(-41)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="180.186" y="77.258" width="12" height="67" transform="translate(-28.72 138.107) rotate(-38)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="154.243" y="98.205" width="12" height="67" transform="translate(-45.365 159.077) rotate(-47)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="131.549" y="133.55" width="11" height="57" transform="translate(-72.441 196.062) rotate(-59)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="115.699" y="159.494" width="11" height="57" transform="translate(-95.047 245.168) rotate(-72)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="327.878" y="201.364" width="37" height="16" style="fill: #111467; stroke: #000; stroke-width: 2px;"/>
<rect x="324.878" y="226.364" width="34" height="12" style="fill: #111467; stroke: #000; stroke-width: 2px;"/>
<rect x="296.878" y="252.364" width="34" height="12" transform="translate(-56.174 90.041) rotate(-15)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="262.878" y="270.364" width="34" height="12" transform="translate(-9.474 9.936) rotate(-2)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="246.878" y="280.364" width="12" height="34" transform="translate(-57.314 534.333) rotate(-87)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="184.36" y="50.864" width="37" height="16" transform="translate(136.952 259.546) rotate(-88)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="157.878" y="55.364" width="12" height="34" transform="translate(-13.145 44.88) rotate(-15)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="129.878" y="76.364" width="12" height="34" transform="translate(-19.535 38.349) rotate(-15)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="108.878" y="115.364" width="12" height="34" transform="translate(-13.207 12.733) rotate(-6)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<rect x="93.878" y="147.364" width="12" height="34" transform="translate(-16.634 11.34) rotate(-6)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="386.285 218.18 352.029 227.534 357.523 239.316 386.285 218.18" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="357.285 239.18 323.029 248.534 328.523 260.316 357.285 239.18" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="326.285 262.18 292.029 271.534 297.523 283.316 326.285 262.18" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="299.285 284.18 265.029 293.534 270.523 305.316 299.285 284.18" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="176.859 26.354 155.13 54.441 166.608 60.544 176.859 26.354" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="148.859 48.354 127.13 76.441 138.608 82.544 148.859 48.354" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="121.99 86.869 107.701 119.378 120.315 122.523 121.99 86.869" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="106.99 114.869 92.701 147.378 105.315 150.523 106.99 114.869" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="291.134 112.1 258.082 117.718 267.616 136.429 291.134 112.1" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<polygon points="292.878 114.508 268.218 137.221 286.404 147.721 292.878 114.508" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="257.878" cy="145.364" rx="25" ry="31" transform="translate(-27.257 224.923) rotate(-45)" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<ellipse cx="258.878" cy="135.364" rx="5" ry="4" style="stroke-width: 0px;"/>
<ellipse cx="268.878" cy="145.364" rx="5" ry="4" style="stroke-width: 0px;"/>
<path d="m394.238,195.09c-6.29,14.13-19.16,22.12-28.75,17.85-9.58-4.26-12.26-19.18-5.97-33.3,2.78-6.24,6.84-11.29,11.33-14.6l2.43,26.04,12.95-30.02c.69.19,1.37.42,2.04.72,9.58,4.27,12.26,19.18,5.97,33.31Z" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
<path d="m218.008,26.47l26.04-1.67c-2.38,5.12-6.6,10.15-12.27,14.13-12.67,8.87-27.82,9.09-33.84.49-6.02-8.59-.63-22.75,12.04-31.62,12.67-8.87,27.82-9.09,33.84-.5.46.66.86,1.36,1.19,2.09l-27,17.08Z" style="fill: #111467; stroke: #000; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性を使い、下記の zodiac07.html のソース（さそり）より位置を移動しています。</li>
<li>68行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,68]">
</pre>
さそり座の星座を表示するプログラムです。 元々 HTML に記載されていたさそりの絵を移動し、座標や星座を重ねています。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
let s; // for Snap
/* Initialize stars in Scorpius
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
let star = {};
star['Antares A'] = {ra: '16 29 24.47', dec: '-26 25 55.0', mag: 0.91, fd: 21};
star['λ Sco'] = {ra: '17 33 36.53', dec: '-37 06 13.5', mag: 1.62, fd: 35};
star['θ Sco'] = {ra: '17 37 19.13', dec: '-42 59 52.2', mag: 1.86};
star['δ Sco'] = {ra: '16 00 20.01', dec: '-22 37 17.8', mag: 2.29, fd: 7};
star['ε Sco'] = {ra: '16 50 10.24', dec: '-34 17 33.4', mag: 2.29, fd: 26};
star['κ Sco'] = {ra: '17 42 29.28', dec: '-39 01 47.7', mag: 2.39};
star['β1 Sco'] = {ra: '16 05 26.23', dec: '-19 48 19.4', mag: 2.62, fd: 8};
star['υ Sco'] = {ra: '17 30 45.84', dec: '-37 17 44.7', mag: 2.70, fd: 34};
star['τ Sco'] = {ra: '16 35 52.96', dec: '-28 12 57.5', mag: 2.82, fd: 23};
star['π Sco'] = {ra: '15 58 51.12', dec: '-26 06 50.6', mag: 2.89, fd: 6};
star['σ Sco'] = {ra: '16 21 11.32', dec: '-25 35 33.9', mag: 2.90, fd: 20};
star['ι1 Sco'] = {ra: '17 47 35.08', dec: '-40 07 37.1', mag: 2.99};
star['μ1 Sco'] = {ra: '16 51 52.24', dec: '-38 02 50.4', mag: 3.00};
star['G Sco'] = {ra: '17 49 51.45', dec: '-37 02 36.1', mag: 3.19};
star['η Sco'] = {ra: '17 12 09.18', dec: '-43 14 18.6', mag: 3.32};
star['μ2 Sco'] = {ra: '16 52 20.15', dec: '-38 01 02.9', mag: 3.56};
star['ζ2 Sco'] = {ra: '16 54 35.11', dec: '-42 21 38.7', mag: 3.62};
star['ρ Sco'] = {ra: '15 56 53.09', dec: '-29 12 50.4', mag: 3.87, fd: 5};
star['ω1 Sco'] = {ra: '16 06 48.43', dec: '-20 40 08.9', mag: 3.93, fd: 9};
star['ν Sco'] = {ra: '16 11 59.74', dec: '-19 27 38.3', mag: 4.00, fd: 14};
star['H Sco'] = {ra: '16 36 22.46', dec: '-35 15 19.3', mag: 4.18};
star['N Sco'] = {ra: '16 31 22.94', dec: '-34 42 15.6', mag: 4.24};
star['Q Sco'] = {ra: '17 36 32.85', dec: '-38 38 05.5', mag: 4.26};
star['ω2 Sco'] = {ra: '16 07 24.30', dec: '-20 52 07.2', mag: 4.31, fd: 10};
star['ο Sco'] = {ra: '16 20 38.18', dec: '-24 10 09.4', mag: 4.55, fd: 19};
star['13 Sco'] = {ra: '16 12 18.21', dec: '-27 55 34.7', mag: 4.58, fd: 13};
star['2 Sco'] = {ra: '15 53 36.73', dec: '-25 19 37.5', mag: 4.59, fd: 2};
star['1 Sco'] = {ra: '15 50 58.75', dec: '-25 45 04.4', mag: 4.63, fd: 1};
star['ζ1 Sco'] = {ra: '16 53 59.73', dec: '-42 21 43.3', mag: 4.70};
star['ξ Sco A'] = {ra: '16 04 22.10', dec: '-11 22 23.0', mag: 4.77};
star['ι2 Sco'] = {ra: '17 50 11.11', dec: '-40 05 25.5', mag: 4.78};
star['22 Sco'] = {ra: '16 30 12.48', dec: '-25 06 54.6', mag: 4.79, fd: 22};
star['HD 161840'] = {ra: '17 49 10.47', dec: '-31 42 11.5', mag: 4.79};
star['HD 146624'] = {ra: '16 18 17.92', dec: '-28 36 49.6', mag: 4.80};
star['V1073 Sco'] = {ra: '17 04 49.35', dec: '-34 07 22.5', mag: 4.83};
star['HD 163145'] = {ra: '17 56 47.43', dec: '-44 20 31.9', mag: 4.85};
star['HD 163376'] = {ra: '17 57 47.81', dec: '-41 42 58.5', mag: 4.88};
star['β2 Sco'] = {ra: '16 05 26.58', dec: '-19 48 06.6', mag: 4.90};
star['ψ Sco'] = {ra: '16 12 00.00', dec: '-10 03 51.1', mag: 4.93, fd: 15};
star['HD 143787'] = {ra: '16 03 20.67', dec: '-25 51 54.5', mag: 4.96};
star['HD 153613'] = {ra: '17 01 52.65', dec: '-32 08 36.2', mag: 5.03};
star['HD 154948'] = {ra: '17 10 42.35', dec: '-44 33 27.2', mag: 5.06};
star['ξ Sco B'] = {ra: '16 04 22.3', dec: '-11 22 18', mag: 5.07};
star['HD 145250'] = {ra: '16 11 02.13', dec: '-29 24 57.6', mag: 5.09};
star['HD 157243'] = {ra: '17 24 13.09', dec: '-44 09 45.0', mag: 5.10};
star['Antares B'] = {ra: '16 29 24.2', dec: '-26 25 51', mag: 5.2, fd: 21};
star['HD 151804'] = {ra: '16 51 33.72', dec: '-41 13 49.9', mag: 5.23};
star['χ Sco'] = {ra: '16 13 50.91', dec: '-11 50 15.8', mag: 5.24, fd: 17};
star['HD 148688'] = {ra: '16 31 41.77', dec: '-41 49 01.7', mag: 5.31};
star['HD 144690'] = {ra: '16 08 07.52', dec: '-26 19 36.0', mag: 5.35};
star['HD 147513'] = {ra: '16 24 01.24', dec: '-39 11 34.8', mag: 5.37};
star['HD 142165'] = {ra: '15 53 53.92', dec: '-24 31 59.1', mag: 5.38};
star['HR 5907'] = {ra: '15 53 55.87', dec: '-23 58 40.9', mag: 5.41};
star['HD 147628'] = {ra: '16 24 31.77', dec: '-37 33 57.5', mag: 5.42};
star['HD 142990'] = {ra: '15 58 34.87', dec: '-24 49 53.1', mag: 5.43};
star['16 Sco'] = {ra: '16 12 07.29', dec: '-08 32 51.3', mag: 5.43, fd: 16};
star['HD 149404'] = {ra: '16 36 22.57', dec: '-42 51 31.9', mag: 5.46};
star['HD 152234'] = {ra: '16 54 01.84', dec: '-41 48 23.0', mag: 5.46};
star['HD 151078'] = {ra: '16 46 47.97', dec: '-39 22 36.8', mag: 5.48};
star['27 Sco'] = {ra: '16 57 11.17', dec: '-33 15 34.1', mag: 5.48, fd: 27};
star['18 Sco'] = {ra: '16 15 37.13', dec: '-08 22 05.7', mag: 5.49, fd: 18};
star['HD 144987'] = {ra: '16 09 52.61', dec: '-33 32 44.5', mag: 5.50};
star['HD 146836'] = {ra: '16 19 32.68', dec: '-30 54 24.4', mag: 5.53};
star['HD 156098'] = {ra: '17 17 03.71', dec: '-32 39 45.7', mag: 5.53};
star['HD 160668'] = {ra: '17 42 51.09', dec: '-36 56 43.8', mag: 5.53};
star['HD 155806'] = {ra: '17 15 19.25', dec: '-33 32 54.3', mag: 5.53};
star['HD 162587'] = {ra: '17 53 23.47', dec: '-34 53 42.4', mag: 5.58};
star['4 Sco'] = {ra: '15 55 30.10', dec: '-26 15 57.3', mag: 5.63, fd: 4};
star['HD 150742'] = {ra: '16 44 42.60', dec: '-40 50 22.6', mag: 5.64};
star['HD 155259'] = {ra: '17 12 16.22', dec: '-39 30 24.4', mag: 5.66};
star['12 Sco'] = {ra: '16 12 16.05', dec: '-28 25 01.9', mag: 5.67, fd: 12};
star['HD 159176'] = {ra: '17 34 42.49', dec: '-32 34 54.0', mag: 5.69};
star['11 Sco'] = {ra: '16 07 36.44', dec: '-12 44 43.2', mag: 5.75, fd: 11};
star['HD 156293'] = {ra: '17 18 47.84', dec: '-44 07 46.9', mag: 5.76};
star['HD 152408'] = {ra: '16 54 58.51', dec: '-41 09 03.1', mag: 5.78};
star['HD 148247'] = {ra: '16 28 14.46', dec: '-37 10 47.3', mag: 5.79};
star['V1003 Sco'] = {ra: '16 38 26.30', dec: '-43 23 54.2', mag: 5.83};
star['HD 142883'] = {ra: '15 57 40.47', dec: '-20 58 58.9', mag: 5.84};
star['HD 150331'] = {ra: '16 41 45.50', dec: '-33 08 44.2', mag: 5.84};
star['HD 152293'] = {ra: '16 54 26.94', dec: '-42 28 44.0', mag: 5.84};
star['HD 158799'] = {ra: '17 33 07.39', dec: '-41 10 23.0', mag: 5.84};
star['HD 162391'] = {ra: '17 52 19.76', dec: '-34 25 00.6', mag: 5.84};
star['HD 147723'] = {ra: '16 24 39.73', dec: '-29 42 16.1', mag: 5.84};
star['HD 145191'] = {ra: '16 11 17.77', dec: '-41 07 10.2', mag: 5.86};
star['HD 144844'] = {ra: '16 08 43.73', dec: '-23 41 07.3', mag: 5.87};
star['3 Sco'] = {ra: '15 54 39.54', dec: '-25 14 37.2', mag: 5.87, fd: 3};
star['HD 160928'] = {ra: '17 44 42.01', dec: '-42 43 45.5', mag: 5.87};
star['V957 Sco'] = {ra: '17 52 13.66', dec: '-34 47 57.1', mag: 5.87};
star['V929 Sco'] = {ra: '16 06 06.38', dec: '-23 36 22.5', mag: 5.90};
star['HD 145838'] = {ra: '16 14 22.37', dec: '-33 00 39.8', mag: 5.91};
star['V923 Sco'] = {ra: '17 03 50.87', dec: '-38 09 09.0', mag: 5.91};
star['Gliese 667 A'] = {ra: '17 18 56.36', dec: '-34 59 22.5', mag: 5.91};
star['HD 157097'] = {ra: '17 22 54.73', dec: '-37 13 14.5', mag: 5.91};
star['HD 149886'] = {ra: '16 39 05.24', dec: '-37 13 02.1', mag: 5.93};
star['HD 154783'] = {ra: '17 08 47.55', dec: '-30 24 12.8', mag: 5.93};
star['HD 162189'] = {ra: '17 51 32.57', dec: '-40 46 20.4', mag: 5.94};
star['V1068 Sco'] = {ra: '16 53 42.44', dec: '-43 03 03.2', mag: 5.95};
star['HD 153368'] = {ra: '17 00 36.99', dec: '-35 56 02.3', mag: 5.95};
star['HD 155450'] = {ra: '17 12 58.56', dec: '-32 26 18.0', mag: 5.95};
star['HD 155826'] = {ra: '17 15 36.08', dec: '-38 35 34.6', mag: 5.95};
star['HD 146850'] = {ra: '16 19 00.43', dec: '-14 52 22.2', mag: 5.97};
star['HD 154310'] = {ra: '17 06 20.20', dec: '-37 13 39.1', mag: 5.98};
star['HD 158105'] = {ra: '17 28 56.09', dec: '-36 46 41.8', mag: 5.98};
star['HD 150894'] = {ra: '16 45 00.21', dec: '-28 30 34.8', mag: 5.99};
star['V906 Sco'] = {ra: '17 53 54.77', dec: '-34 45 09.8', mag: 6.00};
star['BM Sco'] = {ra: '17 40 58.55', dec: '-32 12 52.0', mag: 6.01};
star['HD 162517'] = {ra: '17 52 57.60', dec: '-35 37 27.1', mag: 6.03};
star['HD 150608'] = {ra: '16 43 47.60', dec: '-38 09 22.5', mag: 6.05};
star['HD 153072'] = {ra: '16 58 52.25', dec: '-37 37 13.5', mag: 6.05};
star['HD 162496'] = {ra: '17 52 49.22', dec: '-34 06 53.4', mag: 6.05};
star['HD 162926'] = {ra: '17 55 08.03', dec: '-36 28 32.3', mag: 6.05};
star['HD 146001'] = {ra: '16 14 53.44', dec: '-25 28 36.9', mag: 6.06};
star['HD 152248'] = {ra: '16 54 10.06', dec: '-41 49 30.1', mag: 6.06};
star['HD 143619'] = {ra: '16 02 39.40', dec: '-29 08 08.8', mag: 6.07};
star['HD 148760'] = {ra: '16 31 22.87', dec: '-26 32 15.2', mag: 6.07};
star['HD 146254'] = {ra: '16 15 51.49', dec: '-14 50 56.8', mag: 6.09};
star['HD 155974'] = {ra: '17 16 21.68', dec: '-35 44 58.1', mag: 6.09};
star['HD 159707'] = {ra: '17 38 08.45', dec: '-42 52 48.7', mag: 6.09};
star['HD 151771'] = {ra: '16 51 00.04', dec: '-37 30 52.1', mag: 6.10};
star['HD 162817'] = {ra: '17 54 27.12', dec: '-34 28 00.2', mag: 6.10};
star['RR Sco'] = {ra: '16 56 37.85', dec: '-30 34 48.1', mag: 6.10};
star['HD 146954'] = {ra: '16 20 32.63', dec: '-39 25 48.8', mag: 6.11};
star['HD 154368'] = {ra: '17 06 28.37', dec: '-35 27 03.7', mag: 6.13};
star['HD 150591'] = {ra: '16 43 54.09', dec: '-41 06 47.9', mag: 6.14};
star['HD 157486'] = {ra: '17 25 02.67', dec: '-34 41 45.6', mag: 6.14};
star['HD 162586'] = {ra: '17 53 19.58', dec: '-34 43 50.9', mag: 6.14};
star['HD 142250'] = {ra: '15 54 30.12', dec: '-27 20 18.9', mag: 6.15};
star['HR 6522'] = {ra: '17 32 24.64', dec: '-34 16 45.6', mag: 6.16};
star['HD 144927'] = {ra: '16 09 31.76', dec: '-32 38 56.2', mag: 6.18};
star['V861 Sco'] = {ra: '16 56 35.98', dec: '-40 49 24.4', mag: 6.18};
star['HD 154153'] = {ra: '17 05 48.47', dec: '-44 06 18.4', mag: 6.18};
star['HD 162396'] = {ra: '17 52 52.47', dec: '-41 59 45.8', mag: 6.19};
star['HD 155940'] = {ra: '17 15 51.36', dec: '-30 12 38.2', mag: 6.20};
star['RS Sco'] = {ra: '16 55 37.81', dec: '-45 06 10.7', mag: 6.20};
star['HD 150573'] = {ra: '16 43 45.70', dec: '-41 07 08.9', mag: 6.21};
star['HD 143900'] = {ra: '16 03 54.71', dec: '-24 43 34.8', mag: 6.22};
star['HD 159633'] = {ra: '17 37 26.92', dec: '-38 03 58.9', mag: 6.26};
star['HD 154025'] = {ra: '17 05 05.39', dec: '-45 30 07.4', mag: 6.28};
star['HD 163433'] = {ra: '17 57 57.80', dec: '-39 08 11.3', mag: 6.28};
star['V900 Sco'] = {ra: '16 53 58.85', dec: '-41 59 39.6', mag: 6.29};
star['HD 146834'] = {ra: '16 19 07.71', dec: '-20 13 04.9', mag: 6.29};
star['HD 152636'] = {ra: '16 55 57.74', dec: '-33 30 24.8', mag: 6.29};
star['ν Sco C'] = {ra: '16 11 58.60', dec: '-19 26 59.0', mag: 6.30, fd: 14};
star['HD 152424'] = {ra: '16 55 03.33', dec: '-42 05 27.0', mag: 6.30};
star['HD 155276'] = {ra: '17 12 16.55', dec: '-38 49 20.7', mag: 6.30};
star['HD 158042'] = {ra: '17 29 00.86', dec: '-43 58 26.0', mag: 6.30};
star['HD 144585'] = {ra: '16 07 03.53', dec: '-14 04 16.8', mag: 6.32};
star['HD 144661'] = {ra: '16 07 51.90', dec: '-24 27 44.2', mag: 6.32};
star['HD 145997'] = {ra: '16 14 39.30', dec: '-18 32 07.2', mag: 6.32};
star['HD 157038'] = {ra: '17 22 39.22', dec: '-37 48 16.7', mag: 6.33};
star['HD 152431'] = {ra: '16 54 35.94', dec: '-30 35 14.4', mag: 6.34};
star['HD 151965'] = {ra: '16 52 27.42', dec: '-40 43 23.2', mag: 6.35};
star['V1077 Sco'] = {ra: '17 18 20.51', dec: '-32 33 11.1', mag: 6.36};
star['HD 158156'] = {ra: '17 29 25.60', dec: '-38 31 01.0', mag: 6.38};
star['HD 162678'] = {ra: '17 53 45.50', dec: '-34 47 09.7', mag: 6.38};
star['HD 145792'] = {ra: '16 13 45.50', dec: '-24 25 19.4', mag: 6.40};
star['HD 146436'] = {ra: '16 16 59.20', dec: '-20 06 14.7', mag: 6.40};
star['HD 145964'] = {ra: '16 14 28.89', dec: '-21 06 27.2', mag: 6.41};
star['HD 161390'] = {ra: '17 47 07.30', dec: '-38 06 43.5', mag: 6.41};
star['V951 Sco'] = {ra: '17 53 58.13', dec: '-34 49 51.8', mag: 6.41};
star['HR 6392'] = {ra: '17 14 27.66', dec: '-39 45 59.9', mag: 6.42};
star['HD 157060'] = {ra: '17 22 37.90', dec: '-35 54 39.4', mag: 6.42};
star['HD 145100'] = {ra: '16 09 55.31', dec: '-18 20 25.6', mag: 6.43};
star['HD 149174'] = {ra: '16 35 07.77', dec: '-45 14 39.2', mag: 6.43};
star['HD 158619'] = {ra: '17 31 47.36', dec: '-33 42 11.1', mag: 6.43};
star['HD 160748'] = {ra: '17 43 06.86', dec: '-33 03 04.6', mag: 6.44};
star['HD 147553'] = {ra: '16 23 56.72', dec: '-33 11 57.6', mag: 6.45};
star['HD 152249'] = {ra: '16 54 11.64', dec: '-41 50 57.2', mag: 6.45};
star['HD 150638'] = {ra: '16 43 38.73', dec: '-32 06 21.2', mag: 6.46};
star['HD 155985'] = {ra: '17 17 05.54', dec: '-44 46 42.9', mag: 6.46};
star['HD 163234'] = {ra: '17 56 55.89', dec: '-40 18 20.3', mag: 6.46};
star['HD 150420'] = {ra: '16 42 29.11', dec: '-37 04 44.9', mag: 6.47};
star['HD 153919'] = {ra: '17 03 56.77', dec: '-37 50 39.0', mag: 6.48};
star['HD 159312'] = {ra: '17 35 43.08', dec: '-37 26 23.3', mag: 6.48};
star['HD 151932'] = {ra: '16 52 19.25', dec: '-41 51 16.2', mag: 6.49};
star['HD 153234'] = {ra: '17 00 14.26', dec: '-44 59 18.5', mag: 6.50};
star['4U 1700-37'] = {ra: '17 03 56.77', dec: '-37 50 38.9', mag: 6.51};
star['HD 145102'] = {ra: '16 10 15.92', dec: '-26 54 32.8', mag: 6.57};
star['V453 Sco'] = {ra: '17 56 16.08', dec: '-32 28 30.0', mag: 6.61};
star['RV Sco'] = {ra: '16 58 19.75', dec: '-33 36 32.8', mag: 6.61};
star['HD 160529'] = {ra: '17 41 59.03', dec: '-33 30 13.7', mag: 6.66};
star['25 Sco'] = {ra: '16 46 51.35', dec: '-25 31 42.7', mag: 6.72, fd: 25};
star['V636 Sco'] = {ra: '17 22 46.48', dec: '-45 36 51.4', mag: 6.74};
let edge = [['β1 Sco', 'δ Sco'], ['δ Sco', '2 Sco'], ['δ Sco', 'π Sco'], ['δ Sco', 'σ Sco'], ['σ Sco', 'Antares A'], ['Antares A', 'τ Sco'], ['τ Sco', 'ε Sco'], ['ε Sco', 'μ1 Sco'], ['μ1 Sco', 'ζ2 Sco'], ['ζ2 Sco', 'η Sco'], ['η Sco', 'θ Sco'], ['θ Sco', 'ι1 Sco'], ['ι1 Sco', 'κ Sco'], ['κ Sco', 'Q Sco'], ['Q Sco', 'λ Sco'], ['κ Sco', 'G Sco']];
let offsetX, offsetY;
let wrap = false;
let decMin, decMax;
let raMin = 0;
let raMax;
let xMin, xMax;
let yMin, yMax;
let eye = [];
const nEyes = 2;
/**
* closeEyes function
* @since 0.3
*/
const closeEyes = function() {
for (i = 1; i <= nEyes; i++) {
eye[i] = Snap.select('#eye' + i);
eye[i].attr({opacity: 0.1});
}
setTimeout(openEyes, blink);
}
/**
* openEyes function
* @since 0.3
*/
const openEyes = function() {
for (i = 1; i <= nEyes; i++) {
eye[i] = Snap.select('#eye' + i);
eye[i].attr({opacity: 1.0});
}
}
/**
* drawGrids function
* @since 0.1
*/
const drawGrids = function() {
dec = 0;
y1 = 0;
y2 = height;
for (ra = raMin; ra <= raMax; ra++) {
xy = raDec2xy(String(ra), String(dec));
s.line(xy[0], y1, xy[0], y2).attr({stroke: 'dimgray', strokeWidth: 1});
raTxt = ra;
if (wrap & (raTxt < 0)) {
raTxt += 24;
}
s.text(xy[0], 5 + 12, raTxt + 'h').attr({fill: 'dimgray', 'font-size': 12});
}
x1 = 0;
x2 = width;
for (dec = decMin; dec <= decMax + 10; dec += 10) {
if (dec > 0) {
strDec = '+' + dec;
} else {
strDec = String(dec);
}
xy = raDec2xy(String(ra), strDec);
s.line(x1, xy[1], x2, xy[1]).attr({stroke: 'dimgray', strokeWidth: 1});
s.text(x1, xy[1] + 12, strDec).attr({fill: 'dimgray', 'font-size': 12});
}
}
/**
* getMinMax function - Get minimum and maximum coordinates
* @since 0.1
* return decMin - minimum declination
* return decMax - maximum declination
* return raMin - minimum right ascension
* return raMax - maximum right ascension
* return xMin - minimum x coordinate
* return xMax - maximum x coordinate
* return yMin - minimum y coordinate
* return yMax - maximum y coordinate
*/
const getMinMax = function() {
first = true;
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
ra1 = Number(ra.substring(0, 2));
if (wrap & (12 < ra1)) {
ra1 -= 24;
}
if (first) {
raMin = ra1;
decMin = Number(dec.substring(0, 3));
raMax = ra1;
decMax = Number(dec.substring(0, 3));
xMin = xy[0];
yMin = xy[1];
xMax = xy[0];
yMax = xy[1];
first = false;
} else {
raMin = Math.min(ra1, raMin);
decMin = Math.min(dec.substring(0, 3), decMin);
raMax = Math.max(ra1, raMax);
decMax = Math.max(dec.substring(0, 3), decMax);
xMin = Math.min(xy[0], xMin);
yMin = Math.min(xy[1], yMin);
xMax = Math.max(xy[0], xMax);
yMax = Math.max(xy[1], yMax);
}
});
decMin = Math.floor(decMin / 10) * 10;
raMax = raMax + 1;
decMax = decMax + 1;
}
/**
* raDec2xy function - Convert ra, dec to x, y
* @since 0.1
* @param ra - right ascension
* @param dec - declination
* @return [x, y] - coordinates in graphics window
*/
const raDec2xy = function(ra, dec) {
let x = Number(ra.substring(0, 2));
if (wrap & (12 < x)) {
x -= 24;
}
x = x + ra.substring(3, 5) / 60.;
x = x + ra.substring(6, 11) / 3600.;
x = offsetX - (x - raMin) * 3600. / 24.;
let y = Number(dec.substring(1, 3));
y = y + dec.substring(4, 6) / 60.;
y = y + dec.substring(7, 12) / 3600.;
y = y * (dec.substring(0, 1) + '1');
y = offsetY - y * 3600. / 360.;
return [x, y];
}
/**
* onload function
* @since 0.3
*/
window.onload = function() {
// Get svg element
s = Snap('#Zodiac');
// Move g elements
let dx = 115, dy = 4;
let g = Snap.select('#Scorpius');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 1940;
offsetY = -yMin + 20;
drawGrids();
// Draw edges in the zodiac
for (i = 0; i < edge.length; i++) {
e = edge[i];
ra = star[e[0]].ra;
dec = star[e[0]].dec;
xy = raDec2xy(ra, dec);
x1 = xy[0];
y1 = xy[1];
ra = star[e[1]].ra;
dec = star[e[1]].dec;
xy = raDec2xy(ra, dec);
x2 = xy[0];
y2 = xy[1];
//Scorpius
s.text(506, 240 + 32, 'Scorpius').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//♏
s.text(520, 270 + 96, '♏').attr({fill: 'white', 'font-family': 'Segoe UI Symbol', 'font-size': 96});
// Get generated SVG code
let svgText = s.toString();
// Show the code with additional new lines
let codeNode = document.getElementById('code');
codeNode.textContent = svgText.replace(/><([^/])/g, '>\n<$1');
setInterval(closeEyes, delay);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
