Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017-08-31

なでしこ3でバイオリズム表示~0.1.0

| 00:24

 気が付いたら、なんかもう九月だってw(゜o゜)w

 それはさておき、バイオリズムです。

 ボタンが使えなかったので、あんまりかっこよくはないけど、「尋ねる」と「二択」で開いた時に生年月日と表示月を設定することにして、とりあえず完成させてUPしようとしていたら、なななんとなでしこ3がバージョンアップしていたよ!

 イベントが使えるようになってます!!!

 ・・・でっでも、今日のところはこんな感じ~;;;

 イベントの使い方を学んだら、こっちもばーじょんあっぷだ~☆

    <script type="なでしこ">
#--------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------
「canvas#cv」のDOM要素取得。
それへ描画開始。
白色線色設定。白色塗り色設定。 #標準は透明ラシイので白で塗りつぶす。
[0,0,640,480]へ四角描画。

#宣言
当日=今日。当日=当日の2だけ文字右部分。 #「今日」は直接文字列として扱えない表示年=今年表示月=今月表示年月=「{表示年}年{表示月}月」
基準日=「{表示年}/{表示月}/01」
月末=31。

#文字描画
「12px MS ゴシック」に描画フォント設定。
文字高さ=14。黒色塗り色設定。  #文字色は「塗り色設定」で変更出来る。
高調期=「高調期」を文字列分解。要注意=「要注意」を文字列分解。低調期=「低調期」を文字列分解。
3
 C=回数-1。
 [2,40-4+文字高さ*回数]へ高調期@Cを文字描画。
 [2,5*40+16+文字高さ*回数]へ要注意@Cを文字描画。
 [2,10*40-4+文字高さ*回数]へ低調期@Cを文字描画ここまで。
「bold 16px MS ゴシック」に描画フォント設定。
青色塗り色設定。[440,30]へ「■身体」を文字描画赤色塗り色設定。[440+60,30]へ「■感情」を文字描画緑色塗り色設定。[440+60*2,30]へ「■知性」を文字描画。
枠描画。

#ローカルストレージ
生年月日=「生年月日」をローカルストレージ読むもし、生年月日=undefinedならば、生年月日登録。 #「undefined」は「」で括ったらダメ。
違えば、
  「生年月日は『{生年月日}』でよろしいですか?」で二択。
  もしそれいいえならば、生年月日登録。
ここまで。

「今月のバイオリズムでよろしいですか?」で二択もしそれいいえならば、
  「表示年月は?{改行}(yyyy/mm)」と尋ねる。
  一時=それを「/」で区切る。
  表示年=一時@0。表示月=一時@1。
  表示年月=「{表示年}年{表示月}月」
  基準日=「{表示年}/{表示月}/01」
ここまで。
バイオリズム表示。

//「生年月日」をローカルストレージキー削除。
#-----------------------------------------------------------
●生年月日登録
  「生年月日は?{改行}(yyyy/mm/dd)」と尋ねる。
  「生年月日」にそれをローカルストレージ保存。
  生年月日=それここまで。
#-----------------------------------------------------------
●枠描画
 白色線色設定。白色塗り色設定。
 [20,40,620,440]へ四角描画。

 黄色線色設定。黄色塗り色設定。
 [20,(5*40+20),600,40]へ四角描画。

 31
  もし、(回数=1)と(回数=31)のORならば、
    黒色線色設定。3に太設定。
  違えば、
    線色RGB(204,204,204)。線色線色設定。1に太設定。
  ここまで。
  [((回数-1)*20+20),40]から[((回数-1)*20+20),440]へ描画。
 ここまで。

 11
  もし、(回数=1)と(回数=11)のORならば、
    黒色線色設定。3に太設定。
  違えばもし、(回数=6)ならば、
    黒色線色設定。1に太設定。
  違えば、
    線色RGB(204,204,204)。線色線色設定。1に太設定。
  ここまで。
  [20,((回数-1)*40+40)]から[620,((回数-1)*40+40)]へ描画。
 ここまで。

 黒色塗り色設定。「14px MS ゴシック」に描画フォント設定。
 (月末)
  [((回数-1)*20+15),460]へ回数文字描画。
 ここまで。
ここまで。

●バイオリズム表示
  一時=生年月日を「/」で区切る。
  生年=一時@0。生月=一時@1。生日=一時@2。
  誕生日=「{生年}年{生月}月{生日}日」。

  もし表示年%4=0でなければ、閏年=いいえ。
  違えばもし表示年%100=0でなければ、閏年=はい。
  違えばもし表示年%400=0でなければ、閏年=いいえ。
  違えば、閏年=はい。

  月末=31。
  もし表示月=2ならば、
    もし、閏年=はいならば、月末=29。
    違えば、月末=28。
  違えばもし、(表示月=4)と(表示月=6)のORならば、
    月末=30。
  違えばもし、(表示月=9)と(表示月=11)のORならば、
    月末=30。
  ここまで。

  「DIV#title」のDOM要素取得。
  「  {誕生日} 生まれの方の {表示年月} のバイオリズム」をDOMテキスト設定。
  枠描画。バイオリズム描画。
ここまで。

●バイオリズム描画
 3に太設定。
 31
  日付=「{表示年}/{表示月}/{回数}」
  結果=生年月日と日付でバイオリズム計算。
  身体2=(結果@0)*2。
  感情2=(結果@1)*2。
  知性2=(結果@2)*2。
  もし回数>1ならば、
    青色線色設定。[(20*(回数-1)),((-身体1)+240)]から[(20*回数),((-身体2)+240)]へ描画。
    赤色線色設定。[(20*(回数-1)),((-感情1)+240)]から[(20*回数),((-感情2)+240)]へ描画。
    緑色線色設定。[(20*(回数-1)),((-知性1)+240)]から[(20*回数),((-知性2)+240)]へ描画。
  ここまで。
  もし、(表示年=今年ならば、
   もし、(表示月=今月ならば、
    もし、(回数=当日)ならば、
     青色線色設定。青色塗り色設定。[(20*回数),((-身体2)+240)]へ5の描画。
     赤色線色設定。赤色塗り色設定。[(20*回数),((-感情2)+240)]へ5の描画。
     緑色線色設定。緑色塗り色設定。[(20*回数),((-知性2)+240)]へ5の描画。
    ここまで。
   ここまで。
  ここまで。
  身体1=身体2。
  感情1=感情2。
  知性1=知性2。
 ここまで。
ここまで。
#-----------------------------------------------------------
●バイオリズム計算(AとBで)
  日数=AとBの日数差。
  結果=配列。  #新しい配列代入する時は「配列」で初期化が必要。
  結果@0=SIN(日数/23*PI*2)*100。
  結果@1=SIN(日数/28*PI*2)*100。
  結果@2=SIN(日数/33*PI*2)*100。
  結果で戻るここまで。
#-----------------------------------------------------------
●日数差(AとBの|AからBまでの)
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(24*60*60)。
  もし、結果>0ならば、結果を切捨で戻る。
  違えば、結果をCEIL戻る。 #なぜか「切り上げ」が出来ないのでCEILを使う。→0.1.5ではできるようになってる!
ここまで。

●今月
  今日の6から2をMID整数変換戻る。 #なぜか「文字抜き出し」が出来ないのでMIDを使う。
ここまで
#-----------------------------------------------------------
    </script>

    <H1>なでしこ3でバイオリズム表示~0.1.0</H1>
    <HR>
    <B><DIV id="title"></DIV></B>
    <canvas id="cv" width=640 height=480></canvas>

http://www.geocities.jp/snowdrops890/wnako3_test/Biorhythm0_1_0.html


 わざわざ「日付加算」ができるようにしてみたりしたケド、よく考えたら、基準日を月初めにしたいだけだったので、は別に全然無くても良かった(^▽^;

 「描画フォント設定」は、フォントサイズとフォント名は省略できない順番が決まっており、フォントスタイル→フォントサイズ→フォント名の順で書かないと無効になるCSSの仕様ラシイ?)

 文字色の設定は、「塗り色設定」でできる。

 ところで、なでしこのことじゃないけど、HTML5では、<BODY>タグのbackground属性なんかは、廃止されてしまったんだね。

 ちゃんと、全部スタイルシートを使えよってことなんだね(><;

 スタイルシートが全然分からないので、てすとページの背景色を変えることさえ出来ないってゆう・・・。しくしくしく。

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

2017-08-28

ローカルストレージを使うよ!

| 14:17

 てゆうか、ローカルストレージってなんすか;

 ・・・っと思っていたら、これcanvas同様、HTML5から追加になったヤツみたい。

 cookieよりも大容量で、有効期限も無いとゆう、便利機能ラシイ。

 もっとも、cookieのことも別によく知らないし、とりあえず、ようするにバイオリズムで毎生年月日を入力するのは面倒だから、覚えさせておきたいなー・・・なんてコトが、なでしこ3でも出来る的な?

 こういったことは、なんとなく、とてもめんどーそうに思ってたけど、実際にやってみたら、わざわざ記事にすることなど何も無いくらいに、ものすごくカンタンでした♪

 しかし、とりあえず、折角新しいことを学んだので、ココへ記しておく。

#ローカルストレージの使い方
「名前は?」と尋ねる。
「名前」にそれをローカルストレージ保存。
ローカルストレージキー列挙して言う。
「名前」をローカルストレージ読むそれ言う。

「名前」のローカルストレージキー削除。
ローカルストレージキー列挙して言う

 有効期限が無いとゆうことは、消さない限りはエディタのページに「名前」というキーが残ってしまうので、削除して終わっていますが、残しておけば、次開いた時にもの名前を引っ張り出して使うことが出来るとゆうことだね。

 こんな感じ?

    <script type="なでしこ">
#-----------------------------------------------------------
名前=「名前」をローカルストレージ読む。
名前=それもし、名前=undefinedならば、
  「名前は?」と尋ねる。
  名前=それ。
  「名前」にそれをローカルストレージ保存ここまで。
「DIV#name」をDOM要素取得。
「  いらっしゃいませ。{名前}さん!」をDOMテキスト設定。
#-----------------------------------------------------------
    </script>

    <H1>なでしこ3てすと~ローカルストレージ</H1>
    <HR>
    <DIV id="name"></DIV>
    <HR>

 よくある、ユーザー名でご挨拶してくれる的な。

http://www.geocities.jp/snowdrops890/wnako3_test/03_localStorage.html

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

2017-08-24

なでしこ3で日付時間計算

| 22:04

 なでしこ1にはあった、便利な日付時計算関数https://nadesi.com/doc/cmd-func.htm#k45)が、なでしこ3には無くなってしまいました。

 もしかしたら、後のバージョンアップで追々追加されていく予定なのかもしないけど、バイオリズムを作るに当たって、無いと不便なのでとりあえず作ってみた。

 だって、マイナビ連載9目の「オリンピックまであと何日?」(http://news.mynavi.jp/series/nadeshiko/009/)は、「日数差」の命令があれば、一行で出来る計算だったのに、わざわざUNIXTIMEを使った計算方法を解説されてるってコトは、たとえ追加されるとしても近日ってことは無いだろうからね。


 特に、「日付加算」と「時間加算」の命令は、書式がカンタンで便利な物でした。

 必要なのは、日付加算だけでしたが、時間加算の方がカンタンそうだったので、っちを先に作りました。

 日付加算は、UNIXTIMEを足していく方式だと、閏年の計算を入れなきゃならないのが何気に面倒そうだったので、年と月は単純に足してから合成することにしました。

 たぶん、なでしこ1と同様に動いていると思うんだけど・・・

日付加算時間加算
#-----------------------------------------------------------
●日付加算(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。
  ここまで。
  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で戻るここまで。
#-----------------------------------------------------------
#以下はテスト
「2017/01/01」に「+0/1/0」を日付加算して表示。 #2017/02/01
「2017/01/01」に「-0/1/0」を日付加算して表示。 #2016/12/01

「10:30:00」に「+00:30:00」を時間加算して表示。 #10:00:00
「10:30:00」に「-00:30:00」を時間加算して表示。 #11:00:00

 続いて、「日数差」です。

 切捨は出来るのに、切り上げが出来ないとはこれいかに(?_?) ←バージョン0.1.5で、できるようになりました!

 まあ、CEILが使えるからいいけど。

 して、のところは使う予定は無いけど、もののついでで「時間差」「分差」「秒差」と全部作ったw

 ところで、四捨五入の仕様が変わってる?!

 なでしこ1の四捨五入は、「0.5を四捨五入して言う」とすれば答えは1で、小数点以下四捨五入して整数にするヤツでしたが、なでしこ3では答えが0となり、「5を四捨五入して言う」の答えが、10になるんですよ。 ←バージョン0.1.5で、なでしこ1と同様になりました!

 命令の説明に「整数Aの一桁目を丸めて返す」とゆうことは、それであってるのかなー・・・??

 まあ、ROUNDあるからいいけど。

 して、色々とお試ししてみると、時間差分差の計算は、四捨五入ROUND)かと思いきや違うみたい。

 30分差や30秒差(0.5)の場合は0となり、31分差や31秒差の時は1とゆうことになってるみたいなんだよね。5捨6入・・・?

 これタブン、なでしこ1と同じ結果になってると思うんだけど・・・

日数差時間差分差秒差
#-----------------------------------------------------------
●日数差(AとBの|AからBまでの)
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(24*60*60)。
  もし、結果>0ならば、結果を切捨で戻る。
  違えば、結果をCEIL戻る。 #なぜか「切り上げ」が出来ない…。まあ、CEILが使えるからいいけど。
ここまで。

●時間差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(60*60)
  もし、結果=0.5ならば、結果を切捨で戻る。
  違えば、結果をROUND戻るここまで。

●分差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/60
  もし、結果=0.5ならば、結果を切捨で戻る。
  違えば、結果をROUND戻るここまで。

●秒差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  (B-A)で戻るここまで。
#-----------------------------------------------------------
#以下はテスト
来年今年+1 #なでしこ3では{}の中の変数は展開されるが{今年+1}のような書き方は出来ない今日と「{来年}/01/01」の日数差表示。 #元日まで何日か。
今日と「{今年}/01/01」の日数差表示。 #元日から何日か。

「00:00:00」と時間差表示。
「00:00:00」と分差表示。
「00:00:00」と秒差表示

 ・・・どうかなぁ?

通りすがり通りすがり2017/08/29 21:28ためしにpluginの形にしてみました。
wnako.jsもしくはeditor.jsxの後にscriptタグで読み込むと使えます。
(取り込み方はタートルグラフィクスのプラグインと同様)
でも、なんか動きは違うような気もするのですが、オフィシャルのpluginではないので気にしないことにしました。
下記のデモのトップにある簡易エディタではこのpluginを取り込んでいるので、命令がそのまま使えます。

でもとっぷ
weyk.la.coocan.jp/weyk/nadesiko3/demo/index.html

ぷらぐいん単体
weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js

kujirahandkujirahand2017/08/30 07:49貴重な情報ありがとうございます。
次の版では、切り上げが使えない問題とか、四捨五入の問題とか直します。

雪乃☆雫雪乃☆雫2017/08/30 08:06 おおぉ、プラグイン!
 すごいです。さすがです☆
 あっ、しかし「日数差・時間差・分差・秒差」の結果の+と-が、真逆になっているのでございます。
 あああ、なんかスミマセン;
 それこそ、自分で-1を掛ければいいだけなのですが;;;

雪乃☆雫雪乃☆雫2017/08/30 08:17 kujirahandさま、コメントありがとうございます!!!
 なんか、一人でぼやきまくっていてスミマセンm(_ _)m
 どこに報告を上げたらいいのかもよく分からず・・・イヤ、それ以前に、問題なのか仕様なのか、それとも自分が間違っているのかすら、よく分からず・・・なのです;;;
 でも、とてもとても応援しています☆

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

2017-08-19

バイオリズム

| 21:18

 突然何の脈絡も無く、バイオリズムを表示するプログラム。

 ムカシはだいぶ流行ったけど、最近はあんまりお見かけしませんね。

 やっぱり、カガク的コンキョに欠けるとゆうコトなんでしょうか。

 のわりには、血液型占いは廃れないよね~。

 A型が几帳面だなんて、絶っっ対にあり得ないと思うんだけど・・・(^▽^;

#バイオリズム(なでしこ1)

#-----宣言--------------------------------------------------
生年月日とは文字列。生年月日=「」。
当日とは整数。当日=今日の2文字右部分整数変換。
当月とは整数。当月=今日の6から2文字抜き出しを整数変換。
基準日とは整数。基準日=今日に「-0/0/{当日-1}」を日付加算。
誕生日とは文字列表示年とは整数表示月とは整数表示年月とは文字列。
閏年とは整数。
月末とは整数。
#-----------------------------------------------------------
母艦について
  クライアント幅は640。クライアント高さは480。

文字色黒色。30,20へ「生年月日(yyyy/mm/dd):」を文字描画。
生年月日エディタとはエディタこれについて
  位置は「175,15」。幅は80。テキストは生年月日。
部品間隔は0。
前月ボタンとはボタンこれについて
  位置は「280,15」。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「-0/1/0」を日付加算。
    バイオリズム表示今月ボタンとはボタンこれについて
  位置は前月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=今日に「-0/0/{当日-1}」を日付加算。
    バイオリズム表示。
翌月ボタンとはボタンこれについて
  位置は今月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「+0/1/0」を日付加算。
    バイオリズム表示文字色青色。480,20へ「■身体」を文字描画文字色赤色。530,20へ「■感情」を文字描画文字色緑色。580,20へ「■知性」を文字描画。
#-----------------------------------------------------------
枠描画。
もし、生年月日がならば、「生年月日を入力して下さい」と言う違えば、バイオリズム表示。
#-----------------------------------------------------------

*枠描画
 線スタイルは実塗りスタイルはべた。線色白色塗り色白色文字色黒色。
 0,40から640,480へ四角。
 11
  もし、((回数-1)=0)ならば、3,40へ「高{~}調{~}期」を文字描画。
  もし、((回数-1)=9)ならば、3,((回数-1)*40+40)へ「低{~}調{~}期」を文字描画。
  もし、((回数-1)=5)ならば、
    3,((回数-1)*40+20)へ「要{~}{~}意」を文字描画。
    線スタイルは透明。塗りスタイルはべた。塗り色黄色。
    20,((回数-1)*40+20)から620,((回数-1)*40+60)へ四角。
  線色黒色塗りスタイルは透明。
  もし、((回数-1)=0)または((回数-1)=5)または((回数-1)=10)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  20,((回数-1)*40+40)から620,((回数-1)*40+40)へ。

 31
  もし、((回数-1)=0)または((回数-1)=30)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  ((回数-1)*20+20),40から((回数-1)*20+20),440へ。

 (月末)
  ((回数-1)*20+15),450へ回数文字描画。
#-----------------------------------------------------------

*バイオリズム表示
  生年月日は生年月日エディタのテキスト。
  誕生日=「{生年月日の4文字左部分}年{生年月日の6から2文字抜き出し}月{生年月日の2文字右部分}日」
  表示年=基準日の4文字左部分整数変換。
  表示月=基準日の6から2文字抜き出しを整数変換。
  表示年月=「{表示年}年{表示月}月」

  もし表示年%4=0でなければ、閏年=いいえ。
  違えばもし表示年%100=0でなければ、閏年=はい。
  違えばもし表示年%400=0でなければ、閏年=いいえ。
  違えば、閏年=はい。
  もし、(表示月=02)または(表示月=04)または(表示月=06)または(表示月=09)または(表示月=11)でなければ、月末=31。
  違えばもし表示月=02ならば、
    もし、閏年=はいならば、月末=29。
    違えば、月末=28。
  違えば、月末=30。

  母艦のタイトルは「{誕生日} 生まれの方の {表示年月} のバイオリズム」
  枠描画。バイオリズム描画。

*バイオリズム描画
 線太さは3。線スタイルは実塗りスタイルはベタ。
 31
  日付=基準日に「+0/0/{回数-1}」を日付加算。
  結果=生年月日と日付でバイオリズム計算。
  身体2=(結果¥0)*2。
  感情2=(結果¥1)*2。
  知性2=(結果¥2)*2。
  もし回数>1ならば、
    線色青色。(20*(回数-1)),(-身体1+240)から(20*回数),(-身体2+240)へ
    線色赤色。(20*(回数-1)),(-感情1+240)から(20*回数),(-感情2+240)へ
    線色緑色。(20*(回数-1)),(-知性1+240)から(20*回数),(-知性2+240)へ
  もし、(表示年=今年)かつ(表示月=今月)かつ(回数=当日)ならば、
    線色青色塗り色青色。(20*回数-5),(-身体2+240-5)から(20*回数+5),(-身体2+240+5)へ
    線色赤色塗り色赤色。(20*回数-5),(-感情2+240-5)から(20*回数+5),(-感情2+240+5)へ
    線色緑色塗り色緑色。(20*回数-5),(-知性2+240-5)から(20*回数+5),(-知性2+240+5)へ
  身体1=身体2。
  感情1=感情2。
  知性1=知性2。
#-----------------------------------------------------------
#外枠の表示
 線色黒色塗りスタイルは透明。
 18,38から622,442へ四角。
#-----------------------------------------------------------
*バイオリズム計算(誕生日と基準日で)
  日数=誕生日と基準日の日数差。
  結果¥0=SIN(日数/23*PI*2)*100を整数変換。
  結果¥1=SIN(日数/28*PI*2)*100を整数変換。
  結果¥2=SIN(日数/33*PI*2)*100を整数変換。
  結果で戻る。
#-----------------------------------------------------------

 生年月日を入力して「今月」のボタンを押せば表示されます。

 宣言のところで、生年月日に自分のを入れとけば、それが自動的に表示されます。

 高調期や低調期は、それほど気にする必要は無く、0と交わる辺りが注意日で色々と不安定になるので気をつけなければならないそうです。


 こんなヤツを、なでしこ3で、ウェブ上に設置できたら面白そうだなぁ~と思って、なでしこ1で試しに作ってみたんだけど・・・

 まあ、バイオリズム自体は、サインカーブを描くだけなんで、サインもコサインも何も覚えてないけど、プログラム的にはそう難しいことはないんですが、なでしこ3では使えない命令があったり、色々ナゾ現象はあるし、密かに違っているところも多くて、なんだか次から次へとエラーが出る~(*_*;

 たとえば、文字列中の{}の中の変数は、1同様展開されるんだけど、の中で{回数-1}みたいに計算するコトは出来ないみたいなんだよね。不便っす;;;

 でも、それ以前にずっと引っかかっていたのは、<button>タグのonclickに、なでしこの関数を設定したりは出来ないのかしらん・・・とゆうことでした。

 カナリ色々試したんだけど、のところムリっぽい気が~・・・・・・(?)

 ↑バージョン0.1.5でできるようになりました!!!


◆覚え書き◆

※バイオリズムの計算式
日数差=誕生日-基準日。
身体のリズム=23。
感情のリズム=28。
知性のリズム=33。
SIN日数差/リズム*PI*2)

※閏年の計算方法
1、4で割り切れる。
2、ただし、100で割り切れる場合は閏年でない。
3、ただし、400で割り切れる場合は閏年である
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170819

2017-08-10

タートルグラフィックスをcanvasで使う!

| 14:20

 前の課題の解決です。

 必要なのは、「カメ描画先」と「カメ画像URL」でした。


 まずは、

 https://nadesi.com/doc3/index.php?HTML%E3%81%B8%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95

 にあるとうり、プラグイン追加

<!-- タートルグラフィックスを使うのに必要プラグイン  -->
<script src="https://nadesi.com/v3/0.1.0/release/plugin_turtle.js"></script>

 して、「描画開始で」描画先に指定したcanvasのIDを、「カメ描画先」に指定します。

 そうすると、描画は行われるのですが、カメさんが出てきません。

 どうやら、PCや違うサイトから使おうとゆう場合は、「カメ画像URL」に画像のURLを指定してやる必要あるみたい。

 捜索の結果、カメさんは「https://nadesi.com/v3/0.1.0/demo/turtle.png」にいましたので、コレを指定します。

 もちろん、自分の好きなカメでもウサギでも、自分のトコに画像を用意してもいいわけですけどね。

 しかし、ワタシ個人的には、ナコ様に描いて欲しいなぁ・・・

 これは勝手に使うと問題がありそうだから、公式サイトで用意してくれないかなぁwww


 ・・・それはともかく、んなこんなでこんな感じ。

 面倒なので、描くモノは相変わらず同じです;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと</title>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.0/release/wnako3.js?run"></script>
    <!-- タートルグラフィックスを使うのに必要プラグイン  -->
    <script src="https://nadesi.com/v3/0.1.0/release/plugin_turtle.js"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「canvas#cv」のDOM要素取得。  #まずHTMLcanvasタグを設置し、IDを設定し、DOM要素取得。
      それへ描画開始。        #それを描画先に指定。
      カメ描画先=「cv」       #カメ描画先は、canvasのIDを指定する。
      カメ画像URL=「https://nadesi.com/v3/0.1.0/demo/turtle.png」  #ここにカメさんがいる!
      カメ作成。
      5にカメペンサイズ設定。    #タートルグラフィックスの場合は「太設定」は無効。
      K=150。XX=155。YY=155。
      PX=1。PY=1。QX=-1。QY=1。RX=-1。RY=-1。SX=1。SY=-1。
      C=200
      8
        色=RGB(255,C,C)。C=C-20。
        色にカメペン色設定。
        PX2=PXとQXの中点。PY2=PYとQYの中点。
        QX2=QXとRXの中点。QY2=QYとRYの中点。
        RX2=RXとSXの中点。RY2=RYとSYの中点。
        SX2=SXとPXの中点。SY2=SYとPYの中点。
        [(K*PX2+XX),((-K)*PY2+YY)]へカメ起点移動。
        [(K*QX2+XX),((-K)*QY2+YY)]へカメ移動。
        [(K*RX2+XX),((-K)*RY2+YY)]へカメ移動。
        [(K*SX2+XX),((-K)*SY2+YY)]へカメ移動。
        [(K*PX2+XX),((-K)*PY2+YY)]へカメ移動。
        PX=PX2。PY=PY2。QX=QX2。QY=QY2。RX=RX2。RY=RY2。SX=SX2。SY=SY2。
      ここまで。
      カメ非表示。

      ●中点(AとBの)
        (A+B)/2で戻るここまで。
    </script>

    <H1>なでしこ3てすと~タートルグラフィックスを使う</H1>
    <HR>
    <FONT color="red">
    <H2>カメさんがバラを描く</H2>
    <canvas id="cv" width=320 height=320></canvas>
    <HR>
  </body>
</html>

 できた!

http://www.geocities.jp/snowdrops890/wnako3_test/02_turtle.html

 そうして、これならcanvasのサイズは自分で好きに変えられるから、広々としたところでのびのびとカメさんを歩かすことが出来るわけですね~♪


違いを発見したのでひっりと修正(><;

 ふつうの描画命令の場合は「太設定」での太さを変えますが、タートルグラフィックスの場合は、「カメペンサイズ設定」でした!

 カメペンは、標準が太め(4かな?)なので、気付かんかった;;;

通りすがり通りすがり2017/09/13 23:21カメさん、飛べるようにしてみました。

weyk.la.coocan.jp/weyk/nadesiko3/demo/turtle_weyk.html

カメさんがカメの形をしていないのは、modelが無いからです・・・

three.jsという有名なライブラリを使用しました(pluginの前に読み込んでおく必要あり)

雪乃☆雫雪乃☆雫2017/09/15 07:25おぉぉっ! とうとうなでしこさんも、3Dの時代なのですね(≧▽≦)
すごいです!! ますます楽しみが広がりますね☆
ワタシにその能力がなくて(空間認識力が欠如しております;)ろくなものは書けない予定ですが、遊んでみます♪

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

2017-08-08

canvasに図形を描画するよ!

| 23:37

 しかし、canvasって、何?!(っからか;)

 まず、「描画開始」命令の「描画先にCanvasを指定して描画API(2D)の利用準備する」とゆう説明からして分かりません;;

 描画系の命令を使うためには、とりあえず最初にこの「描画開始」で利用準備することが必要ラシイことは分かるのですが・・・

 ・・・と思っていたら、HTMLに<canvas>とゆうタグがあるのでした(バカ;)

 して、簡易エディタエラーメッセージによると、「描画を行うためには、HTML内にcanvasを配置し、idを振って『描画開始』命令に指定します。」とのこと。

 ソレを命令の説明の所にも書いて置いて欲しいの~~~。

 して、さらにもう一つ、落とし穴がありました。

 HTML内に、canvasを設置して、IDをつけたら、まずは、「DOM要素取得」です。

 しかるのちに、それへ「描画開始」とゆうことになります。

 ここが非常にわかりにくくて苦労しました。

 たぶん、Javascriptなどの分かっている方には、アレをやる代わりにコレか~・・・みたいな感じに、説明がなくともすんなり理解出来ることなのかも知れないんですが(?)なにしろ全体的に何も知らないので、さっぱりですヽ(;´Д`)ノ

 でも、コレさえ分かったら、後は意外とすんなり行きました。

 あと、canvasはなにも指定しないと、300*150くらいのサイズのようなので、widthとheightを設定してやります。

 でも・・・度はタートルグラフィックスの使い方が分からなんだ(+_+;

 https://nadesi.com/doc3/index.php?HTML%E3%81%B8%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95

 に記載の通りにタートルグラフィックスを使うのに必要プラグイン追加してみたけれど・・・なんか、うまくいかないんだよね。

 カメ作成しても出てこない

 まあ、それはまた後の課題として、描画で前同様バラを描くヤツ。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと</title>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.0/release/wnako3.js?run"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「canvas#cv」のDOM要素取得。  #まずHTMLcanvasタグを設置し、IDを設定し、DOM要素取得。
      それへ描画開始。        #それを描画先に指定。
      5に太設定。

      K=150。XX=155。YY=155。
      PX=1。PY=1。QX=-1。QY=1。RX=-1。RY=-1。SX=1。SY=-1。
      C=200
      8
        色=RGB(255,C,C)。C=C-20。
        色に線色設定。
        PX2=PXとQXの中点。PY2=PYとQYの中点。
        QX2=QXとRXの中点。QY2=QYとRYの中点。
        RX2=RXとSXの中点。RY2=RYとSYの中点。
        SX2=SXとPXの中点。SY2=SYとPYの中点。

        [(K*PX2+XX),((-K)*PY2+YY)]から[(K*QX2+XX),((-K)*QY2+YY)]まで描画。
        [(K*QX2+XX),((-K)*QY2+YY)]から[(K*RX2+XX),((-K)*RY2+YY)]まで描画。
        [(K*RX2+XX),((-K)*RY2+YY)]から[(K*SX2+XX),((-K)*SY2+YY)]まで描画。
        [(K*SX2+XX),((-K)*SY2+YY)]から[(K*PX2+XX),((-K)*PY2+YY)]まで描画。
        PX=PX2。PY=PY2。QX=QX2。QY=QY2。RX=RX2。RY=RY2。SX=SX2。SY=SY2。
      ここまで。

      ●中点(AとBの)
        (A+B)/2で戻るここまで。
    </script>

    <H1>なでしこ3てすと~canvasに図形を描く</H1>
    <HR>
    <FONT color="red">
    <H2>バラが咲いた(内部自己相似形)</H2>
    <canvas id="cv" width=320 height=320></canvas>
    <HR>
  </body>
</html>

 ちゃんと、見れた~♪♪♪

http://www.geocities.jp/snowdrops890/wnako3_test/02_canvas.html

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

2017-08-04

カメさんで遊ぶよ!

| 22:25

 こうゆう、プログラムで図形を描く的なコトは、大の苦手なんだけど、カメさんが描いてくれるだけで、なんか和むねえ~♪


 しかし~、例によってまたぼやきからスタートですよ;;;

 たとえばこんな簡単な四則計算。

 -5*2+10を表示

 コレは当然、なでしこ1でもなでしこ3でも、正しく計算されて、0とゆうことになるんですが・・・

 この、5の部分を、変数にしたいと思ってこうしたところ・・・

 A=5
 -A*2+10を表示

 なでしこ1では問題の無いこのコードですが、なでしこ3ではえらーとなります><;

 しかしまあ、コレは仕方ありません。なでしこ1でも、計算部分を括弧で括ってやらないとエラーになっちゃう場面は時々あります

 でっ、括弧で括るじゃないですか。

 A=5
 (-A*2+10)を表示

 あれれ~?

 この計算結果が-20って、おかしくないですか?!?!

 どうやら、Aにつけたつもりのマイナスの符号だけど、「(-(A*2+10))」のようについてしまうんだね。

 それって、どうなの???

 ・・・まあ、ちゃんと「((-A)*2+10)」と括りなさいよということで・・・

 ↑バージョン0.1.5で修正されました!


 さてさて、気を取り直して・・・

 いつかどこかで見たヤツ。

#バラが咲いた(内部自己相似形)
#-----------------------------------------------------------
カメ作成。
K=150。XX=155。YY=155。
PX=1。PY=1。QX=-1。QY=1。RX=-1。RY=-1。SX=1。SY=-1。

C=200
8
  色=RGB(255,C,C)。C=C-20
  色にカメペン色設定。
  PX2=PXとQXの中点。PY2=PYとQYの中点。
  QX2=QXとRXの中点。QY2=QYとRYの中点。
  RX2=RXとSXの中点。RY2=RYとSYの中点。
  SX2=SXとPXの中点。SY2=SYとPYの中点。
  [(K*PX2+XX),((-K)*PY2+YY)]へカメ起点移動。
  [(K*QX2+XX),((-K)*QY2+YY)]へカメ移動。
  [(K*RX2+XX),((-K)*RY2+YY)]へカメ移動。
  [(K*SX2+XX),((-K)*SY2+YY)]へカメ移動。
  [(K*PX2+XX),((-K)*PY2+YY)]へカメ移動。
  PX=PX2。PY=PY2。QX=QX2。QY=QY2。RX=RX2。RY=RY2。SX=SX2。SY=SY2。
ここまで。
カメ非表示。

●中点(AとBの)
  (A+B)/2で戻るここまで。
#-----------------------------------------------------------

お試しはタートルグラフィックスようのエディタで。

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF-%E3%82%BF%E3%83%BC%E3%83%88%E3%83%AB%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E7%94%A8

 しかし、お絵かきの出来る範囲が、意外と狭いんだよね。

 縦が400はまあ妥当として、横がなぜか枠の端っこまで描けず300で切れてしまうんだね。(スマホ対応のサイズなんですね。PCようにもう少し広く描けるところがあると、うれしいね)

通りすがり通りすがり2017/08/27 22:01単項演算子の対応が、二項演算子への置き換え(*)になっていたので、単項演算子のまま処理するよう少し変更してみました。
本家にマージするかは未定。

weyk.la.coocan.jp/weyk/nadesiko3/demo/index.html

*-Aを、-1*(A)としている。

雪乃☆雫雪乃☆雫2017/08/28 12:08 いつもありがとうございます!
 できました。すごいです!!
 ゼヒゼヒ本家の方も~~~☆
 単項演算子とか二項演算子とかとか検索してみたケド、分かったような分からんような・・・(^▽^;
 そして、このようなことには明るくないので、プログラムの記述としてどっちがより妥当なのか、スタンダードなのかなども分からないのですが、出来れば、可能な限り、なでしこ1と同様の記述ができたほうが、ありがたいです。

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