星座のプログラムを作り変えました。2月の星座ということで、みずがめ座です。 今回も Snap.svg を使いました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script src="js/snap.svg-min.js"></script> <script src="js/zodiac10.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac10.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="Aquarius">
<ellipse cx="55" cy="223" rx="18" ry="50" transform="rotate(10 55 223)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="29" cy="214" rx="17" ry="59" transform="rotate(17 29 214)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="14" cy="196" rx="14" ry="45" transform="rotate(24 14 196)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="265" cy="61" rx="27" ry="35" transform="rotate(28 265 61)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="234" y="78" width="22" height="34" transform="rotate(32 245 95)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="180" y="95" width="87" height="81" transform="rotate(31 223 135)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="257" y="144" width="67" height="22" transform="rotate(53 290 155)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="299" y="165" width="65" height="19" transform="rotate(348 331 174)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="144" y="94" width="74" height="22" transform="rotate(334 181 105)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="153" y="160" width="89" height="54" transform="rotate(19 197 187)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="99" y="186" width="75" height="30" transform="rotate(341 136 201)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="130" y="220" width="96" height="31" transform="rotate(328 178 235)"
style="fill:#d8a57e;stroke-width:0"/>
<ellipse cx="97" cy="216" rx="17" ry="17" style="fill:#d8a57e;stroke-width:0"/>
<ellipse cx="134" cy="266" rx="17" ry="19" style="fill:#d8a57e;stroke-width:0"/>
<rect x="128" y="274" width="28" height="56" transform="rotate(345 142 302)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="80" y="217" width="27" height="74" style="fill:#d8a57e;stroke-width:0"/>
<ellipse id="eye1" cx="255" cy="55" rx="6" ry="7" transform="rotate(40 255 55)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="268" cy="28" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="284" cy="30" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="295" cy="43" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="299" cy="60" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="251" cy="32" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="290" cy="76" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="239" cy="46" rx="10" ry="11" style="fill:#dca028;stroke-width:0"/>
<ellipse cx="375" cy="163" rx="16" ry="15" style="fill:#d8a57e;stroke-width:0"/>
<ellipse cx="363" cy="191" rx="6" ry="36" transform="rotate(6 363 191)"
style="fill:#6a5acd;stroke-width:0"/>
<ellipse cx="394" cy="204" rx="7" ry="39" transform="rotate(345 394 204)"
style="fill:#6a5acd;stroke-width:0"/>
<polygon points="77,270 60,332 95,332" transform="rotate(265 77 301)"
style="fill:#d8a57e;stroke-width:0"/>
<polygon points="132,307 118,371 147,371" transform="rotate(261 132 339)"
style="fill:#d8a57e;stroke-width:0"/>
<rect x="137" y="62" width="18" height="69" transform="rotate(358 146 96)"
style="fill:#d8a57e;stroke-width:0"/>
<ellipse cx="142" cy="43" rx="36" ry="43" transform="rotate(32 142 43)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="120" cy="77" rx="28" ry="15" transform="rotate(30 120 77)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="118" cy="79" rx="18" ry="7" transform="rotate(28 118 79)"
style="fill:#102020;stroke-width:0"/>
<polygon points="94,39 63,194 126,194" transform="rotate(38 94 116)"
style="fill:#387070;stroke-width:0"/>
<polygon points="399,179 384,232 415,232" transform="rotate(341 399 205)"
style="fill:#6a5acd;stroke-width:0"/>
<polygon points="362,163 351,223 374,223" transform="rotate(10 362 193)"
style="fill:#6a5acd;stroke-width:0"/>
<ellipse cx="401" cy="199" rx="8" ry="37" transform="rotate(328 401 199)"
style="fill:#6a5acd;stroke-width:0"/>
<ellipse cx="405" cy="210" rx="0" ry="0" style="fill:#6a5acd;stroke-width:0"/>
<ellipse id="eye2" cx="274" cy="66" rx="6" ry="7" transform="rotate(40 274 66)"
style="fill:#387070;stroke-width:0"/>
<ellipse cx="163" cy="172" rx="13" ry="23" transform="rotate(334 163 172)"
style="fill:#8a5b28;stroke-width:0"/>
<ellipse cx="213" cy="191" rx="15" ry="37" transform="rotate(93 213 191)"
style="fill:#8a5b28;stroke-width:0"/>
<ellipse cx="150" cy="187" rx="13" ry="23" transform="rotate(347 150 187)"
style="fill:#8a5b28;stroke-width:0"/>
<rect x="156" y="172" width="85" height="44" transform="rotate(21 198 194)"
style="fill:#8a5b28;stroke-width:0"/>
<ellipse cx="193" cy="216" rx="39" ry="18" transform="rotate(11 193 216)"
style="fill:#8a5b28;stroke-width:0"/>
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性を使い、下記の zodiac10.html のソース（水がめを持ったガニメデ）より位置を移動しています。</li>
<li>49行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,49]">
</pre>
みずがめ座の星座を表示するプログラムです。 元々 HTML に記載されていた水がめを持ったガニメデの絵を移動し、座標や星座を重ねています。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
let s; // for Snap
/* Initialize stars in Capricornus
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
let star = {};
star['β Aqr'] = {ra: '21 31 33.52', dec: '-05 34 16.2', mag: 2.90, fd: 22};
star['α Aqr'] = {ra: '22 05 47.03', dec: '-00 19 11.4', mag: 2.95, fd: 34};
star['δ Aqr'] = {ra: '22 54 39.04', dec: '-15 49 14.7', mag: 3.27, fd: 76};
star['ζ2 Aqr'] = {ra: '22 28 50.10', dec: '-00 01 12.0', mag: 4.42, fd: 55};
star['88 Aqr'] = {ra: '23 09 26.76', dec: '-21 10 20.9', mag: 3.68, fd: 88};
star['λ Aqr'] = {ra: '22 52 36.86', dec: '-07 34 46.8', mag: 3.73, fd: 73};
star['ε Aqr'] = {ra: '20 47 40.53', dec: '-09 29 44.5', mag: 3.78, fd: 2};
star['γ Aqr'] = {ra: '22 21 39.30', dec: '-01 23 14.5', mag: 3.86, fd: 48};
star['98 Aqr'] = {ra: '23 22 58.30', dec: '-20 06 01.2', mag: 3.96, fd: 98};
star['η Aqr'] = {ra: '22 35 21.33', dec: '-00 07 02.5', mag: 4.04, fd: 62};
star['τ2 Aqr'] = {ra: '22 49 35.51', dec: '-13 35 33.1', mag: 4.05, fd: 71};
star['θ Aqr'] = {ra: '22 16 49.97', dec: '-07 46 59.7', mag: 4.17, fd: 43};
star['φ Aqr'] = {ra: '23 14 19.33', dec: '-06 02 54.7', mag: 4.22, fd: 90};
star['ψ1 Aqr'] = {ra: '23 15 53.28', dec: '-09 05 15.7', mag: 4.24, fd: 91};
star['ι Aqr'] = {ra: '22 06 26.21', dec: '-13 52 10.3', mag: 4.29, fd: 33};
star['99 Aqr'] = {ra: '23 26 02.82', dec: '-20 38 30.7', mag: 4.38, fd: 99};
star['ψ2 Aqr'] = {ra: '23 17 54.20', dec: '-09 10 57.0', mag: 4.41, fd: 93};
star['3 Aqr'] = {ra: '20 47 44.24', dec: '-05 01 39.4', mag: 4.43, fd: 3};
star['86 Aqr'] = {ra: '23 06 40.81', dec: '-23 44 35.2', mag: 4.48, fd: 86};
star['ω2 Aqr'] = {ra: '23 42 43.28', dec: '-14 32 41.1', mag: 4.49, fd: 105};
star['ν Aqr'] = {ra: '21 09 35.59', dec: '-11 22 18.0', mag: 4.50, fd: 13};
star['ξ Aqr'] = {ra: '21 37 45.04', dec: '-07 51 14.9', mag: 4.68, fd: 23};
star['66 Aqr'] = {ra: '22 43 35.25', dec: '-18 49 49.1', mag: 4.68, fd: 66};
star['101 Aqr'] = {ra: '23 33 16.63', dec: '-20 54 52.3', mag: 4.70, fd: 101};
star['89 Aqr'] = {ra: '23 09 54.88', dec: '-22 27 27.3', mag: 4.71, fd: 89};
star['μ Aqr'] = {ra: '20 52 39.21', dec: '-08 58 59.7', mag: 4.73, fd: 6};
star['ο Aqr'] = {ra: '22 03 18.83', dec: '-02 09 19.2', mag: 4.74, fd: 31};
star['π Aqr'] = {ra: '22 25 16.61', dec: '+01 22 38.6', mag: 4.80, fd: 52};
star['σ Aqr'] = {ra: '22 30 38.82', dec: '-10 40 40.4', mag: 4.82, fd: 57};
star['104 Aqr B'] = {ra: '23 41 46.39', dec: '-17 47 00.5', mag: 8.52, fd: 104};
star['χ Aqr'] = {ra: '23 16 50.95', dec: '-07 43 35.3', mag: 4.93, fd: 92};
star['ω1 Aqr'] = {ra: '23 39 47.04', dec: '-14 13 19.4', mag: 4.97, fd: 102};
star['ψ3 Aqr'] = {ra: '23 18 57.65', dec: '-09 36 38.6', mag: 4.99, fd: 95};
star['κ Aqr'] = {ra: '22 37 45.42', dec: '-04 13 39.9', mag: 5.04, fd: 63};
star['25 Aqr'] = {ra: '21 39 33.28', dec: '+02 14 37.5', mag: 5.10, fd: 25};
star['47 Aqr'] = {ra: '22 21 35.58', dec: '-21 35 52.9', mag: 5.12, fd: 47};
star['1 Aqr'] = {ra: '20 39 24.83', dec: '+00 29 11.4', mag: 5.15, fd: 1};
star['108 Aqr'] = {ra: '23 51 21.32', dec: '-18 54 33.0', mag: 5.17, fd: 108};
star['94 Aqr A'] = {ra: '23 19 06.51', dec: '-13 27 30.4', mag: 5.20, fd: 94};
star['97 Aqr'] = {ra: '23 22 39.10', dec: '-15 02 21.8', mag: 5.19, fd: 97};
star['υ Aqr'] = {ra: '22 34 41.50', dec: '-20 42 28.3', mag: 5.21, fd: 59};
star['68 Aqr'] = {ra: '22 47 33.19', dec: '-19 36 46.3', mag: 5.24, fd: 68};
star['106 Aqr'] = {ra: '23 44 12.06', dec: '-18 16 36.9', mag: 5.24, fd: 106};
star['107 Aqr'] = {ra: '23 46 00.84', dec: '-18 40 42.1', mag: 5.28, fd: 107};
star['32 Aqr'] = {ra: '22 04 47.43', dec: '-00 54 22.5', mag: 5.29, fd: 32};
star['41 Aqr'] = {ra: '22 14 18.02', dec: '-21 04 28.9', mag: 5.33, fd: 41};
star['42 Aqr'] = {ra: '22 16 48.04', dec: '-12 49 53.2', mag: 5.34, fd: 42};
star['ρ Aqr'] = {ra: '22 20 11.91', dec: '-07 49 16.0', mag: 5.35, fd: 46};
star['103 Aqr'] = {ra: '23 41 34.51', dec: '-18 01 36.8', mag: 5.36, fd: 103};
star['38 Aqr'] = {ra: '22 10 37.46', dec: '-11 33 53.9', mag: 5.43, fd: 38};
star['83 Aqr'] = {ra: '23 05 09.71', dec: '-07 41 37.7', mag: 5.44, fd: 83};
star['18 Aqr'] = {ra: '21 24 11.44', dec: '-12 52 41.3', mag: 5.48, fd: 18};
star['21 Aqr'] = {ra: '21 25 16.96', dec: '-03 33 23.7', mag: 5.48, fd: 21};
star['7 Aqr'] = {ra: '20 56 54.03', dec: '-09 41 51.1', mag: 5.49, fd: 7};
star['12 Aqr A'] = {ra: '21 04 04.74', dec: '-05 49 23.0', mag: 5.89, fd: 12};
star['49 Aqr'] = {ra: '22 23 30.79', dec: '-24 45 45.6', mag: 5.53, fd: 49};
star['77 Aqr'] = {ra: '22 54 45.60', dec: '-16 16 18.3', mag: 5.53, fd: 77};
star['5 Aqr'] = {ra: '20 52 08.69', dec: '-05 30 25.4', mag: 5.55, fd: 5};
star['30 Aqr'] = {ra: '22 03 16.43', dec: '-06 31 20.7', mag: 5.55, fd: 30};
star['53 Aqr A'] = {ra: '22 26 34.40', dec: '-16 44 33.0', mag: 6.35, fd: 53};
star['96 Aqr'] = {ra: '23 19 23.86', dec: '-05 07 27.5', mag: 5.56, fd: 96};
star['28 Aqr'] = {ra: '22 01 05.01', dec: '+00 36 17.1', mag: 5.60, fd: 28};
star['26 Aqr'] = {ra: '21 42 10.12', dec: '+01 17 07.0', mag: 5.66, fd: 26};
star['τ1 Aqr'] = {ra: '22 47 42.75', dec: '-14 03 23.1', mag: 5.68, fd: 69};
star['19 Aqr'] = {ra: '21 25 13.02', dec: '-09 44 53.3', mag: 5.71, fd: 19};
star['44 Aqr'] = {ra: '22 17 06.50', dec: '-05 23 14.0', mag: 5.75, fd: 44};
star['50 Aqr'] = {ra: '22 24 27.03', dec: '-13 31 45.9', mag: 5.76, fd: 50};
star['51 Aqr'] = {ra: '22 24 06.87', dec: '-04 50 13.2', mag: 5.79, fd: 51};
star['35 Aqr'] = {ra: '22 08 58.99', dec: '-18 31 10.5', mag: 5.80, fd: 35};
star['74 Aqr'] = {ra: '22 53 28.69', dec: '-11 36 59.5', mag: 5.80, fd: 74};
star['15 Aqr'] = {ra: '21 18 11.07', dec: '-04 31 10.2', mag: 5.83, fd: 15};
star['16 Aqr'] = {ra: '21 21 04.33', dec: '-04 33 36.5', mag: 5.87, fd: 16};
star['60 Aqr'] = {ra: '22 34 02.89', dec: '-01 34 27.0', mag: 5.88, fd: 60};
star['45 Aqr'] = {ra: '22 19 00.70', dec: '-13 18 17.9', mag: 5.96, fd: 45};
star['4 Aqr'] = {ra: '20 51 25.69', dec: '-05 37 35.9', mag: 5.99, fd: 4};
star['17 Aqr'] = {ra: '21 22 56.27', dec: '-09 19 09.4', mag: 5.99, fd: 17};
star['39 Aqr'] = {ra: '22 12 25.74', dec: '-14 11 37.8', mag: 6.04, fd: 39};
star['82 Aqr'] = {ra: '23 02 32.56', dec: '-06 34 26.1', mag: 6.18, fd: 82};
star['70 Aqr'] = {ra: '22 48 30.19', dec: '-10 33 19.8', mag: 6.19, fd: 70};
star['78 Aqr'] = {ra: '22 54 34.13', dec: '-07 12 16.3', mag: 6.20, fd: 78};
star['11 Aqr'] = {ra: '21 00 33.81', dec: '-04 43 47.7', mag: 6.21, fd: 11};
star['81 Aqr'] = {ra: '23 01 23.65', dec: '-07 03 40.1', mag: 6.23, fd: 81};
star['100 Aqr'] = {ra: '23 31 42.04', dec: '-21 22 10.0', mag: 6.24, fd: 100};
star['56 Aqr'] = {ra: '22 30 17.33', dec: '-14 35 08.3', mag: 6.36, fd: 56};
star['20 Aqr'] = {ra: '21 24 51.68', dec: '-03 23 53.6', mag: 6.38, fd: 20};
star['29 Aqr'] = {ra: '22 02 26.25', dec: '-16 57 53.4', mag: 6.39, fd: 29};
star['58 Aqr'] = {ra: '22 31 41.28', dec: '-10 54 19.7', mag: 6.39, fd: 58};
star['61 Aqr'] = {ra: '22 35 48.82', dec: '-17 27 37.1', mag: 6.39, fd: 61};
star['67 Aqr'] = {ra: '22 43 14.25', dec: '-06 57 46.5', mag: 6.40, fd: 67};
star['14 Aqr'] = {ra: '21 16 17.78', dec: '-09 12 52.8', mag: 6.45, fd: 14};
star['HD 210277'] = {ra: '22 09 29.87', dec: '-07 32 55.2', mag: 6.63, fd: 114};
star['37 Aqr'] = {ra: '22 10 31.74', dec: '-10 49 13.7', mag: 6.64, fd: 37};
star['24 Aqr'] = {ra: '21 39 31.39', dec: '-00 03 04.1', mag: 6.66, fd: 24};
let edge = [['ε Aqr', 'μ Aqr'], ['μ Aqr', 'β Aqr'], ['β Aqr', 'α Aqr'], ['β Aqr', 'ι Aqr'], ['ι Aqr', 'θ Aqr'], ['α Aqr', 'θ Aqr'], ['θ Aqr', 'σ Aqr'], ['σ Aqr', 'τ2 Aqr'], ['τ2 Aqr', 'δ Aqr'], ['α Aqr', 'γ Aqr'], ['γ Aqr', 'ζ2 Aqr'], ['ζ2 Aqr', 'η Aqr'], ['η Aqr', 'λ Aqr'], ['λ Aqr', '88 Aqr'], ['η Aqr', 'φ Aqr'], ['φ Aqr', 'ψ1 Aqr'], ['ψ1 Aqr', 'ω1 Aqr'], ['ω1 Aqr', '98 Aqr'], ['98 Aqr', '104 Aqr B']];
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 = 110, dy = 6;
let g = Snap.select('#Aquarius');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 2600;
offsetY = -yMin + 60;
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 500 244)" style="font-family: 'Curlz MT'; font-size: 32px;">Aquarius</text>
s.text(500, 244 + 32, 'Aquarius').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 500 264)" style="font-family: 'Segoe UI Symbol'; font-size: 96px;">♒</text>
s.text(500, 264 + 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);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
