[ 📌文法] [ 🎨命令一覧]

[編集モード] なでしこ3のプログラムからマーメイド図を作成するツール

マーメイド図についてはマニュアルの「マーメイド作成」命令を参照してください(https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%9E%E3%83%BC%E3%83%A1%E3%82%A4%E3%83%89%E4%BD%9C%E6%88%90&show)

!インデント構文

//雪乃☆雫 さん作「なでしこさんで雪を降らせるよ❄️」をサンプルとしてお借りします
//html=『https://n3s.nadesi.com/id.php?2909』をAJAXテキスト取得　//→TypeError: Failed to fetch
//htmlを「/<textarea id="nako3code".+>(.*)<\/textarea/s」で正規表現マッチ
//サンプルプログラムは「//サンプル{改行}」&抽出文字列
サンプルプログラムは『＃画面
画面幅はクライアント幅/10*9.5。//画面幅＝400。
画面高はクライアント高/10*9.5。//画面高さ＝500。

メイン画面は、描画中キャンバス。
メイン画面.width＝画面幅。
メイン画面.height＝画面高さ。

背景は、[画面幅,画面高さ]のキャンバス作成。
背景.非表示＝オン。
[画面幅,画面高さ]へ空グラデ描画。

メイン画面へ描画開始。

＃設定
変数 雪設定＝{
    "最大径":50,
    "最小径":10,
    "最大落下速度":20,
    "最小落下速度":10,
    "最大風速":5,
    "最小風速":1,
    "最大数":(画面幅+画面高)/50
}

＃データ作成
雪一覧は空配列。
雪作成間隔基準値＝0.5。
雪作成間隔は(雪作成間隔基準値/(画面幅/400))。
(雪作成間隔)秒毎には、もし、(雪一覧の要素数)＜(雪設定.最大数)ならば、雪追加。。。

●雪追加
    変数 雪＝雪設定。
    変数 方向＝[-1,1]。
    変数 伸縮＝[[0,1],[1,0]]。
    # 雪の降り方
    変数 風力＝(雪.最小風速から雪.最大風速までの乱数範囲)/10。
    変数 風向＝方向[2の乱数]。
    変数 速度＝(雪.最小落下速度から雪.最大落下速度までの乱数範囲)/10
    # 雪のサイズ
    変数 雪径＝雪.最小径から雪.最大径までの乱数範囲。
    # 雪位置
    変数 横位置＝画面幅の乱数。
    変数 縦位置＝雪径/2*-1。//雪が見えない所から降らせる
    # 雪色
    変数 R＝0xCCから0xFFまでの乱数範囲。
    変数 G＝0xDDから0xFFまでの乱数範囲。
    変数 B＝0xEEから0xFFまでの乱数範囲。
    変数 A＝(5から8までの乱数範囲)*0.1。
    変数 雪データ＝{
        "位置":[横位置,縦位置],
        "径":雪径,
        "色":「RGBA({R},{G},{B},{A})」,
        "左右方向":風力*風向き,
        "落下速度":速度,
        "回転方向":方向[2の乱数],
        "伸縮":伸縮[2の乱数],
        "角度":0
    }
    雪一覧に雪データを配列追加。
ここまで。

＃雪を降らせる
降雪アニメーション。
●降雪アニメーション
    [0,0]へ背景を画像描画。

もし、（雪一覧の要素数）＝０ならば、雪追加。
    雪一覧を反復
        変数 No＝対象キーを整数変換。
        変数 雪位置は対象.位置。
        変数 [横位置,縦位置]＝雪位置。
        変数 雪径は対象.径。
        変数 雪色は対象.色。
        雪色に線色設定。

変数 伸縮＝対象.伸縮。
        変数 角度＝対象.角度＋対象.回転方向。
        変数 sin＝SIN((角度をラジアン変換))。
        変数 cos＝COS((角度をラジアン変換))。
        変数 [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ]＝[cos*伸縮[0],sin,-sin,cos*伸縮[1]]。
        変数 [起点ｘ,起点ｙ]＝[横位置,縦位置]。

キャンバス状態保存。
        #---
        [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ,起点ｘ,起点ｙ]だけ描画変換マトリクス設定。
        [0,0]へ雪径の雪描画。
        #---
        キャンバス状態復元。

横位置を対象.左右方向だけ増やす。
        縦位置を対象.落下速度だけ増やす。
        もし、縦位置-雪径＞画面高さならば、
            雪一覧のNoを配列削除。
        違えば、
            対象.位置＝[横位置,縦位置]。
            対象.角度＝角度。
        ここまで。
    ここまで。
    「降雪アニメーション」を画面更新時実行。
ここまで。

＃描画
//中点は[x,y]の配列。雪径は雪の「直径」
●(中点へ雪径の)雪描画
    空に塗り色設定
    変数 m=雪径/10。m/4*3に線太設定。
    中点からm*2で6の多角形頂点取得。
    それで多角形描画。
    変数 頂点は、中点からm*5で6の多角形頂点取得。
    3回:
      頂点[回数-1]から頂点[回数+2]まで線描画。
    変数 分岐点は、中点からm*3で6の多角形頂点取得。
    分岐点を反復:
        変数 枝は、対象からm*2で6の多角形頂点取得。
        変数 A＝(対象キー-1+6)%6。
        変数 B＝(対象キー+1+6)%6。
        枝[A]から対象まで線描画。
        枝[B]から対象まで線描画。
ここまで。

// x = r cos θ　y = r sin θ の呪文
●(中点から半径でnの)多角形頂点取得
    変数 v＝空配列。
    n回
        変数 角度＝(360/n)*(回数-1)。
        変数 ラジアン度＝(角度-90)をラジアン変換。
        変数 x＝半径*COS(ラジアン度)＋中点[0]。
        変数 y＝半径*SIN(ラジアン度)＋中点[1]。
        vへ[x,y]を配列追加。
    ここまで。
    vで戻る。
ここまで。

！「https://n3s.nadesi.com/plain/ImageProcessing.nako3」を取り込む。
●(whへ)空グラデ描画
    変数 上空色＝「#000066」
    変数 地上色＝「#CCCCFF」
    変数 [w,h]=wh。
    1に線太さ設定。上空色に塗り色設定。上空色に線色設定。
    [0,0,w,h/3]へ四角描画。
    h/3*2回
        C＝回数-1。
        空色＝[C,h/3*2]で上空色と地上色の色等比計算の色混ぜ。
        空色に線色設定。
        [0,C+h/3]から[w,C+h/3]へ線描画。
    ここまで。
ここまで。

●クライアント幅
　　「document.documentElement.clientWidth」をJS実行。
ここまで。

●クライアント高さ
　　「document.documentElement.clientHeight」をJS実行。
ここまで。

』

//なでしこのプログラムからマーメイド文（ヘッダ以外）を作成して戻す
●nako3マーメイド(プログラム)
　
　//前処理
　プログラム＝プログラムの「 」を「　」に置換　//全角変換より前にやる
　プログラム＝プログラムを全角変換
　プログラム＝プログラムの「\r?\n」を改行に正規表現置換
　
　//プログラム中のテキストを「!{txtNo}!」に置換する
　txt一覧={}
　txtNo=0
　
　//プログラムのコメントを削除
　1回
　　　script=「」
　　　終了記号辞書={}
　　　記号タイプ辞書={}
　　　「『	』	文字列{改行}」&『「	」	文字列
’	’	文字列
”	”	文字列
／＊	＊／	コメント
／／	\n	一行コメント
＃	\n	一行コメント
※	\n	一行コメント』をTSV取得
　　　それを反復
　　　　　終了記号辞書＠(対象[0]) = 対象[1]
　　　　　記号タイプ辞書＠(対象[0]) = 対象[2]
　　　
　　　終了記号辞書の辞書キー列挙
　　　key=それを「|」で配列結合　//『|「|’|／＊|
　　　
　　　
　　　プログラムの文字数が1以上の間
　　　　　もし前プログラム=プログラムならば
　　　　　　　前プログラムをコンソール表示
　　　　　　　「失敗」と言う
　　　　　　　抜ける
　　　　　前プログラム=プログラム
　　　　　プログラムを「/(.*?)({key})/s」で正規表現マッチ
　　　　　もしそれがNULLならば
　　　　　　　script=scriptにプログラムを追加
　　　　　　　抜ける
　　　　　違えば
　　　　　　　マッチ部分は抽出文字列[0]
　　　　　　　script=scriptにマッチ部分を追加
　　　　　　　プログラム＝プログラムのマッチ部分を空に単置換//消す
　　　　　　　
　　　　　　　開始記号=抽出文字列[1]
　　　　　　　終了記号=終了記号辞書＠開始記号　//　」　とか　』　とか
　　　　　　　記号タイプ=記号タイプ辞書＠開始記号　//コメントとか文字列
　　　　　　　
　　　　　　　プログラムを「/{開始記号}.*?{終了記号}/s」で正規表現マッチ
　　　　　　　マッチ部分はそれ
　　　　　　　もしマッチ部分がNULLでなければ
　　　　　　　　　
　　　　　　　　　txt=「!{txtNo}!」 //あとで「\!\d+\!」で正規表現マッチ して復元する
　　　　　　　　　txt一覧[txt]=マッチ部分
　　　　　　　　　txtNoを1だけ増やす
　　　　　　　　　
　　　　　　　　　もし記号タイプが「一行コメント」ならば
　　　　　　　　　　　script=scriptにtxt＆改行を追加
　　　　　　　　　　　
　　　　　　　　　違えばもし記号タイプが「コメント」ならば
　　　　　　　　　　　script=scriptにtxtを追加
　　　　　　　　　違えば
　　　　　　　　　　　//マッチ部分の改行を「\n」に置換 //長い文字列
　　　　　　　　　　　script=scriptにtxtを追加
　　　　　　　　　プログラム＝プログラムのマッチ部分を空に単置換//消す
　　　　　　　
　　　
　　　プログラム＝script
　　　//scriptをコンソール表示
　　　
　
　
　
　
　
　//関数ごとに分ける　（インデントしか見ていない）
　関数リスト=[]　//関数宣言部分 マーメイド図にでてくる　●hogeする(hage)
　関数分割=[""]　//各関数のプログラム文が入る
　no=0　//関数番号
　関数no=0
　//「●」のかわりに「関数　」を用いた関数宣言は無視する（マーメイド図に含めたくない関数を宣言するときに使う）
　
　プログラムを改行で区切る
　それを反復
　　　//インデントあり→前の行の関数に入れる
　　　もし対象が空ならば
　　　　　関数no=関数no
　　　違えばもし対象が『^\s』で正規表現マッチするならば
　　　　　関数no=関数no
　　　違えばもし（対象が『●.+』で正規表現マッチする）または（対象が『.+(時|秒毎)には』で正規表現マッチする）ならば
　　　　　マッチ部分=それ
　　　　　マッチ部分を「とは」で文字列分割　//●関数名とは　xxxすること。。。 を想定
　　　　　マッチ部分はそれ[0]
　　　　　
　　　　　//インデントなし→関数の開始ならば新しい関数
　　　　　noを1だけ増やす
　　　　　関数no=no
　　　　　関数分割[no]=""
　　　　　関数リスト[no]=マッチ部分　//辞書にする？
　　　　　対象=対象のマッチ部分を空に単置換　//宣言部分を消す
　　　　　
　　　違えば
　　　　　//インデントなしで関数の開始でなければメインのプログラムに追加
　　　　　関数no=0
　　　
　　　関数分割[関数no]=関数分割[関数no]に対象を一行追加
　　　
　
　
　[関数リスト,関数分割,txt一覧]をコンソール表示
　
　
　//関数名のノード？を作る
　//a0((メイン))]、a1[関数名]、a2[関数名]・・・
　検索用リスト=[""]　//プログラム中で呼び出される形
　マーメイド文は「a0((メイン)){改行}」//ヘッダ部分以外（graph LRとかは後でつける）
　関数リストを反復
　　　もし対象キーが0ならば
　　　　　//マーメイド文=マーメイド文に「」を一行追加
　　　　　続ける
　　　
　　　
　　　もし対象が『/(.+)(時|秒毎)(には)/』で正規表現マッチするならば//メイン直下の無名関数
　　　　　関数名＝それ//抽出文字列を「」で配列結合
　　　　　関数名を「\!\d+\!」で正規表現マッチ 
　　　　　それを反復
　　　　　　　関数名＝関数名の対象をtxt一覧＠対象に単置換　//文字列の復元
　　　　　　　
　　　　　
　　　　　マーメイド文=マーメイド文に「a{対象キー}[{関数名}]」を一行追加
　　　　　マーメイド文=マーメイド文に「a0 -.-> a{対象キー}」を一行追加//点線
　　　　　検索用リスト[対象キー]は空//無名
　　　違えば
　　　　　マーメイド文=マーメイド文に「a{対象キー}[{対象}]」を一行追加
　　　　　対象の「●」を「」に置換
　　　　　それの『（.*）』を「」に正規表現置換　//カッコ内
　　　　　それの『[：。]』を「」に正規表現置換　//末尾
　　　　　検索用リスト[対象キー]はそれ　//●（Aを）hogeとは：　→　hoge　に置換して入れる
　
　//マーメイド文に a0 --> a1 など 矢印を追加していく
　//プログラムからユーザー定義命令を長い順に検索して追加
　検索用リスト長い順=検索用リストを配列複製
　検索用リスト長い順を{関数}文字長い順ソートで配列カスタムソート
　関数分割を反復
　　　txtは対象
　　　from=「a{対象キー}」
　　　//対象=対象の関数リスト＠対象キーを「」に単置換//1行目が関数宣言なら消す
　　　
　　　
　　　//対象を全角変換
　　　//txtはそれ
　　　//画面更新時実行　文字列の中も見る
　　　txtを改行で区切って反復
　　　　　一行=対象
　　　　　もし（一行で「画面更新時実行」の出現回数）ならば
　　　　　　　
　　　　　　　一行を「\!\d+\!」で正規表現マッチ
　　　　　　　それを反復
　　　　　　　　　一行＝一行の対象をtxt一覧＠対象に単置換　//文字列の復元
　　　　　　　
　　　　　　　
　　　　　　　検索用リスト長い順を反復
　　　　　　　　　もし対象が空でなければ
　　　　　　　　　　　一行で対象の出現回数
　　　　　　　　　　　もしそれ>0ならば
　　　　　　　　　　　　　対象を検索用リストから配列検索
　　　　　　　　　　　　　to=「a{それ}」
　　　　　　　　　　　　　マーメイド文=マーメイド文に「{from} -.画面更新時.-> {to}」を一行追加
　　　　　　　　　　　　　一行=一行の対象を空に置換
　　　
　　　
　　　//関数内で定義した無名関数のイベント
　　　0回　//未実装　仕様に失敗しました
　　　　　txtを改行で区切って反復
　　　　　　　一行=対象
　　　　　　　もし対象が『/(.+)(時|秒毎)(には)/』で正規表現マッチするならば//無名関数
　　　　　　　　　no=no+1
　　　　　　　　　関数no=no
　　　　　　　　　to=「a{関数no}[{対象}]」
　　　　　　　　　マーメイド文=マーメイド文に「{from} -.{対象}.-> {to}」を一行追加
　　　
　　　
　　　//文字列の中は見ない
　　　//関数名を含む長い変数名があると嘘の矢印ができる　　（仕様の不備）
　　　検索用リスト長い順を反復
　　　　　もし対象が空でなければ
　　　　　　　txtで対象の出現回数//todo　ちゃんと単語に分割する　（雑）
　　　　　　　もしそれ>0ならば
　　　　　　　　　対象を検索用リストから配列検索
　　　　　　　　　to=「a{それ}」
　　　　　　　　　マーメイド文=マーメイド文に「{from} --> {to}」を一行追加
　　　　　　　　　txt=txtの対象を空に置換
　
　マーメイド文を戻す
　
●文字長い順ソート(a,b)
　それは(bの文字数) - (aの文字数)

//--------部品
マーメイド本体DOMは空
プログラムDOMは空

『なでしこ3のプログラムからマーメイド図を作成するツール』のラベル作成
それ＄文字サイズは36px
改行作成
改行作成
「＜使い方＞」のラベル作成
改行作成
『・ここになでしこ3のプログラムを貼って「まーめいど！」のボタンをクリックしてください』のラベル作成
1回
　改行作成
　「クリップボードから貼る」のボタン作成
　それのクリックした時には
　　　クリップボード取得
　　　プログラムDOMにそれをテキスト設定
　プログラムDOM=サンプルプログラムのテキストエリア作成
　それに「ここにプログラムを貼る」をヒント設定
　それ＄幅は「100%」

1回
　改行作成
　マーメイド実行ボタン=「まーめいど！」のボタン作成
　「　向き：」のラベル作成
　方向DOM=["LR","TB"]のセレクトボックス作成
　それに「マーメイド図の向き（左右・上下）」をヒント設定

1回
　改行作成
　マーメイド文DOM=「」のテキストエリア作成
　それ＄幅は「100%」
　それに「プログラムから生成したマーメイド文」をヒント設定

マーメイド実行ボタンのクリックした時には
　　プログラムDOMからテキスト取得
　　nako3マーメイド（それ）
　　それにマーメイドヘッダ追加
　　マーメイド文DOMにそれをテキスト設定
　　マーメイドDOM作成

1回
　改行作成
　
　「再生成」のボタン作成
　それに「手動で上記マーメイド文を変更した時に押す」をヒント設定
　それのクリックした時には
　　　マーメイドDOM作成
　「　」のラベル作成
　「図をでかくする」のボタン作成
　それに「マーメイド図がギチギチのときに押す」をヒント設定
　それをクリックした時には
　　　マーメイドDOMサイズMAX
　「hr」のDOM部品作成
　マーメイド本体DOM=「graph{改行}a0[(メイン)]」のマーメイド作成
　
//--------部品ここまで

●マーメイドヘッダ追加(txtに)
　typeとは変数=「graph」//flowchart か graph
　方向とは変数
　方向=方向DOMからテキスト取得
　マーメイドヘッダ=「{type} {方向}{改行}」
　マーメイドヘッダ＆txtを戻す

●マーメイドDOM作成
　マーメイド本体DOMをDOM部品削除
　マーメイド文DOMからテキスト取得
　マーメイド本体DOM=それのマーメイド作成
　
●マーメイドDOMサイズMAX
　dom=マーメイド本体DOM
　svg=domの「svg」をDOM子要素取得
　svg.幅=svg.スタイル.「max-width」

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] なでしこ3のプログラムからマーメイド図を作成するツール

素材のアップロード