👨🏿‍🍳 😈 👨‍🚒 LibCanvas：星への道 🚳 👷 😒

6か月前、私はオンラインアプリケーション「Starry Sky Map」を書くことにしました。私たちの多くは星空のこのまさに地図を見たことがあり、おそらくそれが注目を集めたと思います。

JSに似たようなものを実装するのは面白いと思いました。十分に考え抜かれた構文のため、既製のLibCanvasライブラリを部分的に使用することが決定されました。

最初に遭遇した問題は、かなり多数の星であり、高精度で表示する必要がありました-約6,000個あります。ここでは、単純なPHPスクリプトを使用して、星カタログのテキストファイルからjsの配列を生成することにしました。

LibCanvasを使用する場合

実際、質問は次のようになりました。 LibCanvasを使用する価値は常にありますか？実際には、マップ自体に加えて、プロジェクトは惑星の目に見えるサイズのコラージュを描画する必要があります。これには、別個のライブラリの作成が含まれます。このタスクでは、LibCanvasを使用しないことにしました。

数学および天文学関数のライブラリ

このプロジェクトではさまざまな数学関数を繰り返し使用する必要があったため、これらの同じ関数のライブラリを作成することが決定されました。

実際には、ここに結果があります。

そこに、それぞれ：

度引数を持つ三角関数
ユリウス日をグレゴリオ日に変換する関数
水平/赤道座標を変換するための関数
大気屈折計算
その他（月の名前、現在の時刻の取得など）

データディレクトリ

オブジェクトのデータベースは主にここにあります

惑星と彗星の軌道の要素もここにあります。

アスタリスク表示

for (var i = 0; i < (stars.length); i++){ var decr=stars[i][1]; // var tr=sr-stars[i][0]; //  var zl=atmospheric_refraction(equatorial_to_horizontal(decr, tr, phi)[1]);//  var mag=Math.round(stars[i][2]/100); // if (zl<90 && mag<magmax){// ,    var r_star=k1*1+k2*(magmax-mag); var Az=equatorial_to_horizontal(decr, tr, phi)[0]; // var cor1=to_xy(zl,Az);     var x=(cor1[0]*1).toFixed(0); //  var y=(cor1[1]*1).toFixed(0); // /*      */ if (mag<1.5){ var circl3 = new LC.Circle( x,y,r_star*2); ct.fill(circl3, ct .createRadialGradient( new LC.Circle(x, y, 1), new LC.Circle(x, y, r_star*2)) .addColorStop({ '0.0': 'rgba(200,200,200,0.4)', '1.0': 'rgba(200,200,200,0)' })); var circl = new LC.Circle( x,y,r_star*0.8); //  ct.fill(circl, '#FFF');//  }else{ /*       */ var circl = new LC.Circle( x,y,r_star); //  ct.fill(circl, '#FFF');//  } m++; } }

惑星

地図表示

惑星を黄色で強調表示することにしました（現実に適応）。惑星の位置を計算し、ライブラリを作成するには

コラージュマッピング

ここでも、少し作業をしなければなりませんでした。最後に、コラージュを表示するための関数をいくつか作成しました。

惑星の座標を持つテーブルも下に形成されました。

headファイルに惑星を表示するためのコード：

 //============================================================================================================ for (var i = 0; i < (planets.length); i++){ var tyu=planetposition(planets[i][0], planets[i][1], jdn, planets[i][3], planets[i][4], planets[i][5], planets[i][6], planets[i][7], planets[i][8],planets[i][9],planets[i][10]) if (i==0){ sundelta=tyu[1] } if (planetinfo1==1){ //  "  " res+="<tr><td>"+planets[i][8]+"</td><td>"+deltafloor(tyu[1])+"</td><td>"+alphafloor(tyu[0])+"</td><td>"+(tyu[3]).toFixed(3)+"</td><td>"+(tyu[2]).toFixed(1)+"</td><td>"+(2*tyu[4]).toFixed(1)+"</td></tr>"; } var zl=atmospheric_refraction(equatorial_to_horizontal(tyu[1], sr-15*tyu[0], phi)[1]);//  if (i==0){ sunz=zl } //alert(tyu) if (i>0){ draw(ctx, tyu[4], i,tyu[3],planets[i][8], date); } if (zl<90){ var Az=equatorial_to_horizontal(tyu[1], sr-15*tyu[0], phi)[0]; // var cor1=to_xy(zl,Az); var x=(cor1[0]*1).toFixed(0);//  var y=(cor1[1]*1).toFixed(0);// var R=Math.round((9-1*tyu[2])*kp2); if (R>10){ R=10 var R1=20*R if (planets[i][8]==''){ //     R=7 sunx=x suny=y } }else{ var R1=kp1*R } var circl = new LC.Circle( x,y,R); //   var circl2 = new LC.Circle( x,y,R1); //   ct.fill(circl, 'rgba('+planets[i][11][0]+','+planets[i][11][1]+','+planets[i][11][2]+',1)'); //   //   ct.text({ text: planets[i][8], padding: [ 1*y, 1*x], size:15, color:'rgba('+planets[i][11][0]+','+planets[i][11][1]+','+planets[i][11][2]+',1)' }); //alert(planets[i][11][0]) //  ----- ct.fill(circl2, ct .createRadialGradient( new LC.Circle(x, y, 1), new LC.Circle(x, y, R1)) .addColorStop({ '0.0': 'rgba('+planets[i][11][0]+','+planets[i][11][1]+','+planets[i][11][2]+',0.85)', '1.0': 'rgba('+planets[i][11][0]+','+planets[i][11][1]+','+planets[i][11][2]+',0)' }));/**/ //---------- } }

月

私は苦しむことを決心し、負荷がすでに高いので、位相で月を描きませんでした。

月の位置を表示するために、インターネットの郊外で見つけたJan Meusの既成のアルゴリズムを使用したので、少し変更して再投稿することにしました： github

彗星と小惑星

ここでは、この機能がどれほど必要かを言うのが難しいため、私はまだ岐路に立っています。原則として、彗星と小惑星は観測するには弱すぎます。したがって、私は最も明るい彗星のためのセクションだけを作りました。実際、放物線軌道で彗星の位置を計算するためのライブラリが書かれました： github

問題と解決策

主な問題は、特に高速スクロールでのプログラムの遅さです。ここで何かをするのは難しく、おそらくアルゴリズムをトリミングする価値がありますが、これは私の意見です...実際、私はめったに増加を使用しないので、このバグを感じることはめったにありません。

プログラムはこちら： http : //astrokot.ru/planetarium/dev/planetarium.html

LibCanvas：星への道