星座のプログラムを作り変えました。今回は9月の星座ということで、おとめ座です。 今回も Snap.svg を使いました。今回も瞬きするアニメがあります。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script type="text/javascript" src="js/snap.svg-min.js"></script> <script type="text/javascript" src="js/zodiac05.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac05.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="Virgo">
<polygon points="249,17 191,264 308,264" transform="rotate(77 249 140)" style="fill:#bfb9ea;stroke-width:0"/>
<rect x="37" y="151" width="78" height="19" transform="rotate(347 76 160)" style="fill:#e5b3a9;stroke-width:0"/>
<rect x="52" y="195" width="77" height="20" transform="rotate(346 90 205)" style="fill:#e5b3a9;stroke-width:0"/>
<polygon points="193,33 135,280 252,280" transform="rotate(77 193 156)" style="fill:#bfb9ea;stroke-width:0"/>
<ellipse cx="28" cy="169" rx="28" ry="10" transform="rotate(2 28 169)" style="fill:#e5b3a9;stroke-width:0"/>
<ellipse cx="44" cy="220" rx="28" ry="10" transform="rotate(322 44 220)" style="fill:#e5b3a9;stroke-width:0"/>
<ellipse cx="199" cy="209" rx="15" ry="11" transform="rotate(324 199 209)" style="fill:#e5b3a9;stroke-width:0"/>
<rect x="204" y="179" width="83" height="17" transform="rotate(341 245 187)" style="fill:#e5b3a9;stroke-width:0"/>
<rect x="278" y="148" width="85" height="23" transform="rotate(336 320 159)" style="fill:#bfb9ea;stroke-width:0"/>
<rect x="258" y="87" width="83" height="17" transform="rotate(20 299 95)" style="fill:#e5b3a9;stroke-width:0"/>
<rect x="275" y="88" width="76" height="65" transform="rotate(347 313 120)" style="fill:#bfb9ea;stroke-width:0"/>
<line x1="207" y1="173" x2="193" y2="241" style="stroke:#ad8834;stroke-width:2"/>
<polygon points="301,0 243,247 360,247" transform="rotate(77 301 123)" style="fill:#bfb9ea;stroke-width:0"/>
<rect x="373" y="90" width="34" height="24" transform="rotate(345 390 102)" style="fill:#e5b3a9;stroke-width:0"/>
<ellipse cx="202" cy="216" rx="6" ry="3" transform="rotate(53 202 216)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="192" cy="225" rx="7" ry="4" transform="rotate(322 192 225)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="188" cy="238" rx="6" ry="4" transform="rotate(322 188 238)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="193" cy="214" rx="6" ry="4" transform="rotate(322 193 214)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="201" cy="230" rx="6" ry="3" transform="rotate(53 201 230)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="198" cy="241" rx="6" ry="3" transform="rotate(53 198 241)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="255" cy="81" rx="15" ry="11" transform="rotate(355 255 81)" style="fill:#e5b3a9;stroke-width:0"/>
<ellipse cx="437" cy="84" rx="21" ry="29" transform="rotate(342 437 84)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="421" cy="118" rx="11" ry="9" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="402" cy="71" rx="11" ry="9" transform="rotate(338 402 71)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="387" cy="82" rx="12" ry="9" transform="rotate(332 387 82)" style="fill:#ad8834;stroke-width:0"/>
<rect x="348" y="82" width="39" height="54" transform="rotate(348 367 109)" style="fill:#e5b3a9;stroke-width:0"/>
<rect x="323" y="74" width="60" height="21" transform="rotate(340 353 84)" style="fill:#bfb9ea;stroke-width:0"/>
<rect x="336" y="125" width="60" height="21" transform="rotate(353 366 135)" style="fill:#bfb9ea;stroke-width:0"/>
<ellipse cx="399" cy="118" rx="11" ry="9" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="420" cy="92" rx="29" ry="24" transform="rotate(345 420 92)" style="fill:#edcbc4;stroke-width:0"/>
<ellipse cx="427" cy="64" rx="18" ry="10" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="443" cy="105" rx="18" ry="10" transform="rotate(320 443 105)" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="383" cy="117" rx="9" ry="9" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="369" cy="118" rx="9" ry="9" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="353" cy="121" rx="9" ry="7" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="338" cy="120" rx="9" ry="7" style="fill:#ad8834;stroke-width:0"/>
<ellipse cx="326" cy="122" rx="9" ry="7" transform="rotate(343 326 122)" style="fill:#ad8834;stroke-width:0"/>
<ellipse id="eye1" cx="416" cy="81" rx="3" ry="6" transform="rotate(343 416 81)" style="fill:#ffffff;stroke-width:0"/>
<ellipse id="eye2" cx="424" cy="101" rx="3" ry="6" transform="rotate(343 424 101)" style="fill:#ffffff;stroke-width:0"/>
<ellipse id="eye3" cx="416" cy="78" rx="4" ry="4" transform="rotate(343 416 78)" style="fill:#2b4d8d;stroke-width:0"/>
<ellipse id="eye4" cx="424" cy="98" rx="4" ry="4" transform="rotate(343 424 98)" style="fill:#2b4d8d;stroke-width:0"/>
<polygon points="404,95 397,100 411,100" transform="rotate(247 404 97)" style="fill:#820808;stroke-width:0"/>
<ellipse cx="214" cy="129" rx="18" ry="5" transform="rotate(343 214 129)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="235" cy="116" rx="18" ry="5" transform="rotate(336 235 116)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="240" cy="123" rx="18" ry="5" transform="rotate(336 240 123)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="258" cy="117" rx="18" ry="5" transform="rotate(345 258 117)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="253" cy="113" rx="18" ry="5" transform="rotate(342 253 113)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="254" cy="105" rx="18" ry="5" transform="rotate(332 254 105)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="289" cy="111" rx="18" ry="5" transform="rotate(345 289 111)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="286" cy="107" rx="18" ry="5" transform="rotate(345 286 107)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="279" cy="99" rx="18" ry="5" transform="rotate(339 279 99)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="277" cy="90" rx="18" ry="5" transform="rotate(334 277 90)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="317" cy="103" rx="18" ry="5" transform="rotate(345 317 103)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="301" cy="97" rx="18" ry="5" transform="rotate(345 301 97)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="294" cy="89" rx="18" ry="5" transform="rotate(345 294 89)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="340" cy="93" rx="18" ry="5" transform="rotate(345 340 93)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="322" cy="93" rx="18" ry="5" transform="rotate(345 322 93)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="315" cy="88" rx="18" ry="5" transform="rotate(345 315 88)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="309" cy="80" rx="18" ry="5" transform="rotate(338 309 80)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="297" cy="76" rx="18" ry="5" transform="rotate(338 297 76)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="354" cy="85" rx="18" ry="5" transform="rotate(338 354 85)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="347" cy="80" rx="18" ry="5" transform="rotate(338 347 80)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="333" cy="77" rx="18" ry="5" transform="rotate(338 333 77)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="325" cy="72" rx="18" ry="5" transform="rotate(338 325 72)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="322" cy="66" rx="18" ry="5" transform="rotate(338 322 66)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="372" cy="73" rx="18" ry="5" transform="rotate(327 372 73)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="366" cy="70" rx="18" ry="5" transform="rotate(327 366 70)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="354" cy="68" rx="18" ry="5" transform="rotate(334 354 68)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="348" cy="64" rx="18" ry="5" transform="rotate(342 348 64)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="353" cy="56" rx="18" ry="5" transform="rotate(345 353 56)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="374" cy="66" rx="12" ry="6" transform="rotate(345 374 66)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="377" cy="59" rx="12" ry="6" transform="rotate(345 377 59)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="373" cy="54" rx="12" ry="6" transform="rotate(356 373 54)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="235" cy="169" rx="18" ry="5" transform="rotate(351 235 169)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="261" cy="170" rx="18" ry="5" transform="rotate(351 261 170)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="258" cy="161" rx="18" ry="5" transform="rotate(351 258 161)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="292" cy="169" rx="18" ry="5" transform="rotate(351 292 169)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="285" cy="162" rx="18" ry="5" transform="rotate(351 285 162)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="285" cy="153" rx="18" ry="5" transform="rotate(351 285 153)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="323" cy="169" rx="18" ry="5" transform="rotate(351 323 169)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="316" cy="161" rx="18" ry="5" transform="rotate(351 316 161)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="313" cy="155" rx="18" ry="5" transform="rotate(351 313 155)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="309" cy="146" rx="18" ry="5" transform="rotate(351 309 146)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="352" cy="169" rx="18" ry="5" transform="rotate(351 352 169)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="348" cy="162" rx="18" ry="5" transform="rotate(351 348 162)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="343" cy="154" rx="18" ry="5" transform="rotate(351 343 154)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="339" cy="145" rx="18" ry="5" transform="rotate(351 339 145)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="336" cy="138" rx="18" ry="5" transform="rotate(351 336 138)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="382" cy="161" rx="18" ry="5" transform="rotate(343 382 161)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="376" cy="157" rx="18" ry="5" transform="rotate(346 376 157)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="373" cy="150" rx="18" ry="5" transform="rotate(352 373 150)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="368" cy="145" rx="18" ry="5" transform="rotate(352 368 145)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="367" cy="137" rx="18" ry="5" transform="rotate(355 367 137)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="366" cy="133" rx="18" ry="5" transform="rotate(355 366 133)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="401" cy="151" rx="15" ry="5" transform="rotate(328 401 151)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="398" cy="146" rx="15" ry="5" transform="rotate(340 398 146)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="396" cy="139" rx="15" ry="5" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="393" cy="134" rx="15" ry="5" transform="rotate(5 393 134)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="407" cy="144" rx="11" ry="6" transform="rotate(326 407 144)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="406" cy="141" rx="11" ry="6" transform="rotate(343 406 141)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<ellipse cx="405" cy="137" rx="11" ry="6" transform="rotate(3 405 137)" style="fill:#b8b8b8;stroke:#7d7d7d;stroke-width:1"/>
<line x1="217" y1="86" x2="247" y2="80" style="stroke:#17480f;stroke-width:4"/>
<line x1="310" y1="61" x2="268" y2="74" style="stroke:#17480f;stroke-width:4"/>
<line x1="310" y1="61" x2="350" y2="44" style="stroke:#17480f;stroke-width:4"/>
<line x1="350" y1="44" x2="373" y2="33" style="stroke:#17480f;stroke-width:4"/>
<ellipse cx="300" cy="51" rx="32" ry="3" transform="rotate(319 300 51)" style="fill:#17480f;stroke-width:0"/>
<ellipse cx="319" cy="45" rx="32" ry="3" transform="rotate(319 319 45)" style="fill:#17480f;stroke-width:0"/>
<ellipse cx="340" cy="38" rx="32" ry="3" transform="rotate(319 340 38)" style="fill:#17480f;stroke-width:0"/>
<ellipse cx="365" cy="28" rx="32" ry="3" transform="rotate(319 365 28)" style="fill:#17480f;stroke-width:0"/>
<ellipse cx="390" cy="17" rx="32" ry="3" transform="rotate(319 390 17)" style="fill:#17480f;stroke-width:0"/>
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性により下記の zodiac05.html のソース（おとめ）から移動しています。</li>
<li>115行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,115]">
</pre>
おとめ座の星座を表示するプログラムです。 元々 HTML に記載されていたおとめの絵を移動し、座標や星座を重ねています。 今回は ES6 に則って var を let に書き直しました。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
let s; // for Snap
/* Initialize stars in Virgo
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
let star = {};
star['Spica'] = {ra: '13 25 11.60', dec: '-11 09 40.5', mag: 0.98, fd: 67};
star['γ Vir A'] = {ra: '12 41 40.00', dec: '-01 26 58.3', mag: 2.74, fd: 29};
star['ε Vir'] = {ra: '13 02 10.76', dec: '+10 57 32.8', mag: 2.85, fd: 47};
star['ζ Vir'] = {ra: '13 34 41.75', dec: '-00 35 45.4', mag: 3.38, fd: 79};
star['δ Vir'] = {ra: '12 55 36.48', dec: '+03 23 51.4', mag: 3.39, fd: 43};
star['β Vir'] = {ra: '11 50 41.29', dec: '+01 45 55.4', mag: 3.59, fd: 5};
star['γ Vir B'] = {ra: '12 41 39.60', dec: '-01 26 58.0', mag: 3.68, fd: 29};
star['109 Vir'] = {ra: '14 46 14.99', dec: '+01 53 34.6', mag: 3.73, fd: 109};
star['μ Vir'] = {ra: '14 43 03.56', dec: '-05 39 26.7', mag: 3.87, fd: 107};
star['η Vir'] = {ra: '12 19 54.39', dec: '-00 40 00.3', mag: 3.89, fd: 15};
star['ν Vir'] = {ra: '11 45 51.57', dec: '+06 31 47.3', mag: 4.04, fd: 3};
star['ι Vir'] = {ra: '14 16 00.88', dec: '-05 59 58.3', mag: 4.07, fd: 99};
star['ο Vir'] = {ra: '12 05 12.67', dec: '+08 43 58.2', mag: 4.12, fd: 9};
star['κ Vir'] = {ra: '14 12 53.74', dec: '-10 16 26.6', mag: 4.18, fd: 98};
star['τ Vir'] = {ra: '14 01 38.78', dec: '+01 32 40.5', mag: 4.23, fd: 93};
star['θ Vir'] = {ra: '13 09 57.01', dec: '-05 32 20.1', mag: 4.38, fd: 51};
star['110 Vir'] = {ra: '15 02 54.07', dec: '+02 05 28.6', mag: 4.39, fd: 110};
star['λ Vir'] = {ra: '14 19 06.60', dec: '-13 22 16.2', mag: 4.52, fd: 100};
star['π Vir'] = {ra: '12 00 52.39', dec: '+06 36 51.8', mag: 4.65, fd: 8};
star['χ Vir'] = {ra: '12 39 14.81', dec: '-07 59 43.8', mag: 4.66, fd: 26};
star['74 Vir'] = {ra: '13 31 57.95', dec: '-06 15 20.6', mag: 4.68, fd: 74};
star['61 Vir'] = {ra: '13 18 24.97', dec: '-18 18 31.0', mag: 4.74, fd: 61};
star['69 Vir'] = {ra: '13 27 27.24', dec: '-15 58 25.1', mag: 4.76, fd: 69};
star['ψ Vir'] = {ra: '12 54 21.17', dec: '-09 32 20.2', mag: 4.77, fd: 40};
star['σ Vir'] = {ra: '13 17 36.29', dec: '+05 28 11.4', mag: 4.78, fd: 60};
star['φ Vir'] = {ra: '14 28 12.22', dec: '-02 13 40.6', mag: 4.81, fd: 105};
star['ξ Vir'] = {ra: '11 45 17.00', dec: '+08 15 29.4', mag: 4.84, fd: 2};
star['ρ Vir'] = {ra: '12 41 53.01', dec: '+10 14 09.0', mag: 4.88, fd: 30};
star['78 Vir'] = {ra: '13 34 07.91', dec: '+03 39 32.5', mag: 4.92, fd: 78};
star['ET Vir'] = {ra: '14 10 50.48', dec: '-16 18 07.2', mag: 4.93};
star['89 Vir'] = {ra: '13 49 52.34', dec: '-18 08 02.7', mag: 4.96, fd: 89};
star['16 Vir'] = {ra: '12 20 21.15', dec: '+03 18 45.8', mag: 4.97, fd: 16};
star['70 Vir'] = {ra: '13 28 25.95', dec: '+13 46 48.7', mag: 4.97, fd: 70};
star['CU Vir'] = {ra: '14 12 15.83', dec: '+02 24 34.2', mag: 4.99};
star['82 Vir'] = {ra: '13 41 36.83', dec: '-08 42 11.1', mag: 5.03, fd: 82};
star['53 Vir'] = {ra: '13 12 03.48', dec: '-16 11 52.5', mag: 5.04, fd: 53};
star['244 G. Vir'] = {ra: '14 24 11.39', dec: '+05 49 12.4', mag: 5.10};
star['υ Vir'] = {ra: '14 19 32.55', dec: '-02 15 55.2', mag: 5.14, fd: 102};
star['49 Vir'] = {ra: '13 07 53.80', dec: '-10 44 25.4', mag: 5.15, fd: 49};
star['90 Vir'] = {ra: '13 54 42.20', dec: '-01 30 11.1', mag: 5.16, fd: 90};
star['59 Vir'] = {ra: '13 16 46.71', dec: '+09 25 25.3', mag: 5.19, fd: 59};
star['57 Vir'] = {ra: '13 15 58.58', dec: '-19 56 34.2', mag: 5.21, fd: 57};
star['76 Vir'] = {ra: '13 32 58.09', dec: '-10 09 53.7', mag: 5.21, fd: 76};
star['d2 Vir'] = {ra: '12 45 37.12', dec: '+07 40 23.9', mag: 5.22, fd: 32};
star['ω Vir'] = {ra: '11 38 27.61', dec: '+08 08 03.4', mag: 5.24, fd: 1};
star['68 Vir'] = {ra: '13 26 43.24', dec: '-12 42 27.4', mag: 5.27, fd: 68};
star['4 Vir'] = {ra: '11 47 54.93', dec: '+08 14 45.1', mag: 5.31, fd: 4};
star['55 Vir'] = {ra: '13 14 10.97', dec: '-19 55 52.8', mag: 5.31, fd: 55};
star['84 Vir'] = {ra: '13 43 03.88', dec: '+03 32 17.1', mag: 5.35, fd: 84};
star['7 Vir'] = {ra: '11 59 56.92', dec: '+03 39 18.8', mag: 5.36, fd: 7};
star['63 Vir'] = {ra: '13 23 01.15', dec: '-17 44 06.7', mag: 5.36, fd: 63};
star['87 Vir'] = {ra: '13 47 25.35', dec: '-17 51 35.1', mag: 5.41, fd: 87};
star['106 Vir'] = {ra: '14 28 41.73', dec: '-06 54 01.5', mag: 5.42, fd: 106};
star['95 Vir'] = {ra: '14 06 42.91', dec: '-09 18 48.7', mag: 5.46, fd: 95};
star['21 Vir'] = {ra: '12 33 46.80', dec: '-09 27 07.5', mag: 5.48, fd: 21};
star['86 Vir'] = {ra: '13 45 56.33', dec: '-12 25 35.6', mag: 5.50, fd: 86};
star['1 Ser'] = {ra: '14 57 33.22', dec: '-00 10 03.2', mag: 5.51, fd: '(1)'};
star['75 Vir'] = {ra: '13 32 51.69', dec: '-15 21 46.8', mag: 5.52, fd: 75};
star['226 G. Vir'] = {ra: '14 15 24.11', dec: '-18 12 02.4', mag: 5.53};
star['HD 104304'] = {ra: '12 00 44.37', dec: '-10 26 41.4', mag: 5.54};
star['83 Vir'] = {ra: '13 44 29.82', dec: '-16 10 44.6', mag: 5.55, fd: 83};
star['31 Vir'] = {ra: '12 41 57.16', dec: '+06 48 23.9', mag: 5.57, fd: 31};
star['g Vir'] = {ra: '13 08 32.49', dec: '-08 59 03.2', mag: 5.57};
star['6 Vir'] = {ra: '11 55 03.15', dec: '+08 26 38.1', mag: 5.58, fd: 6};
star['106 G. Vir'] = {ra: '13 03 46.03', dec: '-20 35 00.6', mag: 5.58};
star['12 G. Vir'] = {ra: '11 51 02.23', dec: '-05 20 00.0', mag: 5.62};
star['LN Vir'] = {ra: '13 14 31.24', dec: '+11 19 54.4', mag: 5.64};
star['33 Vir'] = {ra: '12 46 22.38', dec: '+09 32 26.8', mag: 5.65, fd: 33};
star['71 Vir'] = {ra: '13 29 13.04', dec: '+10 49 06.2', mag: 5.65, fd: 71};
star['FW Vir'] = {ra: '12 38 22.45', dec: '+01 51 16.9', mag: 5.68};
star['108 Vir'] = {ra: '14 45 30.23', dec: '+00 43 02.2', mag: 5.68, fd: 108};
star['136 G. Vir'] = {ra: '13 21 41.68', dec: '+02 05 14.5', mag: 5.69};
star['80 Vir'] = {ra: '13 35 31.29', dec: '-05 23 47.0', mag: 5.70, fd: 80};
star['2 Ser'] = {ra: '15 01 48.92', dec: '-00 08 24.9', mag: 5.71, fd: '(2)'};
star['11 Vir'] = {ra: '12 10 03.51', dec: '+05 48 25.1', mag: 5.72, fd: 11};
star['66 Vir'] = {ra: '13 24 33.14', dec: '-05 09 50.1', mag: 5.76, fd: 66};
star['44 Vir'] = {ra: '12 59 39.55', dec: '-03 48 43.0', mag: 5.79, fd: 44};
star['12 Vir'] = {ra: '12 13 25.99', dec: '+10 15 44.5', mag: 5.85, fd: 12};
star['CS Vir'] = {ra: '14 18 38.30', dec: '-18 42 57.2', mag: 5.86};
star['25 Vir'] = {ra: '12 36 47.37', dec: '-05 49 54.7', mag: 5.88, fd: 25};
star['65 Vir'] = {ra: '13 23 18.91', dec: '-04 55 27.8', mag: 5.88, fd: 65};
star['64 Vir'] = {ra: '13 22 09.73', dec: '+05 09 17.5', mag: 5.89, fd: 64};
star['224 G. Vir'] = {ra: '14 13 40.67', dec: '-00 50 42.4', mag: 5.89};
star['13 Vir'] = {ra: '12 18 40.30', dec: '-00 47 13.7', mag: 5.90, fd: 13};
star['92 Vir'] = {ra: '13 56 27.89', dec: '+01 03 02.0', mag: 5.90, fd: 92};
star['79 G. Vir'] = {ra: '12 43 38.02', dec: '-01 34 36.5', mag: 5.91};
star['265 G. Vir'] = {ra: '14 59 23.11', dec: '+04 34 04.0', mag: 5.91};
star['y Vir'] = {ra: '13 34 40.48', dec: '-13 12 51.5', mag: 5.92};
star['10 Vir'] = {ra: '12 09 41.29', dec: '+01 53 54.0', mag: 5.95, fd: 10};
star['50 G. Vir'] = {ra: '12 25 11.80', dec: '-11 36 37.8', mag: 5.95};
star['50 Vir'] = {ra: '13 09 45.29', dec: '-10 19 45.5', mag: 5.95, fd: 50};
star['250 G. Vir'] = {ra: '14 29 50.51', dec: '+00 49 44.1', mag: 5.96};
star['146 G. Vir'] = {ra: '13 26 11.48', dec: '-01 11 32.9', mag: 5.97};
star['46 Vir'] = {ra: '13 00 35.96', dec: '-03 22 07.0', mag: 5.99, fd: 46};
star['92 G. Vir'] = {ra: '12 54 18.74', dec: '-11 38 54.9', mag: 6.00};
star['194 G. Vir'] = {ra: '13 50 24.67', dec: '+05 29 50.0', mag: 6.00};
star['73 Vir'] = {ra: '13 32 02.87', dec: '-18 43 43.8', mag: 6.01, fd: 73};
star['252 G. Vir'] = {ra: '14 30 45.39', dec: '+04 46 20.3', mag: 6.01};
star['37 Vir'] = {ra: '12 51 36.91', dec: '+03 03 24.3', mag: 6.02, fd: 37};
star['183 G. Vir'] = {ra: '13 47 13.40', dec: '-09 42 33.7', mag: 6.04};
star['5 G. Vir'] = {ra: '11 43 55.09', dec: '-06 40 37.4', mag: 6.05};
star['56 G. Vir'] = {ra: '12 31 21.43', dec: '+07 36 15.4', mag: 6.05};
star['257 G. Vir'] = {ra: '14 45 11.74', dec: '-01 25 03.1', mag: 6.06};
star['72 Vir'] = {ra: '13 30 25.70', dec: '-06 28 13.1', mag: 6.10, fd: 72};
star['41 G. Vir'] = {ra: '12 15 10.54', dec: '-10 18 35.8', mag: 6.11};
star['34 Vir'] = {ra: '12 47 13.62', dec: '+11 57 29.3', mag: 6.11, fd: 34};
star['38 Vir'] = {ra: '12 53 11.31', dec: '-03 33 11.1', mag: 6.11, fd: 38};
star['9 G. Vir'] = {ra: '11 49 01.40', dec: '-00 19 07.2', mag: 6.15};
star['230 G. Vir'] = {ra: '14 16 30.18', dec: '-03 11 46.4', mag: 6.15};
star['271 G. Vir'] = {ra: '15 07 40.32', dec: '+05 29 53.1', mag: 6.16};
star['1 G. Vir'] = {ra: '11 38 09.87', dec: '+08 53 01.6', mag: 6.18};
star['19 G. Vir'] = {ra: '11 59 03.38', dec: '+00 31 50.2', mag: 6.18};
star['153 G. Vir'] = {ra: '13 30 00.08', dec: '+07 10 43.8', mag: 6.18};
star['85 Vir'] = {ra: '13 45 35.09', dec: '-15 46 02.7', mag: 6.18, fd: 85};
star['239 G. Vir'] = {ra: '14 19 40.97', dec: '+00 23 03.7', mag: 6.18};
star['104 Vir'] = {ra: '14 27 24.42', dec: '-06 07 12.7', mag: 6.18, fd: 104};
star['261 G. Vir'] = {ra: '14 51 00.11', dec: '-00 15 27.0', mag: 6.18};
star['57 G. Vir'] = {ra: '12 31 38.74', dec: '-05 03 09.6', mag: 6.19};
star['199 G. Vir'] = {ra: '13 54 58.30', dec: '-08 03 31.6', mag: 6.19};
star['135 G. Vir'] = {ra: '13 21 29.82', dec: '-19 29 21.4', mag: 6.21};
star['3 G. Vir'] = {ra: '11 38 24.09', dec: '-02 26 09.4', mag: 6.22};
star['27 Vir'] = {ra: '12 41 34.46', dec: '+10 25 34.6', mag: 6.22, fd: 27};
star['231 G. Vir'] = {ra: '14 17 03.79', dec: '-18 35 08.5', mag: 6.22};
star['FT Vir'] = {ra: '12 27 51.60', dec: '-04 36 55.0', mag: 6.23};
star['27 G. Vir'] = {ra: '12 02 51.68', dec: '-07 41 01.2', mag: 6.24};
star['209 G. Vir'] = {ra: '14 03 55.76', dec: '+04 54 03.5', mag: 6.24};
star['41 Vir'] = {ra: '12 53 49.67', dec: '+12 25 06.6', mag: 6.25, fd: 41};
star['243 G. Vir'] = {ra: '14 23 15.15', dec: '+01 14 33.8', mag: 6.25};
star['54 Vir'] = {ra: '13 13 26.85', dec: '-18 49 35.0', mag: 6.26, fd: 54};
star['134 G. Vir'] = {ra: '13 20 41.61', dec: '+02 56 32.3', mag: 6.26};
star['85 G. Vir'] = {ra: '12 47 33.42', dec: '-06 18 05.9', mag: 6.27};
star['213 G. Vir'] = {ra: '14 04 37.45', dec: '+02 17 51.1', mag: 6.28};
star['20 Vir'] = {ra: '12 33 02.91', dec: '+10 17 44.4', mag: 6.29, fd: 20};
star['208 G. Vir'] = {ra: '14 03 53.10', dec: '-22 25 17.8', mag: 6.30};
star['IQ Vir'] = {ra: '11 53 50.30', dec: '+00 33 07.6', mag: 6.31};
star['EP Vir'] = {ra: '12 47 02.29', dec: '+05 57 01.8', mag: 6.31};
star['26 G. Vir'] = {ra: '12 01 01.75', dec: '-01 46 04.8', mag: 6.32};
star['112 G. Vir'] = {ra: '13 09 14.27', dec: '-09 32 17.2', mag: 6.32};
star['207 G. Vir'] = {ra: '14 03 04.18', dec: '-17 22 01.2', mag: 6.32};
star['68 G. Vir'] = {ra: '12 38 04.43', dec: '+03 16 56.9', mag: 6.33};
star['98 G. Vir'] = {ra: '12 57 12.68', dec: '-12 04 00.9', mag: 6.33};
star['185 G. Vir'] = {ra: '13 46 57.42', dec: '+06 21 02.3', mag: 6.33};
star['210 G. Vir'] = {ra: '14 04 27.00', dec: '-14 58 18.0', mag: 6.35};
star['51 G. Vir'] = {ra: '12 27 42.07', dec: '+08 36 37.3', mag: 6.36};
star['129 G. Vir'] = {ra: '13 17 29.89', dec: '-00 40 33.7', mag: 6.36};
star['204 G. Vir'] = {ra: '13 59 49.30', dec: '-03 32 58.7', mag: 6.36};
star['225 G. Vir'] = {ra: '14 14 21.49', dec: '-05 56 52.5', mag: 6.36};
star['33 G. Vir'] = {ra: '12 05 59.83', dec: '-03 07 53.6', mag: 6.37};
star['29 G. Vir'] = {ra: '12 03 44.53', dec: '+05 33 28.6', mag: 6.39};
star['211 G. Vir'] = {ra: '14 04 14.57', dec: '-05 22 53.0', mag: 6.39};
star['FS Vir'] = {ra: '14 14 53.05', dec: '+03 20 09.4', mag: 6.41};
star['35 Vir'] = {ra: '12 47 51.42', dec: '+03 34 21.8', mag: 6.42, fd: 35};
star['150 G. Vir'] = {ra: '13 29 14.94', dec: '-01 21 51.4', mag: 6.42};
star['221 G. Vir'] = {ra: '14 11 31.28', dec: '+01 21 44.4', mag: 6.42};
star['240 G. Vir'] = {ra: '14 19 53.25', dec: '-06 44 46.0', mag: 6.42};
star['141 G. Vir'] = {ra: '13 23 57.11', dec: '-20 55 28.3', mag: 6.44};
star['229 G. Vir'] = {ra: '14 16 21.41', dec: '-06 37 17.5', mag: 6.44};
star['91 G. Vir'] = {ra: '12 53 38.12', dec: '-04 13 28.2', mag: 6.45};
star['96 Vir'] = {ra: '14 09 00.60', dec: '-10 20 04.6', mag: 6.45, fd: 96};
star['254 G. Vir'] = {ra: '14 37 28.49', dec: '+02 16 38.7', mag: 6.45};
star['17 Vir'] = {ra: '12 22 32.14', dec: '+05 18 20.1', mag: 6.46, fd: 17};
star['49 G. Vir'] = {ra: '12 23 15.35', dec: '-04 58 28.0', mag: 6.47};
star['233 G. Vir'] = {ra: '14 16 48.75', dec: '-08 53 04.0', mag: 6.47};
star['235 G. Vir'] = {ra: '14 18 00.57', dec: '-07 32 30.5', mag: 6.47};
star['88 G. Vir'] = {ra: '12 51 22.93', dec: '-10 20 17.6', mag: 6.48};
star['20 G. Vir'] = {ra: '11 59 09.38', dec: '-10 28 33.5', mag: 6.49};
star['94 Vir'] = {ra: '14 06 17.77', dec: '-08 53 30.0', mag: 6.54, fd: 94};
star['48 Vir'] = {ra: '13 03 54.44', dec: '-03 39 47.0', mag: 6.62, fd: 48};
star['S Vir'] = {ra: '13 33 00.70', dec: '-07 11 42.0', mag: 6.68};
star['62 Vir'] = {ra: '13 20 20.05', dec: '-11 18 14.8', mag: 6.73, fd: 62};
star['28 Vir'] = {ra: '12 41 57.68', dec: '-07 30 00.7', mag: 6.81, fd: 28};
star['56 Vir'] = {ra: '13 14 45.13', dec: '-10 22 13.0', mag: 6.95, fd: 56};
star['MARI'] = {ra: '12 44 20.24', dec: '-07 30 07.0', mag: 6.0};
let edge = [['β Vir', 'η Vir'], ['η Vir', 'γ Vir A'], ['γ Vir A', 'δ Vir'], ['δ Vir', 'ε Vir'], ['γ Vir A', 'θ Vir'], ['θ Vir', 'Spica'], ['Spica', 'ζ Vir']];
let offsetX, offsetY;
let wrap = false;
let decMin, decMax;
let raMin = 0;
let raMax;
let xMin, xMax;
let yMin, yMax;
let eye = [];
const nEyes = 4;
/**
* 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.0});
}
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', width: 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', width: 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 = 130, dy = 70;
let g = Snap.select('#Virgo');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 1320;
offsetY = -yMin + 30;
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];
//<line x1="" y1="" x2="" y2="" stroke="darkgray"/>
s.line(x1, y1, x2, y2).attr({stroke: 'darkgray', width: 1});
}
// Draw stars in the zodiac
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
cx = xy[0];
cy = xy[1];
mag = star[key].mag;
r = 6 / mag;
//<ellipse cx="" cy="" rx="" ry="" fill="white"/>
s.ellipse(cx, cy, r, r).attr({fill: 'white'});
});
//<text transform="matrix(1 0 0 1 46 240)" style="font-family: 'Curlz MT'; font-size: 32px;">Virgo</text>
s.text(46, 240 + 32, 'Virgo').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 40 270)" style="font-family: 'Segoe UI Symbol'; font-size: 96px;">♍</text>
s.text(40, 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);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
