トロコイド曲線描画 📖

ぐるぐる定規です。トロコイド曲線というらしいです。そのまま実行すると起動時のオプション選択でいくつかの組み合わせが選べます。

プログラム: (→大)
# トロコイド曲線描画 !「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 } 　　　０秒後には、 　　　　デモ描画する 　　　ここまで 　　ここまで 　ここまで ここまで 開始する