Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/07/22 (日)

和時計(不定時法時計)

| 00:15 | 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前にちょこっと書いていた、時計的なものの件。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180427/1524800687

 なでしこ1にはあるけど、なでしこ3には実装されていない二十四節気取得関数を作ったりして作ろうとしていたのは和時計でした。

 別のところで公開するように作ったんだけど、なかなかよく出来たように思うから、やっぱりこっちにも載せとく~♪

 江戸時代の不定時法による時刻を表示するものです。

 和時計には、昼と夜とで針の進む早さを変えるものと、目盛の隔を変えるものがありますが、わたしの能力的な問題と、資料としては昼夜比が目で見て分かった方が良いので後者を採用。

 サインとコサインの呪文を覚えた!(むしろ覚えてなかったんか;)

#-----------------------------------------------------------------------
# 不定時法時計
#-----------------------------------------------------------
#---データ----------
節気=配列。二十四節気データ=配列。Noは。
二十四節気URL=「../data/24sekki.csv」
データ=[{"D":6.3811,"A":0.242778},{"D":21.1046,"A":0.242765},{"D":4.8693,"A":0.242713},{"D":19.7062,"A":0.242627},{"D":6.3968,"A":0.242512},{"D":21.4471,"A":0.242377},{"D":5.6280,"A":0.242231},{"D":20.9375,"A":0.242083},{"D":6.3771,"A":0.241945},{"D":21.9300,"A":0.241825},{"D":6.5733,"A":0.241731},{"D":22.2747,"A":0.241669},{"D":8.0091,"A":0.241642},{"D":23.7317,"A":0.241654},{"D":8.4102,"A":0.241703},{"D":24.0125,"A":0.241786},{"D":8.5186,"A":0.241898},{"D":23.8896,"A":0.242032},{"D":9.1414,"A":0.242179},{"D":24.2487,"A":0.242328},{"D":8.2396,"A":0.242469},{"D":23.1189,"A":0.242592},{"D":7.9152,"A":0.242689},{"D":22.6587,"A":0.242752}];
日出没=[{"明":"6:16","暮":"17:17"},{"明":"6:14","暮":"17:30"},{"明":"6:05","暮":"17:45"},{"明":"5:51","暮":"17:59"},{"明":"5:33","暮":"18:12"},{"明":"5:12","暮":"18:25"},{"明":"4:50","暮":"18:38"},{"明":"4:29","暮":"18:52"},{"明":"4:10","暮":"19:06"},{"明":"3:55","暮":"19:20"},{"明":"3:47","暮":"19:32"},{"明":"3:47","暮":"19:38"},{"明":"3:54","暮":"19:38"},{"明":"4:05","暮":"19:29"},{"明":"4:18","暮":"19:15"},{"明":"4:32","暮":"18:55"},{"明":"4:45","暮":"18:32"},{"明":"4:57","暮":"18:09"},{"明":"5:09","暮":"17:48"},{"明":"5:21","暮":"17:29"},{"明":"5:35","暮":"17:14"},{"明":"5:48","暮":"17:05"},{"明":"6:01","暮":"17:03"},{"明":"6:11","暮":"17:07"},{"明":"6:00","暮":"18:00"}]
刻="卯","六","明"],["辰","五","朝"],["巳","四","昼"],["午","九","昼"],["未","八","昼"],["申","七","夕"],["酉","六","暮"],["戌","五","夜"],["亥","四","夜"],["子","九","夜"],["丑","八","暁"],["寅","七","暁"]]
旧月名=["睦月","如月","弥生","卯月","皐月","水無月","文月","葉月","長月","神無月","霜月","師走"]
漢数字=["一","二","三","四","五","六","七","八","九","十"]
月名=。日日=表示節板=「今日」
#-----------------------------------------------------------

#---説明----------
プログラム説明=「【プログラム説明】」
不定時法=「【不定時法とは】」
読み方=「【和時計の読み方】」
「#btn」にDOM親要素設定。
「プログラム説明」のボタン作成して、説明ボタン代入。
「不定時法とは」のボタン作成して、不定時法ボタン代入。
「和時計の読み方」のボタン作成して、読方ボタン代入。
「詳細データ」のボタン作成して、詳細ボタン代入。
#-----------------------------------------------------------

#---画面設定----------
「#clock」にDOM親要素設定。
「現在時刻(定時法): 」のラベル作成エディタ作成して、定時法に代入。
「#date」に「 」をDOMテキスト設定。
「#sekki」に「 」をDOMテキスト設定。
「#sekki-date」に「 」をDOMテキスト設定。
#-----------------------------------------------------------

#---描画設定----------
「#tokei」へ描画開始。
カメ描画先は「#tokei」
カメ画像URL=「../image/hari.png」

#時計のサイズを指定
時計サイズ=350
外枠太=5
マージン=20
半径=時計サイズ/2
中点=時計サイズ/2+マージン
#-----------------------------------------------------------

#---二十四節気データダウンロード----------
二十四節気URLへGET送信した時には
  対象CSV取得し、それを二十四節気データへ代入。
  24
    節気[回数-1]=配列。
    節気[回数-1]=二十四節気データ[回数-1][0]
  ここまで。

    #---セレクトボックス作成---------
    節気セレクト=「<select id="sekki-select" name="sekki-select">
    <option>今日</option>
    」
    数=0
    節気を反復
    節気セレクト=「<option value="{数}">{節気[数]}</option>」を節気セレクトに一行追加。
    数=数+1。
    ここまで。
    節気セレクト=「<option>定時法</option></select>」を節気セレクトに一行追加。
    「#select」にDOM親要素設定。
    節気セレクトを「#select」にDOM_HTML設定。
    「#sekki-select」の「onchange」に「節板変更」をDOMイベント設定。
    #-----------------------------------------------------------

  #---描画----------
    カメ作成。カメ非表示。
  0にカメ速度設定。
  今日の二十四節気No取得し、それをNoに代入。

  文字盤作成。Noで節板作成。時計表示。カメ表示。
  「時計表示」を1秒毎。
    #-----------------------------------------------------------
ここまで。

#-----------------------------------------------------------

#---ボタンイベント----------
説明ボタンをクリックした時には、
  プログラム説明を言うここまで。
不定時法ボタンをクリックした時には、
  不定時法を言うここまで。
読方ボタンをクリックした時には、
  読み方を言うここまで。
詳細ボタンをクリックした時には、
  説明文=。
  12
    仮=刻[回数-1][3]。
    仮=仮の6から3だけ文字削除。
    仮=「{刻[回数-1][2]}{刻[回数-1][1]}ツ : {仮}」
    説明文=説明文に仮を一行追加。
  ここまで。
  説明文を言うここまで。

「#sekki」をクリックした時には、
  説明文=。
  説明文=説明文に「{節気[No]}({二十四節気データ[No][1]}) {二十四節気データ[No][2]}」を一行追加。
  説明文=説明文に「{二十四節気データ[No][3]}{二十四節気データ[No][4]} {二十四節気データ[No][5]}(暦便覧)」を一行追加。
  もし、二十四節気データ[No][4]=「節」ならば、節中=「正節」。
  違えば、節中=「中気」
  説明文=説明文に「{二十四節気データ[No][6]}の月の{節中}。{二十四節気データ[No][8]}」を一行追加。
  説明文=説明文に「天文学的には、太陽が黄経{二十四節気データ[No][7]}度の点を通過する時。」を一行追加。
  説明文を言うここまで。
#-----------------------------------------------------------

●時計表示
  もし=「00:00:00」かつ表示節板=「今日ならば、
    [0,0,400,400]の描画クリア。カメ非表示。
    文字盤作成。Noで節板作成。カメ表示。
  ここまで。
  定時法にをテキスト設定。
  を「:」で区切る。
  時=それ[0]。分=それ[1]。
  時角度=(時/24*360)+((分/60)*15)
  [中点,中点]へカメ起点移動。
  時角度にカメ角度設定。
ここまで。

●節板変更
  # セレクトボックスのvalueを取得する
  表示節板=「#sekki-select」の「value」をDOM属性取得。
  もし表示節板=「今日ならば、
    今日の二十四節気No取得し、それをNoに代入。
  違えばもし表示節板=「定時法」ならば、
    No=24。
  違えば、
    No=表示節板。
    今年の節気[No]で二十四節気日付取得し、日付に代入。
    日付を「/」で区切る。月=それ[0]。日=それ[1]。
    月と日で日付漢字化。
  ここまで。
  [0,0,400,400]の描画クリア。カメ非表示。
  文字盤作成。Noで節板作成。カメ表示ここまで。

●文字盤作成
  外枠太に太設定。白色に塗色設定。黒色線色設定。
  [中点,中点]へ半径の描画。
  3に太設定。
  [中点,中点]へ半径-50の描画。
  [中点,中点]へ半径-75の描画。
  1に太設定。
  [中点,中点]へ半径-95の描画。
  灰色に塗り色設定。「10px Aria」に描画フォント設定。
  24
   [(半径+10)*COS(DEG2RAD(15*回数-90))+中点-外枠太,(半径+10)*SIN(DEG2RAD(15*回数-90))+中点+外枠太]へ回数文字描画
  ここまで。
ここまで。

●(Noで)節板作成
  もし、No=24ならば、
    「#date」に「定時法表示」をDOMテキスト設定。
    「#sekki」に「 」をDOMテキスト設定。
    「#sekki-date」に「一日を十二等分・一時は二時」をDOMテキスト設定。
  違えば、
    「#date」に「{月名} {日日}日」をDOMテキスト設定。
    「#sekki」に節気[No]をDOMテキスト設定。
    今年の節気[No]を二十四節気日付取得し、節気日付に代入。
    もし、No=23ならば、
      今年の節気[0]を二十四節気日付取得し、次節気日付に代入。
    違えば、
      今年の節気[No+1]を二十四節気日付取得し、次節気日付に代入。
    ここまで。
    次節気日付=「{今年}/{次節気日付}」に「-0/0/1」を日付加算。
    次節気日付=次節気日付を「/」で区切る。
    2
      一時=次節気日付[回数]の1だけ文字左部分。
      もし、一時=「0」ならば、次節気日付[回数]=次節気日付[回数]の1から1だけ文字削除。
    ここまで。
    次節気日付=「{次節気日付[1]}/{次節気日付[2]}」
    「#sekki-date」に「({節気日付}~{次節気日付})」をDOMテキスト設定。
  ここまで。

  明六=日出没[No]["明"]。「#ake6」に明六をDOMテキスト設定。
  暮六=日出没[No]["暮"]。「#kure6」に暮六をDOMテキスト設定。
  明六を「:」で区切る。
  明六時=それ[0]。明六分=それ[1]。
  暮六を「:」で区切る。
  暮六時=それ[0]。暮六分=それ[1]。

  明六正刻角度=(明六時/24*360)+((明六分/60)*15)
  暮六正刻角度=(暮六時/24*360)+((暮六分/60)*15)
  昼一刻長=(暮六正刻角度-明六正刻角度)/6。
  昼長=(86400/(360/昼一刻長))*6。「#hiru」に「漢字」で昼長を時計算をDOMテキスト設定。
  昼一刻=(86400/(360/昼一刻長))。「#hiru1」に「漢字」で昼一刻を時計算をDOMテキスト設定。
  夜一刻長=(360-(暮六正刻角度-明六正刻角度))/6。
  夜長=(86400/(360/夜一刻長))*6。「#yoru」に「漢字」で夜長を時計算をDOMテキスト設定。
  夜一刻=(86400/(360/夜一刻長))。「#yoru1」に「漢字」で夜一刻を時計算をDOMテキスト設定。
  明六=0&明六。
  詳細データ作成(明六,昼一刻,0)
  詳細データ作成(暮六,夜一刻,6)
  詳細データ=詳細データをCSV取得。

  明六初刻角度=明六正刻角度-(夜一刻長/2)
  暮六初刻角度=暮六正刻角度-(昼一刻長/2)
  朝五初刻角度=明六初刻角度+昼一刻長/2+夜一刻長/2
  夜五初刻角度=暮六初刻角度+昼一刻長/2+夜一刻長/2

  黒色塗り色設定。3に太設定。
  明六正刻角度で昼夜分離描画。
  暮六正刻角度で昼夜分離描画。
  明六初刻角度で刻区切描画。
  明六初刻角度+(昼一刻長/4+夜一刻長/4)で0を文字盤描画。
  暮六初刻角度で刻区切描画。
  暮六初刻角度+(昼一刻長/4+夜一刻長/4)で6を文字盤描画。
  5
    朝五初刻角度+(昼一刻長*(回数-1))で刻区切描画。
    朝五初刻角度+(昼一刻長*(回数-1))+(昼一刻長/2)で(回数)を文字盤描画。
    夜五初刻角度+(夜一刻長*(回数-1))で刻区切描画。
    夜五初刻角度+(夜一刻長*(回数-1))+(夜一刻長/2)で(回数+6)を文字盤描画。
  ここまで。
  24
    もし、(回数-1)%4=0ならば、2に太設定。
    違えば、1に太設定。
    明六正刻角度+(昼一刻長/4*(回数-1))で細区切描画。
    暮六正刻角度+(夜一刻長/4*(回数-1))で細区切描画。
  ここまで。
ここまで。

●(角度で)昼夜分離描画
  x=(半径-75)*COS(DEG2RAD(角度-90))+中点
  y=(半径-75)*SIN(DEG2RAD(角度-90))+中点
  [中点,中点]から[x,y]まで描画
ここまで。
●(角度で)刻区切描画
  x1=(半径-94)*COS(DEG2RAD(角度-90))+中点
  y1=(半径-94)*SIN(DEG2RAD(角度-90))+中点
  x2=(半径)*COS(DEG2RAD(角度-90))+中点
  y2=(半径)*SIN(DEG2RAD(角度-90))+中点
  [x1,y1]から[x2,y2]まで描画。
ここまで。
●(角度で)細区切描画
  x1=(半径-94)*COS(DEG2RAD(角度-90))+中点
  y1=(半径-94)*SIN(DEG2RAD(角度-90))+中点
  x2=(半径-75)*COS(DEG2RAD(角度-90))+中点
  y2=(半径-75)*SIN(DEG2RAD(角度-90))+中点
  [x1,y1]から[x2,y2]まで描画。
ここまで。
●(角度でNoを)文字盤描画
  「bold 36px serif」に描画フォント設定。
  x=(半径-25)*COS(DEG2RAD(角度-90))+中点-18
  y=(半径-25)*SIN(DEG2RAD(角度-90))+中点+15
  [x,y]へ刻[No][0]を文字描画。
  「bold 18px serif」に描画フォント設定。
  x=(半径-62)*COS(DEG2RAD(角度-90))+中点-9
  y=(半径-62)*SIN(DEG2RAD(角度-90))+中点+6
  [x,y]へ刻[No][1]を文字描画ここまで。

●詳細データ作成(六ツ,一刻,A)
  一刻=「デジタル」で一刻を時計算。
  時=「{六ツ}:00」。
  刻[A][3]=時。
  5
   C=回数
   (回数)
     時=時に「+{一刻}」を時間加算。
   ここまで。
   刻[A+C][3]=時。
  ここまで。
ここまで。
#-----------------------------------------------------------
●日付加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「/」で区切る。
  y=A@1/12を切捨。m=A@1%12。
  S=Sを「/」で区切る。
  もし、記号=「+」ならば、
    y=y+(S@1+m)/12を切捨。
    S@0=S@0+A@0+y。
    S@1=(S@1+m)%12。
  違えば、
    S@0=S@0-A@0-y。
    S@1=S@1-m。
  ここまで。
  もし、S@1=0ならば、
    S@1=12。S@0=S@0-1。  #ここね
  ここまで。
  d=(A@2)*(24*60*60)。
  年=S@0。月=S@1。日=S@2。
  S=「{年}/{月}/{日}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+d。
  違えば、S=S-d。
  S=Sを日時変換。
  S=Sの10だけ文字左部分。
  Sで戻るここまで。

●時間加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「:」で区切る。
  時=(A@0)*60*60。分=(A@1)*60。秒=(A@2)。
  S=「{今日} {S}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+時+分+秒。
  違えば、S=S-時-分-秒。
  S=Sを日時変換。
  S=Sの8だけ文字右部分。
  Sで戻るここまで。

●(SでAを)時計算
  hh=(A/3600)を切捨。
  mm=((A-(hh*3600))/60)を切捨。
  ss=(A)-(hh*3600)-(mm*60)を切捨。
  もし、S=「漢字」ならば、
   もし、(hh=0)かつ(mm=0)ならば、
     それは、「{ss}秒」
   違えばもし、hh=0ならば
     それは「{mm}分{ss}秒」。
   違えば、
     それは「{hh}時{mm}分{ss}秒」。
   ここまで。
  違えば、
   それは、「{hh}:{mm}:{ss}」
  ここまで。
ここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
  仮表=配列。
  S=Sを改行区切る。
  Sを反復
    それを「,」で区切る。
    仮表にそれ配列追加。
  ここまで。
  仮表で戻るここまで。
#-----------------------------------------------------------
●(日付の)二十四節気No取得
  日付を「/」で区切る。
  年=それ[0]
  月=それ[1]。
  日=それ[2]。
  月と日で日付漢字化。
  もし、月<3ならば、Y=年-1。
  違えばY=年。
  もし、日>15ならば、数=月*2-1。
  違えば、数=月*2-2
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  もし、(「{年}/{月}/{日}」をUNIXTIME変換)≦(日付をUNIXTIME変換)ならば、
    数で戻る。
  違えば、
    もし、数=0ならば、23で戻る。
    違えば、数-1で戻る。
  ここまで。
ここまで。

●(月と日で)日付漢字化
  月名=旧月名[月-1]
  もし、日<10ならば、
    日日=漢数字[日-1]
  違えば、
    もし、(日の1だけ文字左部分)=1ならば、十位=。
    違えば、十位=漢数字[(日の1だけ文字左部分)-1]。
    もし、(日の1だけ文字右部分)=0ならば、一位=。
    違えば、一位=漢数字[(日の1だけ文字右部分)-1]。
    日日=「{十位}十{一位}」。
  ここまで。
ここまで。

●(年のSを|Sで)二十四節気日付取得
  年を「/」で区切る。
  年=それ[0]
  数=節気からSを配列検索。
  もし、数<4ならばY=年-1。
  違えばY=年。
  月=((数/2)を切捨)+1。
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  「{月}/{日}」で戻るここまで。

●(DとAでYの)節気計算
  INT(D+(A*(Y-1900))-INT((Y-1900)/4))
ここまで。
#-----------------------------------------------------------------------

http://www.geocities.jp/snowdrops890/nako3/wadokei_1_03.html

 針はカメになっています。

 CSSを使うより楽で助かった♪

クジラ飛行机クジラ飛行机2018/08/28 14:48かっこよすぎる!

雪乃☆雫雪乃☆雫2018/08/29 02:45きゃあぁ、ありがとうございます(≧▽≦)

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180722