星座のプログラムを作り変えました。3月の星座ということで、うお座です。 今回も Snap.svg を使いました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script src="js/snap.svg-min.js"></script> <script src="js/zodiac11.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac11.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="Pisces">
<line x1="87.388" y1="108.49" x2="46.438" y2="187.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="3.438" y1="260.18" x2="47.438" y2="186.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="5.438" y1="258.18" x2="47.438" y2="223.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="62.438" y1="258.18" x2="44.438" y2="227.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="59.438" y1="257.18" x2="89.438" y2="256.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="85.438" y1="255.18" x2="86.438" y2="217.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="86.438" y1="221.18" x2="151.438" y2="215.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="146.438" y1="215.18" x2="220.438" y2="221.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="220.438" y1="221.18" x2="322.013" y2="222.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<path
d="M138.978,66.29c-12.74,30-35.83,48.89-51.59,42.2s-18.22-36.43-5.49-66.42C91.038,20.55,105.508,4.74,118.778,0l.8,20.2L135.778,1.07c13.68,8.5,15.29,36.75,3.2,65.22Z"
style="fill: #2f559d; stroke-width: 0px;" />
<polygon points="103.117 81.991 62.352 129.185 94.073 143.976 103.117 81.991"
style="fill: #2f559d; stroke-width: 0px;" />
<circle id="eye1" cx="131.438" cy="29.18" r="10" style="fill: #000; stroke-width: 0px;" />
<ellipse cx="83.438" cy="41.18" rx="16" ry="6" transform="translate(-9.143 50.473) rotate(-32)"
style="fill: #2f559d; stroke-width: 0px;" />
<ellipse cx="131.438" cy="77.18" rx="20" ry="7" transform="translate(19.202 180.31) rotate(-73)"
style="fill: #2f559d; stroke-width: 0px;" />
<path
d="M433.148,255.44c-.02.05-.03.11-.05.16l-30.97-2.03,15.47,16.17c-12.45,4.6-30.69,4.69-49.7-.76-31.33-8.98-52.89-29.61-48.17-46.06,4.71-16.46,33.93-22.52,65.25-13.54,31.33,8.98,52.89,29.61,48.17,46.06Z"
style="fill: #2f559d; stroke-width: 0px;" />
<polygon points="353.416 232.945 299.86 200.995 290.802 234.802 353.416 232.945"
style="fill: #2f559d; stroke-width: 0px;" />
<circle id="eye2" cx="410.438" cy="238.18" r="10" style="fill: #000; stroke-width: 0px;" />
<ellipse cx="377.438" cy="208.18" rx="7" ry="20" transform="translate(43.026 480.149) rotate(-68)"
style="fill: #2f559d; stroke-width: 0px;" />
<ellipse cx="370.438" cy="272.18" rx="16" ry="6" transform="translate(-87.945 237.661) rotate(-32)"
style="fill: #2f559d; stroke-width: 0px;" />
<line x1="318.438" y1="240.68" x2="325.587" y2="208.18"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
<line x1="103.117" y1="112.984" x2="77.676" y2="103.219"
style="fill: none; stroke: #96572d; stroke-width: 8px;" />
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性を使い、下記の zodiac11.html のソース（うお）より位置を移動しています。</li>
<li>26行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,26]">
</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['η Psc'] = {ra: '01 31 28.99', dec: '+15 20 45.0', mag: 3.62, fd: 99};
star['γ Psc'] = {ra: '23 17 09.49', dec: '+03 16 56.1', mag: 3.70, fd: 6};
star['ω Psc'] = {ra: '23 59 18.60', dec: '+06 51 48.9', mag: 4.03, fd: 28};
star['ι Psc'] = {ra: '23 39 56.82', dec: '+05 37 38.5', mag: 4.13, fd: 17};
star['ο Psc'] = {ra: '01 45 23.59', dec: '+09 09 27.5', mag: 4.26, fd: 110};
star['ε Psc'] = {ra: '01 02 56.66', dec: '+07 53 24.3', mag: 4.27, fd: 71};
star['θ Psc'] = {ra: '23 27 58.17', dec: '+06 22 44.8', mag: 4.27, fd: 10};
star['α Psc B'] = {ra: '02 02 02.80', dec: '+02 45 49.0', mag: 5.23, fd: 113};
star['30 Psc'] = {ra: '00 01 57.59', dec: '-06 00 50.3', mag: 4.37, fd: 30};
star['δ Psc'] = {ra: '00 48 40.90', dec: '+07 35 06.7', mag: 4.44, fd: 63};
star['ν Psc'] = {ra: '01 41 25.91', dec: '+05 29 15.4', mag: 4.45, fd: 106};
star['β Psc'] = {ra: '23 03 52.61', dec: '+03 49 12.3', mag: 4.48, fd: 4};
star['λ Psc'] = {ra: '23 42 02.88', dec: '+01 46 49.5', mag: 4.49, fd: 18};
star['τ Psc'] = {ra: '01 11 39.59', dec: '+30 05 23.0', mag: 4.51, fd: 83};
star['33 Psc'] = {ra: '00 05 20.15', dec: '-05 42 28.2', mag: 4.61, fd: 33};
star['ξ Psc'] = {ra: '01 53 33.34', dec: '+03 11 14.9', mag: 4.61, fd: 111};
star['χ Psc'] = {ra: '01 11 27.19', dec: '+21 02 04.8', mag: 4.66, fd: 84};
star['φ Psc'] = {ra: '01 13 44.94', dec: '+24 35 01.6', mag: 4.67, fd: 85};
star['υ Psc'] = {ra: '01 19 27.98', dec: '+27 15 50.7', mag: 4.74, fd: 90};
star['μ Psc'] = {ra: '01 30 10.94', dec: '+06 08 38.2', mag: 4.84, fd: 98};
star['27 Psc'] = {ra: '23 58 40.41', dec: '-03 33 20.9', mag: 4.88, fd: 27};
star['κ Psc'] = {ra: '23 26 55.91', dec: '+01 15 21.0', mag: 4.95, fd: 8};
star['19 Psc'] = {ra: '23 46 23.54', dec: '+03 29 12.7', mag: 4.95, fd: 19};
star['47 Psc'] = {ra: '00 28 02.84', dec: '+17 53 35.1', mag: 5.01, fd: 47};
star['7 Psc'] = {ra: '23 20 20.54', dec: '+05 22 53.2', mag: 5.05, fd: 7};
star['64 Psc'] = {ra: '00 48 58.71', dec: '+16 56 28.1', mag: 5.07, fd: 64};
star['29 Psc'] = {ra: '00 01 49.44', dec: '-03 01 38.9', mag: 5.13, fd: 29};
star['89 Psc'] = {ra: '01 17 47.98', dec: '+03 36 52.3', mag: 5.13, fd: 89};
star['82 Psc'] = {ra: '01 11 06.77', dec: '+31 25 29.2', mag: 5.15, fd: 82};
star['ζ Psc B'] = {ra: '01 13 45.17', dec: '+07 34 42.2', mag: 6.44, fd: 86};
star['91 Psc'] = {ra: '01 21 07.35', dec: '+28 44 18.2', mag: 5.23, fd: 91};
star['107 Psc'] = {ra: '01 42 29.95', dec: '+20 16 12.5', mag: 5.24, fd: 107};
star['ψ¹ Psc'] = {ra: '01 05 41.68', dec: '+21 27 55.7', mag: 5.55, fd: 74};
star['ρ Psc'] = {ra: '01 26 15.28', dec: '+19 10 20.4', mag: 5.35, fd: 93};
star['55 Psc'] = {ra: '00 39 55.55', dec: '+21 26 18.8', mag: 5.36, fd: 55};
star['57 Psc'] = {ra: '00 46 32.98', dec: '+15 28 32.2', mag: 5.36, fd: 57};
star['41 Psc'] = {ra: '00 20 35.86', dec: '+08 11 24.9', mag: 5.38, fd: 41};
star['52 Psc'] = {ra: '00 32 35.40', dec: '+20 17 40.0', mag: 5.38, fd: 52};
star['5 Psc'] = {ra: '23 08 40.84', dec: '+02 07 39.4', mag: 5.42, fd: 5};
star['2 Psc'] = {ra: '22 59 27.40', dec: '+00 57 47.1', mag: 5.43, fd: 2};
star['68 Psc'] = {ra: '00 57 50.15', dec: '+28 59 32.0', mag: 5.44, fd: 68};
star['20 Psc'] = {ra: '23 47 56.49', dec: '-02 45 41.8', mag: 5.49, fd: 20};
star['σ Psc'] = {ra: '01 02 49.09', dec: '+31 48 15.6', mag: 5.50, fd: 69};
star['94 Psc'] = {ra: '01 26 41.65', dec: '+19 14 26.0', mag: 5.50, fd: 94};
star['58 Psc'] = {ra: '00 47 01.43', dec: '+11 58 26.2', mag: 5.51, fd: 58};
star['80 Psc'] = {ra: '01 08 22.34', dec: '+05 39 00.8', mag: 5.51, fd: 80};
star['34 Psc'] = {ra: '00 10 02.18', dec: '+11 08 44.9', mag: 5.54, fd: 34};
star['π Psc'] = {ra: '01 37 05.96', dec: '+12 08 29.4', mag: 5.54, fd: 102};
star['ψ² Psc'] = {ra: '01 07 57.11', dec: '+20 44 21.6', mag: 5.56, fd: 79};
star['ψ³ Psc'] = {ra: '01 09 49.20', dec: '+19 39 30.2', mag: 5.57, fd: 81};
star['22 Psc'] = {ra: '23 51 57.83', dec: '+02 55 49.5', mag: 5.59, fd: 22};
star['72 Psc'] = {ra: '01 05 05.35', dec: '+14 56 45.6', mag: 5.64, fd: 72};
star['16 Psc'] = {ra: '23 36 23.35', dec: '+02 06 07.5', mag: 5.68, fd: 16};
star['51 Psc'] = {ra: '00 32 23.75', dec: '+06 57 19.6', mag: 5.69, fd: 51};
star['32 Psc'] = {ra: '00 02 29.76', dec: '+08 29 08.1', mag: 5.70, fd: 32};
star['44 Psc'] = {ra: '00 25 24.22', dec: '+01 56 23.0', mag: 5.77, fd: 44};
star['21 Psc'] = {ra: '23 49 27.48', dec: '+01 04 34.3', mag: 5.77, fd: 21};
star['66 Psc'] = {ra: '00 54 35.22', dec: '+19 11 18.4', mag: 5.80, fd: 66};
star['54 Psc'] = {ra: '00 39 22.09', dec: '+21 15 04.9', mag: 5.88, fd: 54};
star['53 Psc'] = {ra: '00 36 47.31', dec: '+15 13 54.3', mag: 5.89, fd: 53};
star['112 Psc'] = {ra: '02 00 09.02', dec: '+03 05 51.5', mag: 5.89, fd: 112};
star['14 Psc'] = {ra: '23 34 08.95', dec: '-01 14 51.1', mag: 5.91, fd: 14};
star['62 Psc'] = {ra: '00 48 17.34', dec: '+07 17 59.7', mag: 5.92, fd: 62};
star['24 Psc'] = {ra: '23 52 55.52', dec: '-03 09 19.4', mag: 5.93, fd: 24};
star['87 Psc'] = {ra: '01 14 07.65', dec: '+16 08 00.8', mag: 5.97, fd: 87};
star['60 Psc'] = {ra: '00 47 23.62', dec: '+06 44 27.5', mag: 5.98, fd: 60};
star['105 Psc'] = {ra: '01 39 40.77', dec: '+16 24 21.2', mag: 5.98, fd: 105};
star['97 Psc'] = {ra: '01 29 52.83', dec: '+18 21 20.4', mag: 6.01, fd: 97};
star['35 Psc'] = {ra: '00 14 58.78', dec: '+08 49 15.7', mag: 6.02, fd: 35};
star['73 Psc'] = {ra: '01 04 52.62', dec: '+05 39 22.7', mag: 6.03, fd: 73};
star['88 Psc'] = {ra: '01 14 42.40', dec: '+06 59 42.7', mag: 6.04, fd: 88};
star['48 Psc'] = {ra: '00 28 12.69', dec: '+16 26 42.4', mag: 6.05, fd: 48};
star['67 Psc'] = {ra: '00 55 58.52', dec: '+27 12 33.7', mag: 6.08, fd: 67};
star['59 Psc'] = {ra: '00 47 13.56', dec: '+19 34 43.3', mag: 6.11, fd: 59};
star['1 Psc'] = {ra: '22 54 59.47', dec: '+01 03 53.6', mag: 6.11, fd: 1};
star['36 Psc'] = {ra: '00 16 34.06', dec: '+08 14 24.7', mag: 6.12, fd: 36};
star['75 Psc'] = {ra: '01 06 33.62', dec: '+12 57 21.5', mag: 6.14, fd: 75};
star['3 Psc'] = {ra: '23 00 37.88', dec: '+00 11 09.0', mag: 6.22, fd: 3};
star['26 Psc'] = {ra: '23 55 07.78', dec: '+07 04 15.7', mag: 6.22, fd: 26};
star['78 Psc'] = {ra: '01 08 01.20', dec: '+32 00 43.9', mag: 6.23, fd: 78};
star['101 Psc'] = {ra: '01 35 46.44', dec: '+14 39 41.2', mag: 6.23, fd: 101};
star['42 Psc'] = {ra: '00 22 25.45', dec: '+13 28 56.8', mag: 6.25, fd: 42};
star['9 Psc'] = {ra: '23 27 14.77', dec: '+01 07 21.7', mag: 6.26, fd: 9};
star['109 Psc'] = {ra: '01 44 55.85', dec: '+20 05 00.3', mag: 6.27, fd: 109};
star['76 Psc'] = {ra: '01 06 11.20', dec: '+32 10 53.6', mag: 6.28, fd: 76};
star['25 Psc'] = {ra: '23 53 04.75', dec: '+02 05 26.3', mag: 6.29, fd: 25};
star['31 Psc'] = {ra: '00 02 24.17', dec: '+08 57 24.6', mag: 6.33, fd: 31};
star['77 Psc B'] = {ra: '01 05 51.42', dec: '+04 54 35.0', mag: 7.26, fd: 77};
star['13 Psc'] = {ra: '23 31 57.56', dec: '-01 05 09.3', mag: 6.39, fd: 13};
star['46 Psc'] = {ra: '00 27 58.48', dec: '+19 30 50.7', mag: 6.40, fd: 46};
star['15 Psc'] = {ra: '23 35 28.61', dec: '+01 18 47.5', mag: 6.47, fd: 15};
star['43 Psc'] = {ra: '00 24 38.15', dec: '+14 18 55.9', mag: 6.48, fd: 43};
star['61 Psc'] = {ra: '00 47 54.73', dec: '+20 55 31.1', mag: 6.51, fd: 61};
star['40 Psc'] = {ra: '00 19 56.28', dec: '+16 15 03.2', mag: 6.60, fd: 40};
star['38 Psc'] = {ra: '00 17 24.50', dec: '+08 52 34.8', mag: 6.66, fd: 38};
star['104 Psc'] = {ra: '01 39 15.39', dec: '+14 17 08.3', mag: 6.74, fd: 104};
star['45 Psc'] = {ra: '00 25 41.89', dec: '+07 41 28.4', mag: 6.77, fd: 45};
star['65 Psc'] = {ra: '00 49 53.20', dec: '+27 42 37.0', mag: 7.1, fd: 65};
star['95 Psc'] = {ra: '01 27 39.81', dec: '+05 21 11.2', mag: 7.01, fd: 95};
star['100 Psc'] = {ra: '01 34 51.61', dec: '+12 33 31.2', mag: 7.28, fd: 100};
let edge = [['σ Psc', 'τ Psc'], ['τ Psc', 'υ Psc'], ['υ Psc', 'φ Psc'], ['φ Psc', 'ψ¹ Psc'], ['ψ¹ Psc', 'χ Psc'], ['χ Psc', 'η Psc'], ['η Psc', 'ο Psc'], ['ο Psc', 'α Psc B'], ['α Psc B', 'ν Psc'], ['ν Psc', 'ε Psc'], ['ε Psc', 'δ Psc'], ['δ Psc', 'ω Psc'], ['ω Psc', 'θ Psc'], ['θ Psc', 'γ Psc'], ['γ Psc', 'κ Psc'], ['κ Psc', 'λ Psc']];
let offsetX, offsetY;
let wrap = true;
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 = 80, dy = 65;
let g = Snap.select('#Pisces');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin + 90;
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', 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 44)" style="font-family: 'Curlz MT'; font-size: 32px;">Pisces</text>
s.text(500, 44 + 32, 'Pisces').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 500 64)" style="font-family: 'Segoe UI Symbol'; font-size: 96px;">♓</text>
s.text(500, 64 + 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);
}
このプログラムは以下の情報またはソフトウェアを参照しています。
