星座のプログラムを作り変えました。今回は8月の星座ということで、しし座です。 今回も Snap.svg を使いました。今回も瞬きするアニメがあります。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script type="text/javascript" src="js/snap.svg-min.js"></script> <script type="text/javascript" src="js/zodiac04.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac04.js の中で更新、追加しています。
今回の svg 要素でも Adobe Illustrator で作成したししの絵をそのまま貼り付けています。 Illustrator のレイヤーが g 要素として出力され、元の絵は左上に位置していて、まだ、 transform 属性が指定されていません。
<h2>実行結果</h2>
<svg id="Zodiac" xmlns="http://www.w3.org/2000/svg" width="640" height="400"> <!-- viewBox="0 0 287.664 288.817" -->
<rect x="0" y="0" width="640" height="400" style="fill:#111"/>
<g id="Leo">
<ellipse cx="387.972" cy="122.023" rx="30.001" ry="14" transform="translate(135.011 440.493) rotate(-68.999)" style="fill: #6e4021;"/>
<polygon points="365.3 164.9 385.4 144.3 367.1 136.2 365.3 164.9" style="fill: #6e4021;"/>
<ellipse cx="152" cy="142" rx="67" ry="58" style="fill: #b48637;"/>
<polygon points="453.5 101 457.5 84 448.5 84 453.5 101" style="fill: #dddead;"/>
<polygon points="446.5 94 442.5 111 451.5 111 446.5 94" style="fill: #dddead;"/>
<polygon points="437.5 101 441.5 84 432.5 84 437.5 101" style="fill: #dddead;"/>
<polygon points="430.5 92 425.5 111 435.5 111 430.5 92" style="fill: #dddead;"/>
<rect x="423.404" y="50.599" width="30.999" height="45.998" transform="translate(312.35 500.256) rotate(-82.998)" style="fill: #b48637;"/>
<path d="m453.9,108.8l-5.5,19.2-45.2-13,5.5-19.2,10.4,3c1.5,2.1,4.4,4,8.2,5.3,2.6.9,5.7,1.6,9,1.9,2.7.2,5.3.2,7.7-.1,0,0,9.9,2.9,9.9,2.9Z" style="fill: #b48637;"/>
<rect x="293.212" y="160.209" width="75.002" height="53.001" transform="translate(-38.648 98.37) rotate(-15.997)" style="fill: #916c2c;"/>
<ellipse cx="280" cy="144" rx="84" ry="50" style="fill: #b48637;"/>
<rect x="303.09" y="184.099" width="142.996" height="28.999" transform="translate(-18.704 40.236) rotate(-5.999)" style="fill: #916c2c;"/>
<rect x="283.09" y="211.097" width="142.996" height="28.999" transform="translate(-21.636 38.294) rotate(-5.999)" style="fill: #b48637;"/>
<rect x="277.212" y="170.207" width="75.002" height="53.001" transform="translate(-42.023 94.348) rotate(-15.997)" style="fill: #b48637;"/>
<rect x="438.839" y="177.692" width="31" height="53" transform="translate(22.086 451.731) rotate(-53.999)" style="fill: #916c2c;"/>
<rect x="417.839" y="204.693" width="31" height="53" transform="translate(-8.414 445.872) rotate(-53.999)" style="fill: #b48637;"/>
<rect x="159.852" y="299.781" width="33.001" height="53.002" transform="translate(-191.458 373.986) rotate(-68.999)" style="fill: #916c2c;"/>
<rect x="129.077" y="220.3" width="102.999" height="32" transform="translate(-104.408 151.274) rotate(-36.001)" style="fill: #916c2c;"/>
<rect x="136.964" y="244.999" width="29.998" height="99.994" transform="translate(-106.844 87.308) rotate(-23.999)" style="fill: #916c2c;"/>
<rect x="159.852" y="313.783" width="33.001" height="53.002" transform="translate(-204.53 382.969) rotate(-68.999)" style="fill: #b48637;"/>
<rect x="123.966" y="243.999" width="29.998" height="99.994" transform="translate(-107.561 81.935) rotate(-23.999)" style="fill: #b48637;"/>
<rect x="160.372" y="168.198" width="67" height="71" transform="translate(-82.705 152.863) rotate(-36.001)" style="fill: #916c2c;"/>
<rect x="116.076" y="218.299" width="102.999" height="32" transform="translate(-105.715 143.251) rotate(-36.001)" style="fill: #b48637;"/>
<rect x="122.373" y="154.198" width="67" height="71" transform="translate(-81.734 127.853) rotate(-36.001)" style="fill: #b48637;"/>
<rect x="169.991" y="89.996" width="95.995" height="87.996" transform="translate(-2.305 3.825) rotate(-1)" style="fill: #b48637;"/>
<ellipse cx="325.968" cy="84.037" rx="34" ry="17" transform="translate(150.289 371.186) rotate(-72.998)" style="fill: #94572d;"/>
<ellipse cx="287.976" cy="90" rx="29.999" ry="13.999" transform="translate(-12.419 61.84) rotate(-12)" style="fill: #94572d;"/>
<ellipse cx="366.998" cy="83.001" rx="12" ry="21" transform="translate(-5.837 32.302) rotate(-5)" style="fill: #94572d;"/>
<ellipse cx="353.956" cy="38.038" rx="26.999" ry="16.999" transform="translate(134.125 318.049) rotate(-57.999)" style="fill: #94572d;"/>
<circle cx="426" cy="27" r="17" style="fill: #94572d;"/>
<ellipse cx="358.97" cy="41.043" rx="15" ry="20.999" transform="translate(154.19 338.716) rotate(-61.997)" style="fill: #b48637;"/>
<path d="m445,67c0,7.7-1.8,14.9-5,21.3-.7-.1-1.5-.2-2.2-.3-10.5-.9-19.3,2.4-19.7,7.3-.3,3.4,3.4,6.7,9.2,8.7-7.8,6.2-17.6,9.9-28.3,9.9-25.4,0-46-21-46-47s20.6-47,46-47,46,21.2,46,47.1Z" style="fill: #b48637;"/>
<ellipse cx="413" cy="12" rx="19" ry="11" style="fill: #94572d;"/>
<ellipse cx="386" cy="19" rx="21" ry="19" style="fill: #94572d;"/>
<ellipse cx="351" cy="89" rx="20" ry="35" style="fill: #94572d;"/>
<ellipse cx="364.998" cy="114.001" rx="14" ry="30" transform="translate(-8.547 32.245) rotate(-5)" style="fill: #94572d;"/>
<ellipse cx="367.97" cy="49.022" rx="22.001" ry="14" transform="translate(190.33 374.98) rotate(-68.999)" style="fill: #94572d;"/>
<polygon points="409.6 42.7 425.4 18.7 406 14.2 409.6 42.7" style="fill: #94572d;"/>
<polygon points="389.9 57.6 392.6 28.9 373.3 34.1 389.9 57.6" style="fill: #94572d;"/>
<polygon points="381.8 82.9 380 54.2 361.7 62.3 381.8 82.9" style="fill: #94572d;"/>
<polygon points="362.3 157.8 376.8 133 357.1 129.5 362.3 157.8" style="fill: #94572d;"/>
<polygon points="344.3 136.8 358.8 112 339.1 108.5 344.3 136.8" style="fill: #94572d;"/>
<polygon points="325.3 125.8 339.8 101 320.1 97.5 325.3 125.8" style="fill: #94572d;"/>
<polygon points="293.1 112.7 316.8 96.3 300.4 84.8 293.1 112.7" style="fill: #94572d;"/>
<polygon points="245.9 97 274.4 100.6 269.9 81.2 245.9 97" style="fill: #94572d;"/>
<circle cx="49" cy="172" r="6" style="fill: #916c2c;"/>
<circle cx="49" cy="167" r="6" style="fill: #926c2c;"/>
<circle cx="49" cy="161" r="6" style="fill: #926d2c;"/>
<circle cx="50" cy="156" r="6" style="fill: #936d2c;"/>
<circle cx="50" cy="152" r="6" style="fill: #936e2c;"/>
<circle cx="51" cy="147" r="6" style="fill: #946e2d;"/>
<circle cx="51" cy="142" r="6" style="fill: #956f2d;"/>
<circle cx="52" cy="138" r="6" style="fill: #956f2d;"/>
<circle cx="53" cy="134" r="6" style="fill: #966f2d;"/>
<circle cx="54" cy="130" r="6" style="fill: #96702d;"/>
<circle cx="56" cy="126" r="6" style="fill: #97702e;"/>
<circle cx="57" cy="122" r="6" style="fill: #98712e;"/>
<circle cx="59" cy="118" r="6" style="fill: #98712e;"/>
<circle cx="61" cy="114" r="6" style="fill: #99722e;"/>
<circle cx="63" cy="110" r="7" style="fill: #99722e;"/>
<circle cx="65" cy="106" r="7" style="fill: #9a722e;"/>
<circle cx="68" cy="103" r="7" style="fill: #9a732f;"/>
<circle cx="71" cy="99" r="7" style="fill: #9b732f;"/>
<circle cx="74" cy="95" r="7" style="fill: #9c742f;"/>
<circle cx="77" cy="91" r="7" style="fill: #9c742f;"/>
<circle cx="81" cy="87" r="7" style="fill: #9d752f;"/>
<circle cx="84" cy="83" r="7" style="fill: #9d7530;"/>
<circle cx="86" cy="79" r="7" style="fill: #9e7530;"/>
<circle cx="88" cy="75" r="7" style="fill: #9f7630;"/>
<circle cx="88" cy="71" r="7" style="fill: #9f7630;"/>
<circle cx="87" cy="68" r="7" style="fill: #a07730;"/>
<circle cx="85" cy="64" r="7" style="fill: #a07730;"/>
<circle cx="83" cy="62" r="7" style="fill: #a17831;"/>
<circle cx="80" cy="60" r="7" style="fill: #a17831;"/>
<circle cx="76" cy="58" r="8" style="fill: #a27931;"/>
<circle cx="72" cy="57" r="8" style="fill: #a37931;"/>
<circle cx="67" cy="57" r="8" style="fill: #a37931;"/>
<circle cx="62" cy="58" r="8" style="fill: #a47a32;"/>
<circle cx="56" cy="59" r="8" style="fill: #a47a32;"/>
<circle cx="50" cy="62" r="8" style="fill: #a57b32;"/>
<circle cx="44" cy="65" r="8" style="fill: #a67b32;"/>
<circle cx="37" cy="69" r="8" style="fill: #a67c32;"/>
<circle cx="31" cy="75" r="8" style="fill: #a77c32;"/>
<circle cx="24" cy="82" r="8" style="fill: #a77c33;"/>
<circle cx="17" cy="89" r="8" style="fill: #a87d33;"/>
<circle cx="14" cy="95" r="8" style="fill: #a87d33;"/>
<circle cx="11" cy="100" r="8" style="fill: #a97e33;"/>
<circle cx="9" cy="106" r="8" style="fill: #aa7e33;"/>
<circle cx="9" cy="111" r="8" style="fill: #aa7f34;"/>
<circle cx="9" cy="116" r="9" style="fill: #ab7f34;"/>
<circle cx="9" cy="121" r="9" style="fill: #ab7f34;"/>
<circle cx="11" cy="125" r="9" style="fill: #ac8034;"/>
<circle cx="13" cy="129" r="9" style="fill: #ad8034;"/>
<circle cx="16" cy="133" r="9" style="fill: #ad8134;"/>
<circle cx="20" cy="136" r="9" style="fill: #ae8135;"/>
<circle cx="24" cy="138" r="9" style="fill: #ae8235;"/>
<circle cx="29" cy="140" r="9" style="fill: #af8235;"/>
<circle cx="35" cy="140" r="9" style="fill: #af8235;"/>
<circle cx="41" cy="140" r="9" style="fill: #b08335;"/>
<circle cx="48" cy="139" r="9" style="fill: #b18336;"/>
<circle cx="56" cy="136" r="9" style="fill: #b18436;"/>
<circle cx="64" cy="133" r="9" style="fill: #b28436;"/>
<circle cx="72" cy="128" r="9" style="fill: #b28536;"/>
<circle cx="82" cy="122" r="9" style="fill: #b38536;"/>
<circle cx="91" cy="115" r="10" style="fill: #b48637;"/>
<ellipse cx="459.001" cy="254.024" rx="9" ry="13" transform="translate(-56.029 154.254) rotate(-17.998)" style="fill: #b48637;"/>
<ellipse cx="446.994" cy="258.031" rx="8" ry="13" transform="translate(-53.801 133.178) rotate(-15.997)" style="fill: #b48637;"/>
<ellipse cx="482.99" cy="218.995" rx="9" ry="12" transform="translate(-47.119 233.902) rotate(-26.001)" style="fill: #916c2c;"/>
<ellipse cx="480.003" cy="227.023" rx="9" ry="13" transform="translate(-46.659 159.422) rotate(-17.998)" style="fill: #916c2c;"/>
<ellipse cx="471.996" cy="233.031" rx="8" ry="13" transform="translate(-45.943 139.1) rotate(-15.997)" style="fill: #916c2c;"/>
<ellipse cx="462.99" cy="245.996" rx="9" ry="12" transform="translate(-60.981 227.867) rotate(-26.001)" style="fill: #b48637;"/>
<ellipse cx="208.982" cy="331.001" rx="9" ry="13" transform="translate(-165.899 218.309) rotate(-41.002)" style="fill: #916c2c;"/>
<ellipse cx="206.987" cy="345.023" rx="9" ry="13" transform="translate(-96.478 80.839) rotate(-17.998)" style="fill: #916c2c;"/>
<ellipse cx="204.984" cy="342.02" rx="9" ry="15.001" transform="translate(-192.756 313.759) rotate(-55)" style="fill: #b48637;"/>
<ellipse cx="207.983" cy="354" rx="9" ry="13" transform="translate(-181.233 223.295) rotate(-41.002)" style="fill: #b48637;"/>
<ellipse cx="196.982" cy="359" rx="9" ry="13" transform="translate(-187.212 217.305) rotate(-41.002)" style="fill: #b48637;"/>
<ellipse cx="43.946" cy="197.036" rx="23.999" ry="12.999" transform="translate(-157.921 199.056) rotate(-78)" style="fill: #94572d;"/>
<polygon points="42.3 231.8 54.7 207.6 37.9 204.7 42.3 231.8" style="fill: #94572d;"/>
<polygon points="31 222.5 44.1 200.4 32.6 196.9 31 222.5" style="fill: #94572d;"/>
<polygon points="35 237.6 50.2 207.3 34.6 203.7 35 237.6" style="fill: #94572d;"/>
<polygon points="377.2 165.4 392.9 137.8 378.6 133.4 377.2 165.4" style="fill: #6e4021;"/>
<path d="m457.2,60.1l5.9.7c.7.1,1.2.7,1.1,1.4l-1,7.9c-.1,1.2-1.7,1.5-2.3.5l-4.9-8.6c-.5-.9.2-2,1.2-1.9h0Z" style="fill: #816027;"/>
<path d="m420.043,53.215c1.125.171,2.766.842,5.489,3.83,1.652,1.812,1.725,2.999,2.043,4.122" style="fill: none; stroke: #000; stroke-width: 2px;"/>
<ellipse id="eye1" cx="424.262" cy="56.528" rx="7.4" ry="5.4" transform="translate(321.867 472.111) rotate(-83.748)"/>
</g>
</svg>
<h3>生成されたコード</h3>
<pre id="code" class="brush: xml; class-name: 'code'">
</pre>
しし座の星座を表示するプログラムです。 元々 HTML に記載されていたししの絵を移動し、座標や星座を重ねています。 前回のカニの瞬きでは目の色を変更していましたが、 今回は開いた目の裏に閉じた目を用意し、空いた目を opacity で消しています。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
var s; // for Snap
/* Initialize stars in Leo
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
var star = {};
star['Regulus'] = {ra: '10 08 22.46', dec: '+11 58 01.9', mag: 1.36, fd: 32};
star['γ1 Leo'] = {ra: '10 19 58.16', dec: '+19 50 30.7', mag: 2.01, fd: 41};
star['Denebola'] = {ra: '11 49 03.88', dec: '+14 34 20.4', mag: 2.14, fd: 94};
star['δ Leo'] = {ra: '11 14 06.41', dec: '+20 31 26.5', mag: 2.56, fd: 68};
star['ε Leo'] = {ra: '09 45 51.10', dec: '+23 46 27.4', mag: 2.97, fd: 17};
star['θ Leo'] = {ra: '11 14 14.44', dec: '+15 25 47.1', mag: 3.33, fd: 70};
star['ζ Leo'] = {ra: '10 16 41.40', dec: '+23 25 02.4', mag: 3.43, fd: 36};
star['η Leo'] = {ra: '10 07 19.95', dec: '+16 45 45.6', mag: 3.48, fd: 30};
star['ο Leo A'] = {ra: '09 41 09.12', dec: '+09 53 32.6', mag: 3.52, fd: 14};
star['ο Leo B'] = {ra: '09 41 13.40', dec: '+09 54 35.0', mag: 3.70, fd: 14};
star['γ2 Leo'] = {ra: '10 19 58.60', dec: '+19 50 26.0', mag: 3.80, fd: 41};
star['ρ Leo'] = {ra: '10 32 48.68', dec: '+09 18 23.7', mag: 3.84, fd: 47};
star['μ Leo'] = {ra: '09 52 45.96', dec: '+26 00 25.5', mag: 3.88, fd: 24};
star['ι Leo'] = {ra: '11 23 55.37', dec: '+10 31 46.9', mag: 4.00, fd: 78};
star['σ Leo'] = {ra: '11 21 08.25', dec: '+06 01 45.7', mag: 4.05, fd: 77};
star['54 Leo'] = {ra: '10 55 37.30', dec: '+24 44 56.0', mag: 6.30, fd: 54};
star['υ Leo'] = {ra: '11 36 56.93', dec: '-00 49 25.9', mag: 4.30, fd: 91};
star['λ Leo'] = {ra: '09 31 43.24', dec: '+22 58 05.0', mag: 4.32, fd: 4};
star['31 Leo'] = {ra: '10 07 54.32', dec: '+09 59 51.6', mag: 4.39, fd: 31};
star['60 Leo'] = {ra: '11 02 19.78', dec: '+20 10 47.1', mag: 4.42, fd: 60};
star['φ Leo'] = {ra: '11 16 39.76', dec: '-03 39 05.5', mag: 4.45, fd: 74};
star['κ Leo'] = {ra: '09 24 39.28', dec: '+26 10 56.8', mag: 4.47, fd: 1};
star['93 Leo'] = {ra: '11 47 59.23', dec: '+20 13 08.2', mag: 4.50, fd: 93};
star['72 Leo'] = {ra: '11 15 12.24', dec: '+23 05 43.9', mag: 4.56, fd: 72};
star['χ Leo'] = {ra: '11 05 01.23', dec: '+07 20 10.0', mag: 4.62, fd: 63};
star['π Leo'] = {ra: '10 00 12.82', dec: '+08 02 39.4', mag: 4.68, fd: 29};
star['61 Leo'] = {ra: '11 01 49.67', dec: '-02 29 04.2', mag: 4.73, fd: 61};
star['87 Leo'] = {ra: '11 30 18.88', dec: '-03 00 12.5', mag: 4.77, fd: 87};
star['40 Leo'] = {ra: '10 19 44.31', dec: '+19 28 17.2', mag: 4.78, fd: 40};
star['58 Leo'] = {ra: '11 00 33.64', dec: '+03 37 03.1', mag: 4.84, fd: 58};
star['τ Leo'] = {ra: '11 27 56.23', dec: '+02 51 22.6', mag: 4.95, fd: 84};
star['59 Leo'] = {ra: '11 00 44.83', dec: '+06 06 05.4', mag: 4.98, fd: 59};
star['ξ Leo'] = {ra: '09 31 56.79', dec: '+11 18 00.1', mag: 4.99, fd: 5};
star['10 Leo'] = {ra: '09 37 12.71', dec: '+06 50 08.8', mag: 5.00, fd: 10};
star['6 Leo'] = {ra: '09 31 57.58', dec: '+09 42 56.9', mag: 5.07, fd: 6};
star['48 Leo'] = {ra: '10 34 48.07', dec: '+06 57 13.0', mag: 5.07, fd: 48};
star['75 Leo'] = {ra: '11 17 17.37', dec: '+02 00 39.3', mag: 5.18, fd: 75};
star['ν Leo'] = {ra: '09 58 13.39', dec: '+12 26 41.4', mag: 5.26, fd: 27};
star['92 Leo'] = {ra: '11 40 47.11', dec: '+21 21 10.2', mag: 5.26, fd: 92};
star['22 Leo'] = {ra: '09 51 53.02', dec: '+24 23 44.9', mag: 5.29, fd: 22};
star['73 Leo'] = {ra: '11 15 51.90', dec: '+13 18 27.3', mag: 5.31, fd: 73};
star['53 Leo'] = {ra: '10 49 15.43', dec: '+10 32 42.9', mag: 5.32, fd: 53};
star['ψ Leo'] = {ra: '09 43 43.90', dec: '+14 01 18.1', mag: 5.36, fd: 16};
star['79 Leo'] = {ra: '11 24 02.34', dec: '+01 24 27.9', mag: 5.39, fd: 79};
star['ω Leo'] = {ra: '09 28 27.38', dec: '+09 03 24.4', mag: 5.40, fd: 2};
star['69 Leo'] = {ra: '11 13 45.58', dec: '-00 04 10.2', mag: 5.40, fd: 69};
star['37 Leo'] = {ra: '10 16 40.75', dec: '+13 43 42.1', mag: 5.42, fd: 37};
star['46 Leo'] = {ra: '10 32 11.80', dec: '+14 08 14.0', mag: 5.43, fd: 46};
star['HD 94402'] = {ra: '10 53 43.76', dec: '-02 07 45.3', mag: 5.45};
star['52 Leo'] = {ra: '10 46 25.35', dec: '+14 11 41.3', mag: 5.49, fd: 52};
star['51 Leo'] = {ra: '10 46 24.49', dec: '+18 53 29.8', mag: 5.50, fd: 51};
star['65 Leo'] = {ra: '11 06 54.43', dec: '+01 57 20.6', mag: 5.52, fd: 65};
star['95 Leo'] = {ra: '11 55 40.53', dec: '+15 38 48.5', mag: 5.53, fd: 95};
star['86 Leo'] = {ra: '11 30 29.08', dec: '+18 24 35.1', mag: 5.54, fd: 86};
star['81 Leo'] = {ra: '11 25 36.46', dec: '+16 27 23.6', mag: 5.58, fd: 81};
star['44 Leo'] = {ra: '10 25 15.19', dec: '+08 47 05.8', mag: 5.61, fd: 44};
star['15 Leo'] = {ra: '09 43 33.27', dec: '+29 58 29.0', mag: 5.64, fd: 15};
star['18 Leo'] = {ra: '09 46 23.34', dec: '+11 48 36.0', mag: 5.67, fd: 18};
star['49 Leo'] = {ra: '10 35 02.19', dec: '+08 39 01.6', mag: 5.67, fd: 49};
star['EO Leo'] = {ra: '10 02 48.96', dec: '+21 56 57.4', mag: 5.68};
star['67 Leo'] = {ra: '11 08 49.08', dec: '+24 39 30.4', mag: 5.70, fd: 67};
star['3 Leo'] = {ra: '09 28 29.19', dec: '+08 11 18.1', mag: 5.72, fd: 3};
star['8 Leo'] = {ra: '09 37 02.59', dec: '+16 26 16.7', mag: 5.73, fd: 8};
star['85 Leo'] = {ra: '11 29 41.86', dec: '+15 24 48.2', mag: 5.74, fd: 85};
star['89 Leo'] = {ra: '11 34 22.06', dec: '+03 03 37.5', mag: 5.76, fd: 89};
star['36 G. Leo'] = {ra: '11 14 01.81', dec: '+08 03 39.4', mag: 5.79};
star['5 G. Leo'] = {ra: '09 46 10.04', dec: '+06 42 31.0', mag: 5.80};
star['39 Leo'] = {ra: '10 17 14.80', dec: '+23 06 23.2', mag: 5.81, fd: 39};
star['10 Sex'] = {ra: '09 56 26.03', dec: '+08 55 59.2', mag: 5.85, fd: '(10)'};
star['DR Leo'] = {ra: '09 41 35.11', dec: '+31 16 40.2', mag: 5.90};
star['76 Leo'] = {ra: '11 18 54.98', dec: '+01 39 01.9', mag: 5.90, fd: 76};
star['55 Leo'] = {ra: '10 55 42.34', dec: '+00 44 13.0', mag: 5.91, fd: 55};
star['56 Leo'] = {ra: '10 56 01.48', dec: '+06 11 07.4', mag: 5.91, fd: 56};
star['35 Leo'] = {ra: '10 16 32.42', dec: '+23 30 10.8', mag: 5.95, fd: 35};
star['62 Leo'] = {ra: '11 03 36.63', dec: '-00 00 03.0', mag: 5.95, fd: 62};
star['90 Leo'] = {ra: '11 34 42.50', dec: '+16 47 48.9', mag: 5.95, fd: 90};
star['45 Leo'] = {ra: '10 27 38.99', dec: '+09 45 44.7', mag: 6.01, fd: 45};
star['R Leo'] = {ra: '09 47 33.50', dec: '+11 25 44.0', mag: 6.02};
star['11 Sex'] = {ra: '09 58 07.62', dec: '+08 18 50.6', mag: 6.05, fd: '(11)'};
star['50 G. Leo'] = {ra: '11 23 17.97', dec: '+00 07 55.4', mag: 6.05};
star['43 Leo'] = {ra: '10 23 00.46', dec: '+06 32 34.4', mag: 6.06, fd: 43};
star['20 Leo'] = {ra: '09 49 50.12', dec: '+21 10 46.0', mag: 6.10, fd: 20};
star['20 G. Leo'] = {ra: '10 53 25.04', dec: '-02 15 18.0', mag: 6.12};
star['30 G. Leo'] = {ra: '11 03 14.55', dec: '-00 45 07.4', mag: 6.12};
star['42 Leo'] = {ra: '10 21 50.32', dec: '+14 58 32.9', mag: 6.16, fd: 42};
star['59 G. Leo'] = {ra: '11 27 53.73', dec: '-01 41 59.8', mag: 6.23};
star['13 Leo'] = {ra: '09 41 38.50', dec: '+25 54 46.6', mag: 6.26, fd: 13};
star['HD 97658'] = {ra: '11 14 33', dec: '+25 42 37', mag: 6.27};
star['88 Leo'] = {ra: '11 31 45.14', dec: '+14 21 53.9', mag: 6.27, fd: 88};
star['19 G. Leo'] = {ra: '10 52 36.10', dec: '-00 12 05.7', mag: 6.31};
star['7 Leo'] = {ra: '09 35 52.91', dec: '+14 22 46.5', mag: 6.32, fd: 7};
star['80 Leo'] = {ra: '11 25 50.10', dec: '+03 51 36.7', mag: 6.35, fd: 80};
star['18 G. Leo'] = {ra: '10 52 13.69', dec: '+01 01 29.9', mag: 6.37};
star['37 Sex'] = {ra: '10 46 05.68', dec: '+06 22 23.8', mag: 6.38, fd: '(37)'};
star['6 LMi'] = {ra: '09 23 31.85', dec: '+25 10 58.2', mag: 6.41, fd: '(6)'};
star['34 Leo'] = {ra: '10 11 38.19', dec: '+13 21 18.7', mag: 6.43, fd: 34};
star['67 G. Leo'] = {ra: '11 34 58.93', dec: '-04 21 40.2', mag: 6.43};
star['19 Leo'] = {ra: '09 47 25.99', dec: '+11 34 05.4', mag: 6.44, fd: 19};
star['23 Leo'] = {ra: '09 51 01.97', dec: '+13 03 58.5', mag: 6.45, fd: 23};
star['HD 100655'] = {ra: '11 35 03.79', dec: '+20 26 29.6', mag: 6.45};
star['HN Leo'] = {ra: '09 58 26.12', dec: '+27 45 32.6', mag: 6.48};
star['64 Leo'] = {ra: '11 07 39.72', dec: '+23 19 25.5', mag: 6.48, fd: 64};
star['83 Leo A'] = {ra: '11 26 45.75', dec: '+03 00 45.6', mag: 6.49, fd: 83};
star['18 LMi'] = {ra: '09 56 31.36', dec: '+32 23 04.6', mag: 6.55, fd: '(18)'};
star['9 Leo'] = {ra: '09 37 49.96', dec: '+24 40 13.1', mag: 6.61, fd: 9};
star['11 Leo'] = {ra: '09 38 01.31', dec: '+14 20 50.8', mag: 6.63, fd: 11};
star['57 Leo'] = {ra: '10 56 10.53', dec: '+00 25 58.6', mag: 6.65, fd: 57};
star['52 LMi'] = {ra: '11 07 04.91', dec: '+25 32 13.8', mag: 6.86, fd: '(52)'};
var edge = [['μ Leo', 'κ Leo'], ['κ Leo', 'λ Leo'], ['λ Leo', 'ε Leo'], ['ε Leo', 'μ Leo'], ['μ Leo', 'ζ Leo'], ['ζ Leo', 'γ1 Leo'], ['γ1 Leo', '60 Leo'], ['60 Leo', 'δ Leo'], ['δ Leo', 'Denebola'], ['Denebola', 'θ Leo'], ['θ Leo', 'δ Leo'], ['θ Leo', 'ι Leo'], ['ι Leo', 'σ Leo'], ['θ Leo', 'η Leo'], ['η Leo', 'Regulus'], ['Regulus', 'ρ Leo'], ['ρ Leo', 'ο Leo A'], ['η Leo', 'γ1 Leo']];
var offsetX, offsetY;
var wrap = true;
var decMin, decMax;
var raMin = 0;
var raMax;
var xMin, xMax;
var yMin, yMax;
var 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.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) {
var 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.;
var 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
var dx = 80, dy = 20;
var g = Snap.select('#Leo');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 920;
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];
//<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 76 250)" class="st0 st1 st2">Leo</text>
s.text(76, 250 + 32, 'Leo').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 70 270)" class="st0 st3 st4">♌</text>
s.text(70, 270 + 96, '♌').attr({fill: 'white', 'font-family': 'Segoe UI Symbol', 'font-size': 96});
// Get generated SVG code
var svgText = s.toString();
// Show the code with additional new lines
var codeNode = document.getElementById('code');
codeNode.textContent = svgText.replace(/><([^/])/g, '>\n<$1');
setInterval(closeEyes, delay);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
