▶ 実 行
▶ 実行
クリア
トロコイド曲線描画
by てぃふと@うぇいく
# トロコイド曲線描画 !「https://n3s.nadesi.com/plain/1833.nako3」を取り込む 画面横は描画中キャンバス["width"] 画面縦は描画中キャンバス["height"] #基本線形状は「直線」 # 形:直線 or 円 # 向: 正 or 負 線のどちら側にギアを転がすかの設定 # 形が直線の場合のみ # 軸:X or Y 基準となる軸。描画の際に変化する。 # K :係数 # A :接辺 # 軸がXの場合Y=K*X+A、軸がYの場合X=K*Y+A。 # 形が円の場合のみ # X :円の中心のX # Y :円の中心のY # R :円の半径。LCMを求める必要上、整数のみ可能。 # また、以下が算出項目設定により設定される # DT:経過に対する変換係数 # 直線では軸への係数。円では角度(度)への係数 # L :トロコイドを描画するための経過の数。 # 0からLまで描画すると一周繋がる。 基本線情報は{ # 形:"直線", 形:"円", 向:"負", 軸:"X", A:0, K:0, R:150, X:160, Y:160 } # 基本線に接して転がすギアの情報 # R:ギアの半径。LCMを求める必要上、整数のみ可能。 # D:ギアの向きを基準にした描画点の向きの差。基本的に0で問題ない。 # L:ギアの中心からの描画点までの距離 # 物理に拘束されないので、ギアのサイズを超えたり負数も可能。 ギア情報は{ R:80, D:0, L:70 } 設定画面情報は{ OKボタン:"描画開始", CANCELボタン:"キャンセル", 項目:[ { 名前:"BASE",タイトル:"基本線", 選択肢:[ {値:"Y0",テキスト:"直線(Y=0)"}, {値:"Y300",テキスト:"直線(Y=300)"}, {値:"R150",テキスト:"円(R=150)の内側"}, {値:"R140",テキスト:"円(R=140)の内側"}, {値:"R60",テキスト:"円(R=60)の外側"}, {値:"R50",テキスト:"円(R=50)の外側"}, ] }, { 名前:"GEAR",タイトル:"動円", 選択肢:[ {値:"R80L70",テキスト:"半径80,描画70"}, {値:"R80L50",テキスト:"半径80,描画50"}, {値:"R90L70",テキスト:"半径90,描画70"}, {値:"R40L30",テキスト:"半径40,描画30"}, {値:"R30L40",テキスト:"半径30,描画40"}, ] }, ] 既定:{ BASE:"R150", GEAR:"R80L70", } } 旧点はNULL 描画キャンバスはNULL 主キャンバスは描画中キャンバス ●キャンバス準備とは CANVASは「CANVAS」のDOM要素作成 CANVAS["width"]は画面横 CANVAS["height"]は画面縦 CANVASの「display」に「none」をDOMスタイル設定 描画中キャンバス["parentNode"]にCANVASをDOM子要素追加 CANVASで戻る ここまで ●(基本線情報に)算出項目設定とは 基本線情報["形"]で条件分岐する 「直線」ならば、 もし、基本線情報["K"]≠0ならば、 「直線の係数は0以外は未対応です。」でエラー発生 ここまで 基本線情報["DT"]は1 もし、基本線情報["軸"]＝"X"ならば、 基本線情報["L"]は400 違えば、 基本線情報["L"]は200 ここまで ここまで 「円」ならば、 Tは基本線情報["R"]とギア情報["R"]のLCM 基本線情報["DT"]は360/(2*PI*基本線情報["R"]) 基本線情報["L"]は((T/基本線情報["R"]*360/基本線情報["DT"])の整数部分)+1 ここまで ここまで ここまで # 単位時間ごとの座標と接線の垂直方向を返す # 方向は度(Degree)で右を0として時計回り。 ●(tの)基本線とは Xとは変数 Yとは変数 Dとは変数 DNとは変数 Rとは変数 基本線情報["形"]で条件分岐する 「直線」ならば、 もし、基本線情報["K"]≠0ならば、 「直線の係数は0以外は未対応です。」でエラー発生 ここまで もし、基本線情報["軸"]＝"X"ならば、 Xはt*基本線情報["DT"] 接点は{ X:X, Y:X*基本線情報["K"]+基本線情報["A"], D:90, N:t } 違えば、 Yはt*基本線情報["DT"] 接点は{ X:Y*基本線情報["K"]+基本線情報["A"], Y:Y, D:0, N:t } ここまで ここまで 「円」ならば、 Dはt*基本線情報["DT"] DNは(D/360)の整数部分 DはD-DN*360 Rは基本線情報["R"] 接点は{ X:COS(DEG2RAD(D))*R+基本線情報["X"], Y:SIN(DEG2RAD(D))*R+基本線情報["Y"], N:DN*2*PI*R+D/360*2*PI*R, D:D } ここまで 違えば、 「対応していない形です」でエラー発生 ここまで ここまで もし、基本線情報["向"]=「負」ならば、 接点["D"]は接点["D"]+180 ここまで 接点で戻る ここまで ●(基本線情報の)基本線図形描画とは Xとは変数 Yとは変数 接点とは変数 接点1とは変数 接点2とは変数 変換接点とは変数 変換接点1とは変数 変換接点2とは変数 基本線情報["形"]で条件分岐する 「直線」ならば、 もし、基本線情報["軸"]＝"X"ならば、 Xは0 接点1は{ X:X, Y:X*基本線情報["K"]+基本線情報["A"], } Xは基本線情報["L"]*基本線情報["DT"] 接点2は{ X:X, Y:X*基本線情報["K"]+基本線情報["A"], } 違えば Yは0 接点1は{ X:Y*基本線情報["K"]+基本線情報["A"], Y:Y, } Yは基本線情報["L"]*基本線情報["DT"] 接点2は{ X:Y*基本線情報["K"]+基本線情報["A"], Y:Y, } ここまで 変換接点1は接点1の座標変換 変換接点2は接点2の座標変換 [変換接点1["X"],変換接点1["Y"]]から[変換接点2["X"],変換接点2["Y"]]まで線描画 ここまで 「円」ならば、 接点は{ X:基本線情報["X"], Y:基本線情報["Y"], } 変換接点は接点の座標変換 [変換接点["X"],変換接点["Y"]]に基本線情報["R"]の円描画 ここまで 違えば、 「対応していない形です」でエラー発生 ここまで ここまで ここまで # 描画する際に座標を変換して調整する # 左下から(50,50)の位置を原点としてX+が右、Y+が上になる。 # Y軸の反転に伴い方向が右を0とした反時計回りとなる。 ●(接点の)座標変換とは 変換とは変数 変換は{} 変換["X"]は接点["X"]+50 変換["Y"]は画面縦-接点["Y"]-50 もし、接点["D"]≠NULLならば、 変換["D"]は(((接点["D"]/360)の整数部分)+1)*360-接点["D"] ここまで 変換で戻る ここまで ●(XYに)次点描画とは もし、旧点≠NULLならば、 旧点からXYへ線描画 ここまで 旧点はXY ここまで # 接点に含まれる座標と垂直方向をもとにして # 垂直線を長さLで描画する。 ●(接点からLで)支柱描画とは X0とは変数 Y0とは変数 X1とは変数 Y1とは変数 X0は接点["X"] Y0は接点["Y"] X1は接点["X"]+COS(DEG2RAD(接点["D"]))*L Y1は接点["Y"]+SIN(DEG2RAD(接点["D"]))*L [X0,Y0]から[X1,Y1]へ線描画 ここまで ●(接点から)ギア算出とは Xとは変数 Yとは変数 Nとは変数 Dとは変数 DNとは変数 Xは接点["X"]+COS(DEG2RAD(接点["D"]))*ギア情報["R"] Yは接点["Y"]+SIN(DEG2RAD(接点["D"]))*ギア情報["R"] Nは接点["N"] Dは接点["D"] DNは(N/(2*PI*ギア情報["R"]))の整数部分 NはN-DN*2*PI*ギア情報["R"] 基本線情報["形"]で条件分岐する 「直線」ならば、 もし、基本線情報["向"]=「正」ならば、 Dは360-(N/(2*PI*ギア情報["R"]))*360-D 違えば、 Dは(N/(2*PI*ギア情報["R"]))*360-D ここまで ここまで 「円」ならば、 もし、基本線情報["向"]=「正」ならば、 Dは(N/(2*PI*ギア情報["R"]))*360+D+180 違えば、 Dは360-(N/(2*PI*ギア情報["R"]))*360+D+180 ここまで ここまで ここまで DはD-((D/360)の整数部分)*360 ギア姿勢は{ X:X, Y:Y, D:D } ギア姿勢で戻る ここまで ●(ギア姿勢を)ギア描画とは X1とは変数 Y1とは変数 X2とは変数 Y2とは変数 赤色に線色設定 空に塗り色設定 1に線太さ設定 [ギア姿勢["X"],ギア姿勢["Y"]]にギア情報["R"]の円描画 X1はギア姿勢["X"]+COS(DEG2RAD(ギア姿勢["D"]))*ギア情報["R"] Y1はギア姿勢["Y"]+SIN(DEG2RAD(ギア姿勢["D"]))*ギア情報["R"] [ギア姿勢["X"],ギア姿勢["Y"]]から[X1,Y1]へ線描画 X2はギア姿勢["X"]+COS(DEG2RAD(ギア姿勢["D"]+ギア情報["D"]))*ギア情報["L"] Y2はギア姿勢["Y"]+SIN(DEG2RAD(ギア姿勢["D"]+ギア情報["D"]))*ギア情報["L"] [X2,Y2]に2の円描画 ここまで ●(ギア姿勢から)描画点算出とは Dとは変数 Xとは変数 Yとは変数 Dは(ギア姿勢["D"]+ギア情報["D"])%360 Xはギア姿勢["X"]+COS(DEG2RAD(D))*ギア情報["L"] Yはギア姿勢["Y"]+SIN(DEG2RAD(D))*ギア情報["L"] 描画点は{ X:X, Y:Y, D:D } 描画点で戻る ここまで ●(AとBの)LCMとは Cとは変数 Dとは変数 Cは1 Dは2 (1=1)の間繰り返す もし、(A=1)||(B=1)ならば、 抜ける ここまで もし、(D>A)||(D>B)ならば、 抜ける ここまで もし、((A%D)=0)&&((B%D)=0)ならば、 C=C*D A=A/D B=B/D 違えば、 もし、D=2ならば、 D=3 違えば、 D=D+2 ここまで ここまで ここまで (A*B*C)で戻る ここまで # 基本線の確認用 # 基本線をつないだ線と、各点からの垂直線を描画する ●基本線描画とは tとは変数 接点とは変数 変換接点とは変数 1に線太さ設定 空に塗り色設定 (基本線情報["L"])回繰り返す tは回数-1 接点はtの基本線 変換接点は接点の座標変換 黒色に線色設定 [変換接点["X"],変換接点["Y"]]に次点描画 赤色に線色設定 変換接点から20で支柱描画 0.01秒待つ ここまで ここまで # ギアの動きの確認用 # 基本線の図形を描画しギアの変化をアニメーションする ●ギア動作描画とは Lとは変数 tとは変数 接点とは変数 変換接点とは変数 ギア姿勢とは変数 変換ギア姿勢とは変数 1に線太さ設定 空に塗り色設定 Lは基本線情報["L"] もし、基本線情報["形"]=「円」ならば、 Lは(360/基本線情報["DT"]+1)の整数部分 ここまで (L)回繰り返す tは回数-1 全描画クリア 黒色に線色設定 基本線情報の基本線図形描画 接点はtの基本線 変換接点は接点の座標変換 ギア姿勢は接点からギア算出 変換ギア姿勢はギア姿勢の座標変換 変換ギア姿勢をギア描画 0.01秒待つ ここまで ここまで # 図の描画用 # 基本線の描画ととロコイド図の描画を行う ●描画動作描画とは 全描画クリア 1に線太さ設定 黒色に線色設定 空に塗り色設定 基本線情報の基本線図形描画 空に塗り色設定 青色に線色設定 (基本線情報["L"])回繰り返す tは回数-1 接点はtの基本線 ギア姿勢は接点からギア算出 描画点はギア姿勢から描画点算出 変換描画点は描画点の座標変換 [変換描画点["X"],変換描画点["Y"]]に次点描画 # 0.01秒待つ ここまで ここまで # デモ用 # 図の描画の様子を補助図を付けてアニメーションする ●ギア付描画動作描画とは tとは変数 接点とは変数 描画点とは変数 ギア姿勢とは変数 変換描画点とは変数 変換ギア姿勢とは変数 描画キャンバスはキャンバス準備 描画キャンバスへ描画開始 空に塗り色設定 空に線色設定 全描画クリア (基本線情報["L"])回繰り返す tは回数-1 描画キャンバスへ描画開始 空に塗り色設定 青色に線色設定 接点はtの基本線 ギア姿勢は接点からギア算出 描画点はギア姿勢から描画点算出 変換描画点は描画点の座標変換 [変換描画点["X"],変換描画点["Y"]]に次点描画 主キャンバスへ描画開始 1に線太さ設定 黒色に線色設定 空に塗り色設定 全描画クリア 描画キャンバスを[0,0]に画像描画 基本線情報の基本線図形描画 # 変換接点は接点の座標変換 # 変換接点からギア情報["R"]で支柱描画 変換ギア姿勢はギア姿勢の座標変換 変換ギア姿勢をギア描画 0.01秒待つ ここまで 描画中キャンバス["parentNode"]から描画キャンバスをDOM子要素削除 ここまで ●デモ描画とは 基本線情報に算出項目設定 #基本線描画 #ギア動作描画 #描画動作描画 ギア付描画動作描画 ここまで ●開始とは Dとは変数 Dは設定画面情報のオプション設定画面表示 Dの成功時には(RESULT) RESULT["BASE"]で条件分岐 「Y0」ならば、 基本線情報は{ 形:"直線", 向:"正", 軸:"X", A:0, K:0 } ここまで 「Y300」ならば、 基本線情報は{ 形:"直線", 向:"負", 軸:"X", A:300, K:0 } ここまで 「R150」ならば、 基本線情報は{ 形:"円", 向:"負", R:150, X:160, Y:160 } ここまで 「R140」ならば、 基本線情報は{ 形:"円", 向:"負", R:140, X:160, Y:160 } ここまで 「R60」ならば、 基本線情報は{ 形:"円", 向:"正", R:60, X:160, Y:160 } ここまで 「R50」ならば、 基本線情報は{ 形:"円", 向:"正", R:50, X:160, Y:160 } ここまで ここまで RESULT["GEAR"]で条件分岐 「R80L70」ならば、 ギア情報は{ R:80, D:0, L:70 } ここまで 「R80L50」ならば、 ギア情報は{ R:80, D:0, L:50 } ここまで 「R30L40」ならば、 ギア情報は{ R:30, D:0, L:40 } ここまで 「R40L30」ならば、 ギア情報は{ R:40, D:0, L:30 } ここまで ここまで ０秒後には、 デモ描画する ここまで ここまで Dの失敗時には(REASON) もし、REASON["理由"]＝「キャンセル」ならば、 「キャンセルされました。」を表示する。 違えば、 「ダイアログ要素が使用できないため、既定の設定で開始します」を表示する 基本線情報は{ 形:"円", 向:"負", R:150, X:160, Y:160 } ギア情報は{ R:80, D:0, L:70 } ０秒後には、 デモ描画する ここまで ここまで ここまで ここまで 開始する