[編集モード] トロコイド曲線描画

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

# トロコイド曲線描画

!「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
}
　　　０秒後には、
　　　　デモ描画する
　　　ここまで
　　ここまで
　ここまで
ここまで

開始する

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

🍯 なでしこ3貯蔵庫

[編集モード] トロコイド曲線描画

素材のアップロード