[編集モード] 手書き風描画プラグイン

Rough.jsを使って、なでしこ３でキャンバスに手書きっぽい描画をするNAKO3プラグイン。ちょっとかわいい❤　そんだけ！ｗｗｗ

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
＃ 手書き風描画プラグイン　Rough.nako3　v 1.0.4

Rough.jsを使ってキャンバスに手書きっぽい描画をするプラグイン
 https://roughjs.com/

※　取り込み文
！『https://n3s.nadesi.com/plain/Rough.nako3』を取り込む。

作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン: 3.4.4
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/

＃変数
ラフキャンバスとは変数。
変数 ラフ描画オプション＝空辞書。
変数 ラフパス作成情報＝{"連続パス作成中フラグ":オフ}

＃Rough.jsの取り込み
「https://unpkg.com/roughjs@latest/bundled/rough.js」をCDN取り込み。
5回:
    もし、ラフキャンバス≠NULLならば、抜ける。
    1秒待つ。

●(URLの|URLを)CDN取り込み
    変数 id＝URLを「/」で区切って、それ[(それの要素数)-1]
    id=idを「.」で区切って、それ[0]の「 」を空に置換。
    もし、(idのDOM要素ID取得)＝NULLならば、
        母艦＝DOM親要素。
        「head」へDOM親要素設定。
        スクリプト＝「script」のDOM部品作成。
        スクリプトの「id」にidをDOM属性設定。
        スクリプトの「src」にURLをDOM属性設定。
        母艦へDOM親要素設定。
        スクリプトの「load」がDOMイベント発火した時には:
            ラフ描画開始して戻る。
    違えば、
        ラフ描画開始して戻る。
    ここまで。
ここまで。

●ラフ描画開始
    もし、描画中キャンバス≠NULLならば、
        ラフキャンバス＝「rough.canvas」を[描画中キャンバス]でJS関数実行。
    違えば、
        「描画中キャンバスがありません」と言う。
    ここまで。
ここまで。

＃図形描画
●(AからBまで|Bへ)ラフ線描画
    変数 [x1,y1]=A。変数 [x2,y2]=B。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「line」を[x1,y1,x2,y2,opt]でJSメソッド実行。
ここまで。
●(xywhの|xywhへ|xywhに)ラフ四角描画
    変数 [x,y,w,h]＝xywh。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「rectangle」を[x,y,w,h,opt]でJSメソッド実行。
ここまで。

●(Pで|Pの|Pを)ラフ折れ線描画
    変数 opt＝描画オプション作成。
    ラフキャンバスの「linearPath」を[P,opt]でJSメソッド実行。
ここまで。
●(Pで|Pの|Pを)ラフ多角形描画
    変数 opt＝描画オプション作成。
    ラフキャンバスの「polygon」を[P,opt]でJSメソッド実行。
ここまで。

# 円や楕円、arcのサイズの引数がなんと「直径」。
# なでしこの描画命令やSVGは「半径」なので、コンランしないよう半径で指定するようにする。
●(中点へ半径の|中点に)ラフ円描画
    変数 [x,y]=中点。変数 直径＝半径*2。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「circle」を[x,y,直径,opt]でJSメソッド実行。
ここまで。
●(中点へ半径の|中点に)ラフ楕円描画
    F=関数(N) それはN*2。ここまで。
    変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「ellipse」を[x,y,w,h,opt]でJSメソッド実行。
ここまで。
# 開始角、終了角はラジアン。右回り固定。
●(中点に開始角から終了角まで半径の|中点へ半径で)ラフ扇描画
    F=関数(N) それはN*2。ここまで。
    変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「arc」を[x,y,w,h,開始角,終了角,はい,opt]でJSメソッド実行。
ここまで。
●(中点に開始角から終了角まで半径の|中点へ半径で)ラフ円弧描画
    F=関数(N) それはN*2。ここまで。
    変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。
    変数 opt＝描画オプション作成。
    ラフキャンバスの「arc」を[x,y,w,h,開始角,終了角,いいえ,opt]でJSメソッド実行。
ここまで。

※ 多角形と違い閉じないが、折れ線と違い塗り色が付く。スプラインと違いポイントが頂点になる。
●(Pで|Pの|Pを)ラフ曲線描画
    変数 opt＝描画オプション作成。
    ラフキャンバスの「curve」を[P,opt]でJSメソッド実行。
ここまで。

＃パス
●(dの|dを|dで)ラフパス描画
    変数 opt＝描画オプション作成。
    ラフキャンバスの「path」を[d,opt]でJSメソッド実行。
ここまで。

＃＃連続パス描画
//連続パス描画中は始点を省略してつないでいく。
●(始点から|始点に|始点へ)ラフ連続パス描画開始
    ラフパス作成情報["連続パス作成中フラグ"]＝オン。
    ラフパス作成情報["d"]＝空。
    もし、(始点＝空)または((始点の要素数)≠2)でなければ、ラフパス作成情報["d"]＝「M {始点[0]},{始点[1]} 」
    ラフパス作成情報["d"]で戻る。
ここまで。

●ラフ連続パス描画終了
    ラフパス作成情報["連続パス作成中フラグ"]＝オフ。
    ラフパス作成情報["d"]でラフパス描画。
ここまで。

●(追加パスで)ラフ連続パス追加処理
    ラフパス作成情報["d"]＝ラフパス作成情報["d"]&追加パス。
    ラフパス作成情報["d"]で戻る。
ここまで。

//連続パス描画でだけ
●(xyへ|xyに|xyまで)ラフパス描画位置移動
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。
    追加パス＝「M {xy[0]},{xy[1]} 」
    追加パスでラフ連続パス追加処理して、戻る。
ここまで。

＃＃線
●(xy1からxy2まで|xy2へ)ラフパス線描画
    x1,y1＝xy1。x2,y2＝xy2。
    始点＝「M {x1},{y1} 」。追加パス＝「L {x2},{y2} 」
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。
    d＝始点&追加パス。
    dでラフパス描画。
ここまで。

＃＃弧
//設定配列=[回転度,弧が180度より大きいか,時計回りか]
●(始点から終点まで設定配列で半径の)ラフパス弧形描画
    始点＝「M {始点[0]},{始点[1]} 」。
    もし、設定配列＝空ならば、設定配列＝[0,0,1]。
    回転度,大弧,右回転＝設定配列。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    追加パス＝「A {半径x},{半径y} {回転度} {大弧} {右回転} {終点[0]} {終点[1]} 」
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。
    d＝始点&追加パス。
    dでラフパス描画。
ここまで。

# 角度はラジアン。角度0は右端。
●(中点に開始角から終了角まで半径の|中点へ半径で)ラフパス扇描画
    中点x,中点y＝中点。
    開始角＝開始角のラジアン角度修正。
    終了角＝終了角のラジアン角度修正。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    x1＝半径x*COS(開始角)＋中点x。
    y1＝半径y*SIN(開始角)＋中点y。
    x2＝半径x*COS(終了角)＋中点x。
    y2＝半径y*SIN(終了角)＋中点y。
    回転度＝0。     # 回転度
    大弧＝いいえ。  # 弧が180度より大きいか
    もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換)
    もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。
    右回転＝はい。  # 時計回りか
    d＝「M {中点x},{中点y} L {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} z 」
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、dでラフ連続パス追加処理して、戻る。
    dでラフパス描画。
ここまで。

●(中点に開始角から終了角まで半径の|中点へ半径で)ラフパス円弧描画
    中点x,中点y＝中点。
    開始角＝開始角のラジアン角度修正。
    終了角＝終了角のラジアン角度修正。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    x1＝半径x*COS(開始角)＋中点x。
    y1＝半径y*SIN(開始角)＋中点y。 
    x2＝半径x*COS(終了角)＋中点x。
    y2＝半径y*SIN(終了角)＋中点y。
    回転度＝0。     # 回転度
    大弧＝いいえ。  # 弧が180度より大きいか
    もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換)
    もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。
    右回転＝はい。  # 時計回りか
    d＝「M {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} 」
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、dでラフ連続パス追加処理して、戻る。
    dでラフパス描画。
ここまで。

●(ラジアン度の)ラジアン角度修正　//0～360をラジアン変換の範囲に修正
    修正ラジアン度＝ラジアン度%(360をラジアン変換)
    もし、修正ラジアン度＜０ならば、修正ラジアン度＝修正ラジアン度+(360をラジアン変換)
    修正ラジアン度で戻る。
ここまで。

＃＃スプライン
●(始点から中継点配列で)ラフスプライン描画
    始点＝「M {始点[0]},{始点[1]} 」
    追加パス＝空。
　　中継点配列を反復
　　　　点x,点y＝中継点配列[対象キー]
　　　　追加パス＝追加パス&「T {点x},{点y} 」
　　ここまで。
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでラフパス描画。
ここまで。

＃＃ベジェ曲線
# 終点を配列にして複数指定すると、スプラインでつないでいく。
●(始点から制御点で終点まで|始点と終点の)ラフ二次ベジェ曲線描画
    始点＝「M {始点[0]},{始点[1]} 」
    制御点＝「Q {制御点[0]},{制御点[1]} 」
    追加パス＝制御点。
    もし、(終点[0]の要素数)＝１ならば、
        追加パス＝追加パス&「{終点[0]},{終点[1]} 」
    違えば、
        終点を反復
            もし、対象キー≠0ならば、追加パス＝追加パス&「T 」。
            追加パス＝追加パス&「{対象[0]},{対象[1]} 」。
        ここまで。
    ここまで。
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでラフパス描画。
ここまで。

●(始点から制御点配列で終点まで|始点と終点の)ラフ三次ベジェ曲線描画
    始点＝「M {始点[0]},{始点[1]} 」
    制御点A,制御点B＝制御点配列。
    追加パス＝「C {制御点A[0]},{制御点A[1]} {制御点B[0]},{制御点B[1]} {終点[0]},{終点[1]} 」
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでラフパス描画。
ここまで。

//連続パス描画でだけ
●(制御点で終点まで|終点と)ラフ三次ベジェ曲線続ける
    もし、ラフパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。
    もし、(終点[0]の要素数)＝1ならば、
        追加パス＝「S {制御点[0]},{制御点[1]} {終点[0]},{終点[1]} 」
        追加パスでラフ連続パス追加処理して、戻る。
    違えば、
        (終点の要素数)回。
            終点x,終点y＝終点[回数-1]。
            制御点x,制御点y＝制御点[回数-1]。
            追加パス＝「S {制御点x},{制御点y} {終点x},{終点y} 」
            追加パスでラフ連続パス追加処理。
        ここまで。
        戻る。
    ここまで。
ここまで。

＃図形
●(数で中点に半径の|中点へ)ラフ星描画
    外径,内径＝半径。
    もし、内径＝未定義ならば、内径は外径/2。
    P＝空配列。
    数*2回
        角度＝(360/(数*2))*(回数-1)。
        もし、回数%2＝１ならば、半径＝外径。
        違えば、半径＝内径。
        x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。
        y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。
        Pへ[x,y]を配列追加。
    ここまで。
    Pでラフ多角形描画。
ここまで。

●(xywhの|xywhへ|xywhに)ラフハート描画
    変数 [x,y,w,h]＝xywh。
    変数 r＝w/4。
    [x,y+r]にラフ連続パス描画開始。
        [x,y+r]から[x+r*2,y+r]までrのラフパス弧形描画。
        [x+r*2,y+r]から[x+w,y+r]までrのラフパス弧形描画。
        [x+r*2,y+h]まで[x+w,y+h/3*2]でラフ二次ベジェ曲線描画。
        [x,y+r]まで[x,y+h/3*2]でラフ二次ベジェ曲線描画。
    ラフ連続パス描画終了。
ここまで。
#------------------------------------------------------
＃オプション
# https://github.com/rough-stuff/rough/wiki#options
●描画オプション作成
    塗り色＝「sys.__fillStyle」をJS実行。
    線色＝「sys.__strokeStyle」をJS実行。
    ラフ描画オプション["fill"]＝塗り色。
    ラフ描画オプション["stroke"]＝線色。
    ラフ描画オプション["strokeWidth"]＝描画中コンテキスト["lineWidth"]。
    ラフ描画オプションを戻す。
ここまで。

＃＃設定
＃＃＃ラフ度合い
●(Aに|Aへ)ラフ描画粗さ設定
    ラフ描画オプション["roughness"]＝A。
ここまで。
●(Aに|Aへ)ラフ描画歪み設定
    ラフ描画オプション["bowing"]＝A。
ここまで。

＃＃＃塗り
●(Aに|Aへ)ラフ塗り方設定
    和スタイル＝{
        "斜線":"hachure","ハッチング":"hachure",
        "塗り潰し":"solid","塗潰し":"solid","単色":"solid",
        "ジグザグ":"zigzag","稲妻":"zigzag",
        "格子":"cross-hatch","チェック":"cross-hatch",
        "点々":"dots","水玉":"dots","ドット":"dots",
        "破線":"dashed","点線":"dashed","ダッシュ":"dashed",
        "ジグザグ線":"zigzag-line","ギザギザ":"zigzag-line",
    }
    もし、(和スタイルにAが辞書キー存在）ならば、A＝和スタイル[A]。
    ラフ描画オプション["fillStyle"]＝A。
ここまで。
●(Aに|Aへ)ラフ塗り線太さ設定
    ラフ描画オプション["fillWeight"]＝A。
ここまで。
●(Aに|Aへ)ラフ塗り線傾き設定
    ラフ描画オプション["hachureAngle"]＝A。
ここまで。
●(Aに|Aへ)ラフ塗り線間隔設定
    ラフ描画オプション["hachureGap"]＝A。
ここまで。

＃＃＃破線
●(Aに|Aへ)ラフストローク破線パターン設定
    線太さ＝描画中コンテキスト["lineWidth"]。
    もし、(Aの変数型確認)＝「object」でなければ、A＝線太さでAの破線パターン取得。
    ラフ描画オプション["strokeLineDash"]＝A。
ここまで。
●(Aに|Aへ)ラフ塗り破線パターン設定
    もし、ラフ描画オプションに「fillWeight」が辞書キー存在するならば、
        線太さ＝ラフ描画オプション["fillWeight"]。
    違えば、
        線太さ＝描画中コンテキスト["lineWidth"]/4。
    ここまで。
    もし、(Aの変数型確認)＝「object」でなければ、A＝線太さでAの破線パターン取得。
    ラフ描画オプション["fillLineDash"]＝A。
ここまで。
●(線太さでAの)破線パターン取得
    Aで条件分岐
        「細点線」ならば、A＝[線太さ,線太さ]。。。
        「点線」ならば、A＝[線太さ*2,線太さ*2]。。。
        「破線」ならば、A＝[線太さ*4,線太さ*2]。。。
        「一点鎖線」ならば、A＝[線太さ*6,線太さ*2,線太さ*2,線太さ*2]。。。
        「中長破線」ならば、A＝[線太さ*6,線太さ*2]。。。
        「長破線」ならば、A＝[線太さ*8,線太さ*2]。。。
        「長鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2]。。。
        「二点鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2,線太さ*2,線太さ*2]。。。
        違えば、A＝[]。。。
    ここまで。
    Aを戻す。
ここまで。

●(Aに|Aへ)ラフストローク破線開始位置設定
    ラフ描画オプション["strokeLineDashOffset"]＝A。
ここまで。
●(Aに|Aへ)ラフ塗り破線開始位置設定
    ラフ描画オプション["fillLineDashOffset"]＝A。
ここまで。

＃＃＃特定の塗り方専用
# 塗り方が破線の場合のみ
●(Aに|Aへ)ラフ破線スタイル間隔設定
    ラフ描画オプション["dashGap"]＝A。
ここまで。
●(Aに|Aへ)ラフ破線スタイル開始位置設定
    ラフ描画オプション["dashOffset"]＝A。
ここまで。

# 塗り方がジグザグ線の場合のみ
●(Aに|Aへ)ラフジグザグ線スタイル振幅設定
    ラフ描画オプション["zigzagOffset"]＝A。
ここまで。

＃取得
●塗り色取得
    「sys.__fillStyle」をJS実行を戻す。
ここまで。

●線色取得
    「sys.__strokeStyle」をJS実行を戻す。
ここまで。

●線太さ取得
    描画中コンテキスト["lineWidth"]を戻す。
ここまで。
#------------------------------------------------------
＃以下はテスト
もし、プラグイン名＝「メイン」ならば、
    # 円
    3に線太さ設定。黒色に線色設定。赤色に塗り色設定。# 塗り色、線色、線太さは、通常の描画命令と共有。
    「斜線」にラフ塗り方設定。1にラフ塗り線太さ設定。3にラフ塗り線間隔設定。
    [50,50]へ40のラフ円描画。

# 楕円
    青色に塗り色設定。「格子」にラフ塗り方設定。4にラフ塗り線間隔設定。
    [150,50]へ[50,30]のラフ楕円描画。

# 扇
    黄色に塗り色設定。「点々」にラフ塗り方設定。6にラフ塗り線間隔設定。
    [250,50]へ(-135をラジアン変換)から(135をラジアン変換)まで[40,40]のラフ扇描画。

# 四角
    緑色に塗り色設定。「ジグザグ線」にラフ塗り方設定。4にラフ塗り線間隔設定。
    [10,110,80,80]のラフ四角描画。

# 星
    黄金色に塗り色設定。「ジグザグ」にラフ塗り方設定。8にラフ塗り線間隔設定。
    5で[150,150]へ[50,20]のラフお星さま描画。

# ハート
    紫色に塗り色設定。「ジグザグ」にラフ塗り方設定。5にラフ塗り線太さ設定。12にラフ塗り線間隔設定。
    [210,110,80,80]のラフハート描画。

# 多角形
    「pink」に塗り色設定。90にラフ塗り線傾き設定。
    [[50,210],[10,290],[90,290]]のラフ多角形描画。

# 傾いた楕円（パス）
    茶色に塗り色設定。「破線」にラフ塗り方設定。-45にラフ塗り線傾き設定。
    3にラフ塗り線太さ設定。6にラフ塗り線間隔設定。4にラフ破線スタイル間隔設定。
    [110,250]からラフ連続パス描画開始。
        [110,250]から[190,250]まで[30,0,1]で[40,20]のラフパス弧形描画。
        [190,250]から[110,250]まで[30,0,1]で[40,20]のラフパス弧形描画。
    ラフ連続パス描画終了

# 四角（ラフ度を上げる）
    3にラフ描画粗さ設定。3にラフ描画歪み設定。
    水色に塗り色設定。「塗り潰し」にラフ塗り方設定。
    [210,210,80,80]のラフ四角描画。
ここまで。

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

🍯 なでしこ3貯蔵庫

[編集モード] 手書き風描画プラグイン

素材のアップロード