星座のプログラムを作り変えました。12月の星座ということで、いて座です。 今回も Snap.svg を使いました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script src="js/snap.svg-min.js"></script> <script src="js/zodiac08.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac08.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="Sagittarius">
<polygon points="118,229 88,292 149,292" transform="rotate(162 118 260)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="147" cy="215" rx="70" ry="40" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="73" cy="253" rx="35" ry="15" transform="rotate(338 73 253)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="72" cy="237" rx="16" ry="16" style="fill:#3b2612;stroke-width:0"/>
<rect x="47" y="261" width="19" height="40" transform="rotate(340 56 281)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="61" cy="286" rx="0" ry="0" style="fill:#3b2612;stroke-width:0"/>
<rect x="115" y="259" width="19" height="40" transform="rotate(340 124 279)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="67" cy="307" rx="13" ry="13" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="132" cy="302" rx="13" ry="13" style="fill:#1f140a;stroke-width:0"/>
<polygon points="244,175 222,244 266,244" transform="rotate(90 244 209)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="203" cy="200" rx="32" ry="47" transform="rotate(36 203 200)" style="fill:#3b2612;stroke-width:0"/>
<rect x="191" y="226" width="67" height="21" transform="rotate(46 224 236)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="251" cy="264" rx="13" ry="13" style="fill:#3b2612;stroke-width:0"/>
<rect x="240" y="195" width="46" height="20" transform="rotate(347 263 205)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="281" cy="201" rx="13" ry="13" style="fill:#1f140a;stroke-width:0"/>
<rect x="270" y="209" width="47" height="17" transform="rotate(53 293 217)" style="fill:#1f140a;stroke-width:0"/>
<rect x="243" y="278" width="47" height="17" transform="rotate(46 266 286)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="287" cy="308" rx="11" ry="11" style="fill:#3b2612;stroke-width:0"/>
<polygon points="305,300 292,336 318,336" transform="rotate(94 305 318)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="293,236 280,272 306,272" transform="rotate(200 293 254)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="305" cy="238" rx="11" ry="11" style="fill:#1f140a;stroke-width:0"/>
<rect x="96" y="311" width="47" height="17" transform="rotate(128 119 319)" style="fill:#1f140a;stroke-width:0"/>
<rect x="24" y="312" width="47" height="17" transform="rotate(152 47 320)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="25" cy="330" rx="11" ry="11" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="42" cy="178" rx="17" ry="32" transform="rotate(35 42 178)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="37" cy="211" rx="11" ry="19" transform="rotate(20 37 211)" style="fill:#1f140a;stroke-width:0"/>
<polygon points="26,214 18,254 35,254" transform="rotate(204 26 234)" style="fill:#1f140a;stroke-width:0"/>
<polygon points="18,181 10,221 27,221" transform="rotate(216 18 201)" style="fill:#1f140a;stroke-width:0"/>
<ellipse cx="91" cy="195" rx="47" ry="44" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="241" cy="160" rx="16" ry="29" transform="rotate(16 241 160)" style="fill:#755733;stroke-width:0"/>
<ellipse cx="245" cy="118" rx="31" ry="26" transform="rotate(355 245 118)" style="fill:#755733;stroke-width:0"/>
<rect x="212" y="122" width="25" height="38" style="fill:#755733;stroke-width:0"/>
<rect x="246" y="122" width="53" height="22" transform="rotate(44 272 133)" style="fill:#755733;stroke-width:0"/>
<ellipse cx="294" cy="153" rx="13" ry="13" style="fill:#755733;stroke-width:0"/>
<rect x="287" y="137" width="51" height="20" transform="rotate(335 312 147)" style="fill:#755733;stroke-width:0"/>
<polygon points="241,170 234,206 248,206" transform="rotate(41 241 188)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="208,147 200,175 217,175" transform="rotate(24 208 161)" style="fill:#3b2612;stroke-width:0"/>
<rect x="330" y="89" width="16" height="87" transform="rotate(5 338 132)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="337" cy="138" rx="14" ry="14" style="fill:#755733;stroke-width:0"/>
<rect x="329" y="44" width="14" height="53" transform="rotate(344 336 70)" style="fill:#3b2612;stroke-width:0"/>
<rect x="312" y="168" width="14" height="53" transform="rotate(38 319 194)" style="fill:#3b2612;stroke-width:0"/>
<rect x="324" y="0" width="11" height="53" style="fill:#3b2612;stroke-width:0"/>
<rect x="295" y="207" width="11" height="53" transform="rotate(11 300 233)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="215" cy="117" rx="30" ry="14" transform="rotate(340 215 117)" style="fill:#755733;stroke-width:0"/>
<ellipse cx="211" cy="125" rx="28" ry="11" transform="rotate(351 211 125)" style="fill:#a07746;stroke-width:0"/>
<rect x="212" y="111" width="45" height="19" transform="rotate(353 234 120)" style="fill:#a07746;stroke-width:0"/>
<ellipse cx="259" cy="120" rx="14" ry="14" style="fill:#a07746;stroke-width:0"/>
<rect x="234" y="79" width="22" height="24" style="fill:#755733;stroke-width:0"/>
<ellipse cx="247" cy="67" rx="24" ry="29" transform="rotate(354 247 67)" style="fill:#a07746;stroke-width:0"/>
<line x1="260" y1="108" x2="391" y2="139" style="stroke:#707070;stroke-width:2"/>
<polygon points="402,123 397,160 408,160" transform="rotate(105 402 141)" style="fill:#707070;stroke-width:0"/>
<line x1="261" y1="136" x2="293" y2="248" style="stroke:#292929;stroke-width:2"/>
<ellipse cx="239" cy="45" rx="19" ry="16" transform="rotate(344 239 45)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="230" cy="61" rx="19" ry="15" transform="rotate(280 230 61)" style="fill:#3b2612;stroke-width:0"/>
<ellipse cx="263" cy="40" rx="17" ry="11" transform="rotate(29 263 40)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="235,70 228,94 243,94" transform="rotate(180 235 82)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="228,72 221,96 236,96" transform="rotate(180 228 84)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="248,47 241,71 256,71" transform="rotate(180 248 59)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="220,67 213,91 228,91" transform="rotate(192 220 79)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="272,65 267,80 278,80" style="fill:#a07746;stroke-width:0"/>
<line x1="258" y1="107" x2="325" y2="5" style="stroke:#292929;stroke-width:2"/>
<line x1="269" y1="63" x2="248" y2="53" style="stroke:#3b2612;stroke-width:4"/>
<ellipse id="eye1" cx="262" cy="66" rx="4" ry="4" style="fill:#000000;stroke-width:0"/>
<ellipse cx="102" cy="339" rx="11" ry="11" style="fill:#1f140a;stroke-width:0"/>
<polygon points="13,325 0,361 26,361" transform="rotate(202 13 343)" style="fill:#3b2612;stroke-width:0"/>
<polygon points="91,333 78,369 104,369" transform="rotate(200 91 351)" style="fill:#1f140a;stroke-width:0"/>
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性を使い、下記の zodiac08.html のソース（いて）より位置を移動しています。</li>
<li>71行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,71]">
</pre>
いて座の星座を表示するプログラムです。 元々 HTML に記載されていたいての絵を移動し、座標や星座を重ねています。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
let s; // for Snap
/* Initialize stars in Sagittarus
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
let star = {};
star['ε Sgr'] = {ra: '18 24 10.35', dec: '-34 23 03.5', mag: 1.79, fd: 20};
star['σ Sgr'] = {ra: '18 55 15.92', dec: '-26 17 47.7', mag: 2.05, fd: 34};
star['ζ Sgr'] = {ra: '19 02 36.72', dec: '-29 52 48.4', mag: 2.60, fd: 38};
star['δ Sgr'] = {ra: '18 20 59.62', dec: '-29 49 40.9', mag: 2.72, fd: 19};
star['λ Sgr'] = {ra: '18 27 58.27', dec: '-25 25 16.5', mag: 2.82, fd: 22};
star['π Sgr'] = {ra: '19 09 45.83', dec: '-21 01 24.7', mag: 2.88, fd: 41};
star['γ2 Sgr'] = {ra: '18 05 48.52', dec: '-30 25 25.1', mag: 2.98, fd: 10};
star['η Sgr'] = {ra: '18 17 37.73', dec: '-36 45 40.6', mag: 3.10};
star['φ Sgr'] = {ra: '18 45 39.35', dec: '-26 59 26.8', mag: 3.17, fd: 27};
star['τ Sgr'] = {ra: '19 06 56.44', dec: '-27 40 11.3', mag: 3.32, fd: 40};
star['ξ2 Sgr'] = {ra: '18 57 43.78', dec: '-21 06 23.8', mag: 3.52, fd: 37};
star['ο Sgr'] = {ra: '19 04 40.93', dec: '-21 44 28.9', mag: 3.76, fd: 39};
star['μ Sgr'] = {ra: '18 13 45.81', dec: '-21 03 31.8', mag: 3.84, fd: 13};
star['ρ1 Sgr'] = {ra: '19 21 40.38', dec: '-17 50 50.1', mag: 3.92, fd: 44};
star['β1 Sgr'] = {ra: '19 22 38.29', dec: '-44 27 32.1', mag: 3.96};
star['α Sgr'] = {ra: '19 23 53.15', dec: '-40 36 56.3', mag: 3.96};
star['ι Sgr'] = {ra: '19 55 15.68', dec: '-41 52 06.3', mag: 4.12};
star['β2 Sgr'] = {ra: '19 23 13.06', dec: '-44 47 58.7', mag: 4.27};
star['θ1 Sgr'] = {ra: '19 59 44.17', dec: '-35 16 34.5', mag: 4.37};
star['62 Sgr'] = {ra: '20 02 39.46', dec: '-27 42 35.6', mag: 4.43, fd: 62};
star['υ Sgr'] = {ra: '19 21 43.62', dec: '-15 57 18.0', mag: 4.52, fd: 46};
star['X Sgr'] = {ra: '17 47 33.63', dec: '-27 49 50.7', mag: 4.53, fd: 3};
star['59 Sgr'] = {ra: '19 56 56.82', dec: '-27 10 11.5', mag: 4.54, fd: 59};
star['HD 165634'] = {ra: '18 08 04.96', dec: '-28 27 25.3', mag: 4.55};
star['52 Sgr'] = {ra: '19 36 42.39', dec: '-24 53 00.8', mag: 4.59, fd: 52};
star['γ1 Sgr'] = {ra: '18 05 01.22', dec: '-29 34 48.3', mag: 4.66};
star['HD 167818'] = {ra: '18 18 03.19', dec: '-27 02 33.5', mag: 4.66};
star['ω Sgr'] = {ra: '19 55 50.23', dec: '-26 17 58.9', mag: 4.70, fd: 58};
star['4 Sgr'] = {ra: '17 59 47.56', dec: '-23 48 57.6', mag: 4.74, fd: 4};
star['HD 189831'] = {ra: '20 03 33.41', dec: '-37 56 25.8', mag: 4.77};
star['21 Sgr'] = {ra: '18 25 21.04', dec: '-20 32 29.8', mag: 4.81, fd: 21};
star['60 Sgr'] = {ra: '19 58 57.18', dec: '-26 11 45.0', mag: 4.84, fd: 60};
star['HD 172910'] = {ra: '18 44 19.36', dec: '-35 38 30.9', mag: 4.86};
star['ν1 Sgr'] = {ra: '18 54 10.18', dec: '-22 44 41.4', mag: 4.86, fd: 32};
star['ψ Sgr'] = {ra: '19 15 32.40', dec: '-25 15 23.8', mag: 4.86, fd: 42};
star['56 Sgr'] = {ra: '19 46 21.82', dec: '-19 45 39.2', mag: 4.87, fd: 56};
star['43 Sgr'] = {ra: '19 17 38.09', dec: '-18 57 10.4', mag: 4.88, fd: 43};
star['11 Sgr'] = {ra: '18 11 43.33', dec: '-23 42 04.2', mag: 4.96, fd: 11};
star['HD 190056'] = {ra: '20 04 19.56', dec: '-32 03 22.6', mag: 4.99};
star['14 G. Sgr'] = {ra: '17 59 05.28', dec: '-30 15 10.8', mag: 5.00};
star['ν2 Sgr'] = {ra: '18 55 07.07', dec: '-22 40 16.5', mag: 5.00, fd: 35};
star['61 Sgr'] = {ra: '19 57 57.02', dec: '-15 29 28.5', mag: 5.01, fd: 61};
star['ξ1 Sgr'] = {ra: '18 57 20.48', dec: '-20 39 22.8', mag: 5.02, fd: 36};
star['χ1 Sgr'] = {ra: '19 25 16.45', dec: '-24 30 30.4', mag: 5.02, fd: 47};
star['55 Sgr'] = {ra: '19 42 31.09', dec: '-16 07 26.3', mag: 5.06, fd: 55};
star['76 G. Sgr'] = {ra: '18 31 26.30', dec: '-18 24 09.5', mag: 5.12};
star['29 Sgr'] = {ra: '18 49 40.11', dec: '-20 19 29.1', mag: 5.22, fd: 29};
star['77 G. Sgr'] = {ra: '18 33 57.76', dec: '-33 00 59.5', mag: 5.28};
star['15 Sgr'] = {ra: '18 15 12.91', dec: '-20 43 41.8', mag: 5.29, fd: 15};
star['54 Sgr'] = {ra: '19 40 43.34', dec: '-16 17 35.3', mag: 5.30, fd: 54};
star['θ2 Sgr'] = {ra: '19 59 51.28', dec: '-34 41 51.5', mag: 5.30};
star['V3961 Sgr'] = {ra: '19 51 50.59', dec: '-39 52 27.6', mag: 5.32};
star['HR 7703'] = {ra: '20 11 11.61', dec: '-36 05 50.6', mag: 5.32};
star['V4050 Sgr'] = {ra: '18 22 53.08', dec: '-36 40 10.2', mag: 5.33};
star['7 Sgr'] = {ra: '18 02 51.10', dec: '-24 16 56.7', mag: 5.37, fd: 7};
star['75 G. Sgr'] = {ra: '18 31 04.85', dec: '-32 59 20.4', mag: 5.37};
star['28 Sgr'] = {ra: '18 46 20.59', dec: '-22 23 31.9', mag: 5.37, fd: 28};
star['χ3 Sgr'] = {ra: '19 25 29.67', dec: '-23 57 44.7', mag: 5.45, fd: 49};
star['193 G. Sgr'] = {ra: '19 29 52.17', dec: '-26 59 07.8', mag: 5.46};
star['212 G. Sgr'] = {ra: '19 37 34.48', dec: '-14 18 05.2', mag: 5.46};
star['14 Sgr'] = {ra: '18 14 15.91', dec: '-21 42 47.2', mag: 5.49, fd: 14};
star['24 Sgr'] = {ra: '18 33 53.49', dec: '-24 01 56.2', mag: 5.49, fd: 24};
star['134 G. Sgr'] = {ra: '19 04 25.06', dec: '-31 02 49.3', mag: 5.49};
star['226 G. Sgr'] = {ra: '19 43 33.45', dec: '-15 28 10.8', mag: 5.49};
star['126 G. Sgr'] = {ra: '18 59 23.80', dec: '-12 50 25.7', mag: 5.51};
star['153 G. Sgr'] = {ra: '19 13 15.52', dec: '-12 16 57.0', mag: 5.51};
star['228 G. Sgr'] = {ra: '19 46 01.22', dec: '-31 54 30.7', mag: 5.51};
star['32 G. Sgr'] = {ra: '18 07 48.40', dec: '-17 09 15.5', mag: 5.52};
star['60 G. Sgr'] = {ra: '18 23 28.82', dec: '-36 14 16.8', mag: 5.52};
star['37 G. Sgr'] = {ra: '18 10 05.81', dec: '-30 43 43.0', mag: 5.53};
star['114 G. Sgr'] = {ra: '18 55 31.02', dec: '-16 22 34.3', mag: 5.56};
star['V4024 Sgr'] = {ra: '19 08 16.70', dec: '-19 17 25.0', mag: 5.56};
star['50 Sgr'] = {ra: '19 26 19.13', dec: '-21 46 36.1', mag: 5.57, fd: 50};
star['18 Sgr'] = {ra: '18 25 01.51', dec: '-30 45 23.0', mag: 5.58, fd: 18};
star['162 G. Sgr'] = {ra: '19 19 39.99', dec: '-35 25 17.1', mag: 5.59};
star['165 G. Sgr'] = {ra: '19 20 38.16', dec: '-22 24 09.4', mag: 5.59};
star['κ1 Sgr'] = {ra: '20 22 27.48', dec: '-42 02 57.7', mag: 5.60};
star['74 G. Sgr'] = {ra: '18 30 11.84', dec: '-18 43 42.9', mag: 5.63};
star['131 G. Sgr'] = {ra: '19 02 27.69', dec: '-24 50 47.0', mag: 5.63};
star['51 Sgr'] = {ra: '19 36 01.65', dec: '-24 43 08.5', mag: 5.64, fd: 51};
star['κ2 Sgr'] = {ra: '20 23 53.19', dec: '-42 25 22.5', mag: 5.64};
star['262 G. Sgr'] = {ra: '20 00 20.16', dec: '-33 42 09.9', mag: 5.65};
star['186 G. Sgr'] = {ra: '19 26 56.47', dec: '-29 44 35.2', mag: 5.66};
star['209 G. Sgr'] = {ra: '19 37 03.33', dec: '-18 13 51.7', mag: 5.66};
star['33 Sgr'] = {ra: '18 54 00.09', dec: '-21 21 35.3', mag: 5.68, fd: 33};
star['63 Sgr'] = {ra: '20 01 58.58', dec: '-13 38 14.1', mag: 5.69, fd: 63};
star['189 G. Sgr'] = {ra: '19 29 23.77', dec: '-43 26 41.7', mag: 5.70};
star['187 G. Sgr'] = {ra: '19 26 11.03', dec: '-15 03 11.7', mag: 5.71};
star['21 G. Sgr'] = {ra: '18 01 54.38', dec: '-22 46 49.0', mag: 5.72};
star['184 G. Sgr'] = {ra: '19 25 21.56', dec: '-13 53 50.2', mag: 5.72};
star['12 G. Sgr'] = {ra: '17 58 55.68', dec: '-36 51 30.3', mag: 5.74};
star['10 G. Sgr'] = {ra: '17 56 41.82', dec: '-28 03 55.3', mag: 5.76};
star['Y Sgr'] = {ra: '18 21 22.99', dec: '-18 51 35.9', mag: 5.76};
star['84 G. Sgr'] = {ra: '18 38 30.72', dec: '-23 30 17.4', mag: 5.78};
star['152 G. Sgr'] = {ra: '19 13 13.67', dec: '-25 54 24.3', mag: 5.79};
star['259 G. Sgr'] = {ra: '20 00 48.32', dec: '-45 06 46.6', mag: 5.80};
star['50 G. Sgr'] = {ra: '18 17 11.63', dec: '-17 22 25.9', mag: 5.81};
star['94 G. Sgr'] = {ra: '18 44 49.60', dec: '-25 00 39.1', mag: 5.82};
star['ρ2 Sgr'] = {ra: '19 21 50.83', dec: '-18 18 29.4', mag: 5.84, fd: 45};
star['HD 172051'] = {ra: '18 38 53.45', dec: '-21 03 05.4', mag: 5.85};
star['296 G. Sgr'] = {ra: '20 25 26.82', dec: '-28 39 47.8', mag: 5.86};
star['57 Sgr'] = {ra: '19 52 12.01', dec: '-19 02 41.5', mag: 5.88, fd: 57};
star['9 Sgr'] = {ra: '18 03 52.44', dec: '-24 21 38.6', mag: 5.89, fd: 9};
star['V4089 Sgr'] = {ra: '19 34 08.48', dec: '-40 02 04.7', mag: 5.89};
star['HD 169830'] = {ra: '18 27 49.48', dec: '-29 49 00.8', mag: 5.90};
star['116 G. Sgr'] = {ra: '18 56 00.67', dec: '-23 10 25.4', mag: 5.91};
star['180 G. Sgr'] = {ra: '19 25 04.05', dec: '-29 18 33.2', mag: 5.91};
star['83 G. Sgr'] = {ra: '18 37 54.43', dec: '-21 23 51.2', mag: 5.93};
star['138 G. Sgr'] = {ra: '19 05 41.18', dec: '-15 39 37.4', mag: 5.93};
star['29 G. Sgr'] = {ra: '18 06 23.64', dec: '-36 01 11.3', mag: 5.94};
star['260 G. Sgr'] = {ra: '20 00 15.92', dec: '-37 42 06.2', mag: 5.95};
star['16 Sgr'] = {ra: '18 15 12.97', dec: '-20 23 16.7', mag: 5.96, fd: 16};
star['132 G. Sgr'] = {ra: '19 03 03.80', dec: '-19 14 44.4', mag: 5.96};
star['218 G. Sgr'] = {ra: '19 40 07.15', dec: '-23 25 44.6', mag: 5.97};
star['25 G. Sgr'] = {ra: '18 04 50.39', dec: '-35 54 04.9', mag: 5.98};
star['13 G. Sgr'] = {ra: '17 58 39.05', dec: '-28 45 32.7', mag: 5.99};
star['141 G. Sgr'] = {ra: '19 06 52.12', dec: '-16 13 45.2', mag: 6.00};
star['264 G. Sgr'] = {ra: '20 01 23.84', dec: '-22 44 14.2', mag: 6.01};
star['RS Sgr'] = {ra: '18 17 36.25', dec: '-34 06 26.0', mag: 6.03};
star['179 G. Sgr'] = {ra: '19 24 30.17', dec: '-27 51 57.3', mag: 6.03};
star['233 G. Sgr'] = {ra: '19 49 11.53', dec: '-28 47 19.4', mag: 6.04};
star['V4387 Sgr'] = {ra: '18 15 30.76', dec: '-18 39 41.7', mag: 6.05};
star['140 G. Sgr'] = {ra: '19 07 30.84', dec: '-28 38 12.4', mag: 6.05};
star['295 G. Sgr'] = {ra: '20 25 48.01', dec: '-40 47 45.5', mag: 6.08};
star['121 G. Sgr'] = {ra: '18 58 21.31', dec: '-31 02 09.1', mag: 6.09};
star['163 G. Sgr'] = {ra: '19 19 00.15', dec: '-15 32 09.2', mag: 6.09};
star['148 G. Sgr'] = {ra: '19 09 48.13', dec: '-19 48 12.4', mag: 6.11};
star['197 G. Sgr'] = {ra: '19 30 54.04', dec: '-21 18 43.9', mag: 6.11};
star['232 G. Sgr'] = {ra: '19 48 03.01', dec: '-13 42 12.8', mag: 6.11};
star['258 G. Sgr'] = {ra: '20 00 26.47', dec: '-43 02 36.0', mag: 6.11};
star['108 G. Sgr'] = {ra: '18 52 37.05', dec: '-29 22 46.4', mag: 6.12};
star['38 G. Sgr'] = {ra: '18 10 55.35', dec: '-33 48 00.2', mag: 6.13};
star['178 G. Sgr'] = {ra: '19 24 21.45', dec: '-43 43 19.4', mag: 6.13};
star['V4333 Sgr'] = {ra: '19 36 26.06', dec: '-18 51 10.4', mag: 6.13};
star['62 G. Sgr'] = {ra: '18 25 21.70', dec: '-35 59 31.3', mag: 6.14};
star['123 G. Sgr'] = {ra: '18 58 24.83', dec: '-22 31 46.3', mag: 6.14};
star['224 G. Sgr'] = {ra: '19 43 37.62', dec: '-37 32 19.4', mag: 6.14};
star['58 G. Sgr'] = {ra: '18 22 00.13', dec: '-28 25 47.8', mag: 6.15};
star['3 G. Sgr'] = {ra: '17 47 45.60', dec: '-22 28 40.0', mag: 6.18};
star['63 Oph'] = {ra: '17 54 54.04', dec: '-24 53 13.5', mag: 6.18, fd: '(63)'};
star['49 G. Sgr'] = {ra: '18 17 24.08', dec: '-28 39 07.3', mag: 6.18};
star['70 Sgr'] = {ra: '18 21 31.36', dec: '-24 54 55.0', mag: 6.19};
star['71 G. Sgr'] = {ra: '18 27 56.48', dec: '-17 48 01.3', mag: 6.19};
star['280 G. Sgr'] = {ra: '20 12 23.86', dec: '-42 46 47.3', mag: 6.20};
star['16 G. Sgr'] = {ra: '18 00 00.08', dec: '-20 20 22.2', mag: 6.22};
star['HD 165516'] = {ra: '18 07 11.35', dec: '-21 26 38.2', mag: 6.22};
star['26 Sgr'] = {ra: '18 41 51.61', dec: '-23 50 00.1', mag: 6.22, fd: 26};
star['V4200 Sgr'] = {ra: '19 54 17.82', dec: '-23 56 24.3', mag: 6.22};
star['297 G. Sgr'] = {ra: '20 26 53.14', dec: '-37 24 09.5', mag: 6.24};
star['128 G. Sgr'] = {ra: '19 01 37.74', dec: '-22 41 43.3', mag: 6.25};
star['V5652 Sgr'] = {ra: '19 15 33.15', dec: '-24 10 44.8', mag: 6.25};
star['V4199 Sgr'] = {ra: '19 21 37.11', dec: '-19 14 03.9', mag: 6.25};
star['6 Sgr'] = {ra: '18 01 23.12', dec: '-17 09 24.7', mag: 6.27, fd: 6};
star['206 G. Sgr'] = {ra: '19 35 33.46', dec: '-12 15 11.0', mag: 6.27};
star['254 G. Sgr'] = {ra: '19 58 56.37', dec: '-30 32 17.7', mag: 6.27};
star['69 G. Sgr'] = {ra: '18 28 06.17', dec: '-26 45 25.8', mag: 6.28};
star['109 G. Sgr'] = {ra: '18 52 28.32', dec: '-26 39 02.2', mag: 6.28};
star['V4198 Sgr'] = {ra: '19 07 08.33', dec: '-18 44 17.3', mag: 6.28};
star['150 G. Sgr'] = {ra: '19 11 18.80', dec: '-29 30 08.1', mag: 6.28};
star['30 Sgr'] = {ra: '18 50 50.50', dec: '-22 09 43.6', mag: 6.29, fd: 30};
star['17 G. Sgr'] = {ra: '18 01 48.30', dec: '-36 22 40.1', mag: 6.30};
star['64 G. Sgr'] = {ra: '18 25 54.61', dec: '-33 56 44.5', mag: 6.30};
star['143 G. Sgr'] = {ra: '19 08 14.56', dec: '-24 39 26.5', mag: 6.30};
star['282 G. Sgr'] = {ra: '20 15 50.59', dec: '-30 00 19.1', mag: 6.30};
star['V4434 Sgr'] = {ra: '20 16 23.61', dec: '-36 27 12.7', mag: 6.30};
star['V3894 Sgr'] = {ra: '17 48 27.84', dec: '-26 58 29.8', mag: 6.31};
star['68 G. Sgr'] = {ra: '18 27 43.76', dec: '-26 38 05.1', mag: 6.31};
star['90 G. Sgr'] = {ra: '18 44 07.93', dec: '-36 43 05.6', mag: 6.31};
star['129 G. Sgr'] = {ra: '19 01 33.52', dec: '-15 16 57.4', mag: 6.31};
star['263 G. Sgr'] = {ra: '20 01 26.76', dec: '-40 48 51.3', mag: 6.31};
star['V3879 Sgr'] = {ra: '18 42 55.11', dec: '-19 17 02.9', mag: 6.32};
star['39 G. Sgr'] = {ra: '18 11 14.79', dec: '-19 50 30.8', mag: 6.33};
star['167 G. Sgr'] = {ra: '19 22 09.57', dec: '-42 00 57.4', mag: 6.33};
star['53 Sgr'] = {ra: '19 39 49.46', dec: '-23 25 39.4', mag: 6.33, fd: 53};
star['V4405 Sgr'] = {ra: '18 46 01.15', dec: '-19 36 22.9', mag: 6.34};
star['96 G. Sgr'] = {ra: '18 45 18.64', dec: '-21 00 05.6', mag: 6.35};
star['127 G. Sgr'] = {ra: '19 00 24.78', dec: '-24 56 32.2', mag: 6.35};
star['48 G. Sgr'] = {ra: '18 17 23.66', dec: '-28 17 19.0', mag: 6.36};
star['80 G. Sgr'] = {ra: '18 35 59.64', dec: '-29 41 56.7', mag: 6.36};
star['125 G. Sgr'] = {ra: '18 59 26.78', dec: '-18 33 59.0', mag: 6.37};
star['133 G. Sgr'] = {ra: '19 03 06.99', dec: '-19 06 10.9', mag: 6.37};
star['36 G. Sgr'] = {ra: '18 09 59.96', dec: '-32 43 09.4', mag: 6.39};
star['151 G. Sgr'] = {ra: '19 12 28.02', dec: '-21 39 30.0', mag: 6.39};
star['34 G. Sgr'] = {ra: '18 08 38.59', dec: '-21 26 58.4', mag: 6.42};
star['269 G. Sgr'] = {ra: '20 03 44.33', dec: '-22 35 44.3', mag: 6.44};
star['115 G. Sgr'] = {ra: '18 56 27.23', dec: '-31 41 20.4', mag: 6.45};
star['103 G. Sgr'] = {ra: '18 48 45.41', dec: '-18 36 04.2', mag: 6.46};
star['290 G. Sgr'] = {ra: '20 20 51.87', dec: '-35 40 25.4', mag: 6.46};
star['234 G. Sgr'] = {ra: '19 48 50.17', dec: '-12 19 09.7', mag: 6.47};
star['V505 Sgr'] = {ra: '19 53 06.39', dec: '-14 36 11.1', mag: 6.47};
star['244 G. Sgr'] = {ra: '19 55 05.11', dec: '-33 02 46.5', mag: 6.47};
star['9 G. Sgr'] = {ra: '17 55 54.96', dec: '-18 48 07.6', mag: 6.48};
star['166 G. Sgr'] = {ra: '19 21 29.70', dec: '-34 58 59.6', mag: 6.48};
star['196 G. Sgr'] = {ra: '19 32 14.11', dec: '-44 32 47.3', mag: 6.48};
star['V4190 Sgr'] = {ra: '18 35 21.31', dec: '-20 50 25.6', mag: 6.49};
star['25 Sgr'] = {ra: '18 34 32.76', dec: '-24 13 20.6', mag: 6.53, fd: 25};
star['65 Sgr'] = {ra: '20 05 26.33', dec: '-12 39 54.2', mag: 6.53, fd: 65};
star['RY Sgr'] = {ra: '19 16 32.76', dec: '-33 31 20.3', mag: 6.58};
star['17 Sgr'] = {ra: '18 16 35.37', dec: '-20 32 40.1', mag: 6.89, fd: 17};
let edge = [['μ Sgr', 'λ Sgr'], ['λ Sgr', 'δ Sgr'], ['δ Sgr', 'ε Sgr'], ['ε Sgr', 'η Sgr'], ['λ Sgr', 'φ Sgr'], ['φ Sgr', 'σ Sgr'], ['σ Sgr', 'τ Sgr'], ['τ Sgr', 'ζ Sgr'], ['ζ Sgr', 'φ Sgr'], ['ζ Sgr', 'α Sgr'], ['α Sgr', 'β1 Sgr'], ['δ Sgr', 'γ2 Sgr']];
let offsetX, offsetY;
let wrap = false;
let decMin, decMax;
let raMin = 0;
let raMax;
let xMin, xMax;
let yMin, yMax;
let eye = [];
const nEyes = 1;
/**
* 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 = 109, dy = 56;
let g = Snap.select('#Sagittarius');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 2120;
offsetY = -yMin + 10;
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', strokeWidth: 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 506 240)" style="font-family: 'Curlz MT'; font-size: 32px;">Scorpius</text>
s.text(506, 240 + 32, 'Sagittarius').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 520 270)" style="font-family: 'Segoe UI Symbol'; font-size: 96px;">♐</text>
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);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
