Q&A
業者にコードレビューを依頼してください。
質問サイトで答えられるような内容量の質問では到底ありません。
お世話になっております。前回の三次元タートルグラフィックスからの続きです。
HTML+JavaScript+Three.jsで臓器を描くのに挑戦しています。
レポジトリ：https://github.com/katahiromz/3D
Turtle3D.js ソース: https://github.com/katahiromz/3D/blob/master/Turtle3D.js
HTMLソース: https://github.com/katahiromz/3D/blob/master/7.html
これが私が書いた肺臓です（7.html）。
この肺臓の黄色い気管支の外側に沿って血管を通したいと考えております。白い部分は肺胞です。動脈は赤色で、静脈は青色とします。最終的には3Dプリンタで利用したいと考えているので、血管は血液循環が可能なように、ちゃんと接続されていなければいけません。
よろしくお願い致します。
追記。三次元タートルグラフィックスの実装にTurtle3D.jsファイルを使用しております。タートルグラフィックスというのは、位置と向きの情報を持ったカメ（turtle）を操作して描画するというものです。
まずは、https://github.com/katahiromz/3Dを丸ごとダウンロードして、Turtle3D.jsをご覧下さい。turtle.look_xはX軸方向を向く関数です。turtle.look_yはY軸方向を向く関数です。turtle.look_zはZ軸方向を向く関数です。turtle.walk関数で進行方向に長さdistanceだけ前進し、引数enable_penがtrueなら進んだ分だけ線を描画します。turtle.turn, turtle.spin, turtle.pitchはカメの向きを調整する関数です。
簡単な例を提示します。
js
1 function draw() { 2 turtle.reset(); 3 turtle.look_x(); 4 turtle.walk(20); 5 turtle.turn(30); 6 turtle.walk(20); 7 }
このように書くとこうなります：
js
1 function draw() { 2 turtle.reset(); 3 turtle.look_y(); 4 turtle.walk(20); 5 turtle.turn(30); 6 turtle.walk(20); 7 }
このように書くとこうなります：
次のように書くと：
js
1 // 二次元の木構造を描画する。 2 function tree(size, depth, angle) { 3 if (depth == 0) 4 return; 5 var pg = turtle.get_pg(); 6 turtle.walk(size); 7 turtle.turn(angle); 8 tree(size * 0.75, depth - 1, angle); 9 turtle.turn(-2.0 * angle); 10 tree(size * 0.75, depth - 1, angle); 11 turtle.set_pg(pg); 12 } 13 14 // 全体の描画処理。 15 function draw() { 16 turtle.reset(); 17 turtle.look_y(); 18 turtle.line_color = 0xFF0000; 19 tree(7, 8, 30); 20 }
こうなります：
このようにタートルグラフィックスと描画アルゴリズムを使用すれば、再帰的に複雑な図形が描画できます。線の太さturtle.line_widthを指定すれば
js
1 function draw() { 2 turtle.reset(); 3 turtle.look_y(); 4 turtle.line_width = 0.25; 5 turtle.line_color = 0xFF0000; 6 tree(7, 8, 30); 7 }
次のように太い線も描けます：
平面的ならば、血管を通すのは比較的簡単です。Zを少しずらして描けば実現できます：
js
1 // 二次元の木構造を描画する。 2 function tree(size, depth, angle) { 3 if (depth == 0) { 4 turtle.add_sphere(0.5, turtle.get_pos(), 0xFFFF00); 5 return; 6 } 7 var pg = turtle.get_pg(); 8 turtle.walk(size); 9 turtle.turn(angle); 10 tree(size * 0.75, depth - 1, angle); 11 turtle.turn(-2.0 * angle); 12 tree(size * 0.75, depth - 1, angle); 13 turtle.turn(angle); 14 turtle.walk(-size); 15 } 16 17 // 全体の描画処理。 18 function draw() { 19 turtle.reset(); 20 turtle.look_y(); 21 turtle.line_width = 0.4; 22 turtle.line_color = 0xFFFFFF; 23 tree(7, 8, 30); 24 turtle.look_y(); 25 turtle.line_width = 0.1; 26 turtle.line_color = 0xFF0000; 27 turtle.position.z += 0.3; 28 tree(7, 8, 30); 29 turtle.look_y(); 30 turtle.line_width = 0.1; 31 turtle.line_color = 0x0000FF; 32 turtle.position.z -= 0.3 * 2; 33 tree(7, 8, 30); 34 }
こうなります：
問題は、三次元であって、気管支が2方向に分かれたり、3方向に分かれたりして血管の位置を定めるのが難しいことです。三次元でどうやって血管を通す再帰的なアルゴリズムを実現すればいいのかわかりません。問題の関数は次のtree3関数とlung関数です。これにどうやって血管を追加すればいいでしょうか。
js
1 // 三脚のように三方向に分かれる木構造を描画する。 2 function tree3(size, depth, angle) { 3 if (depth == 0) { 4 turtle.add_sphere(0.5, turtle.get_pos(), 0xFFFFFF); 5 return; 6 } 7 var pg = turtle.get_pg(); 8 turtle.line_width = size / 5; 9 turtle.walk(size); 10 turtle.pitch(angle); 11 tree3(size * 0.75, depth - 1, angle); 12 turtle.pitch(-angle); 13 turtle.spin(120); 14 turtle.pitch(angle); 15 tree3(size * 0.75, depth - 1, angle); 16 turtle.pitch(-angle); 17 turtle.spin(-240); 18 turtle.pitch(angle); 19 tree3(size * 0.75, depth - 1, angle); 20 turtle.set_pg(pg); 21 } 22 23 // 肺臓を描画する関数。 24 function lung(size, depth, angle) { 25 var pg = turtle.get_pg(); 26 turtle.line_width = size / 5; 27 turtle.spin(90); 28 turtle.walk(size); 29 turtle.pitch(angle * 1.2); 30 tree3(size * 0.75, depth - 1, angle); 31 turtle.pitch(-angle * 1.2); 32 turtle.spin(180); 33 turtle.pitch(angle * 1.2); 34 tree3(size * 0.75, depth - 1, angle); 35 turtle.set_pg(pg); 36 }
単一のDHTMLで実行可能で、許容範囲内のコストであれば、どのようなアルゴリズムでも構いません。
追記2. 接続方法の例を次のリンクに示します。
https://twitter.com/katahiromz/status/1287192744268451841?s=19
追記3. もう少しです。
https://twitter.com/katahiromz/status/1287289038190256130
https://github.com/katahiromz/3D/blob/master/8.html
もしくはもっとコード付きで、問題点を絞った質問内容にして下さい。
現状だと、コード全体を無作為に検証しなければならなく、
ハッキリ言って、けっこういい額のお金もらうレベルです。
自身で書いたコードではないのでしょうか。とりあえず質問がないです。作業依頼にしかとれない内容です。
追記しました。
回答1件
0
自己解決
自己解決しました。
https://twitter.com/katahiromz/status/1287307499989643264
https://github.com/katahiromz/3D/blob/master/8.html
js
1 // 三脚のように三方向に分かれる木構造を描画する。 2 function tree3(size, depth, angle) { 3 if (depth == 0) { 4 turtle.add_sphere(0.5, turtle.get_pos(), 0xFFFFFF); 5 return; 6 } 7 8 var pg = turtle.get_pg(); 9 turtle.line_width = size / 5; 10 turtle.line_color = 0xFFCC00; 11 turtle.walk(size); 12 turtle.pitch(angle); 13 tree3(size * 0.75, depth - 1, angle); 14 turtle.pitch(-angle); 15 turtle.spin(120); 16 turtle.pitch(angle); 17 tree3(size * 0.75, depth - 1, angle); 18 turtle.pitch(-angle); 19 turtle.spin(-240); 20 turtle.pitch(angle); 21 tree3(size * 0.75, depth - 1, angle); 22 turtle.set_pg(pg); 23 24 turtle.line_width = size / 20; 25 turtle.line_color = 0x0000FF; 26 turtle.pitch(90); 27 turtle.walk(-(size / 5 + size / 20), false); 28 turtle.pitch(-90); 29 turtle.walk(size / 20 / 2, false); 30 turtle.walk(size - size / 20 / 2); 31 32 turtle.pitch(12); 33 turtle.walk(-size / 20, false); 34 turtle.walk(size / 5.0); 35 turtle.pitch(40); 36 turtle.walk(-size / 20, false); 37 turtle.walk(size / 5.0); 38 turtle.pitch(45); 39 turtle.walk(-size / 20, false); 40 turtle.walk(size / 5.0); 41 turtle.set_pg(pg); 42 43 turtle.line_width = size / 20; 44 turtle.line_color = 0xFF0000; 45 turtle.pitch(90); 46 turtle.walk((size / 5 + size / 20), false); 47 turtle.pitch(-90); 48 turtle.walk(size / 20 / 2, false); 49 turtle.walk(size - size / 20 / 2); 50 turtle.walk(-size / 20 * 2, false); 51 var pg2 = turtle.get_pg(); 52 53 turtle.turn(90); 54 turtle.walk(-size / 20, false); 55 turtle.walk(size / 6.5); 56 turtle.pitch(-30); 57 turtle.walk(-size / 20, false); 58 turtle.walk(size / 6.5); 59 turtle.pitch(-30); 60 turtle.walk(-size / 20, false); 61 turtle.walk(size / 6.5); 62 turtle.pitch(-30); 63 turtle.walk(-size / 20, false); 64 turtle.walk(size / 6.5); 65 turtle.pitch(-30); 66 turtle.walk(-size / 20, false); 67 turtle.walk(size / 6.5); 68 turtle.pitch(-10); 69 turtle.walk(size / 20); 70 turtle.set_pg(pg2); 71 72 turtle.turn(-90); 73 turtle.walk(-size / 20, false); 74 turtle.walk(size / 6.5); 75 turtle.pitch(-30); 76 turtle.walk(-size / 20, false); 77 turtle.walk(size / 6.5); 78 turtle.pitch(-30); 79 turtle.walk(-size / 20, false); 80 turtle.walk(size / 6.5); 81 turtle.pitch(-30); 82 turtle.walk(-size / 20, false); 83 turtle.walk(size / 6.5); 84 turtle.pitch(-30); 85 turtle.walk(-size / 20, false); 86 turtle.walk(size / 6.5); 87 turtle.pitch(-10); 88 turtle.walk(size / 20); 89 turtle.set_pg(pg); 90 } 91 92 // 肺臓を描画する関数。 93 function lung(size, depth, angle) { 94 var pg = turtle.get_pg(); 95 turtle.line_width = size / 5; 96 turtle.line_color = 0xFFCC00; 97 turtle.spin(90); 98 turtle.walk(size); 99 turtle.pitch(angle * 1.2); 100 tree3(size * 0.75, depth - 1, angle); 101 turtle.pitch(-angle * 1.2); 102 turtle.spin(180); 103 turtle.pitch(angle * 1.2); 104 tree3(size * 0.75, depth - 1, angle); 105 turtle.set_pg(pg); 106 107 turtle.line_width = size / 20; 108 turtle.line_color = 0xFF0000; 109 turtle.pitch(90); 110 turtle.walk(-(size / 20 + size / 5), false); 111 turtle.pitch(-90); 112 turtle.walk(size); 113 turtle.set_pg(pg); 114 115 turtle.line_width = size / 20; 116 turtle.line_color = 0x0000FF; 117 turtle.pitch(90); 118 turtle.walk((size / 20 + size / 5), false); 119 turtle.pitch(-90); 120 turtle.walk(size); 121 turtle.set_pg(pg); 122 123 turtle.line_width = size / 20; 124 turtle.line_color = 0x0000FF; 125 turtle.pitch(90); 126 turtle.walk(-(size / 5 + size / 20), false); 127 turtle.pitch(-90); 128 turtle.walk(size / 20 / 2, false); 129 turtle.walk(size - size / 20 / 2); 130 131 turtle.pitch(12); 132 turtle.walk(-size / 20, false); 133 turtle.walk(size / 5.0); 134 turtle.pitch(40); 135 turtle.walk(-size / 20, false); 136 turtle.walk(size / 5.0); 137 turtle.pitch(45); 138 turtle.walk(-size / 20, false); 139 turtle.walk(size / 5.0); 140 turtle.set_pg(pg); 141 142 turtle.line_width = size / 20; 143 turtle.line_color = 0xFF0000; 144 turtle.pitch(90); 145 turtle.walk((size / 5 + size / 20), false); 146 turtle.pitch(-90); 147 turtle.walk(size / 20 / 2, false); 148 turtle.walk(size - size / 20 / 2); 149 turtle.walk(-size / 20 * 2, false); 150 var pg2 = turtle.get_pg(); 151 152 turtle.turn(90); 153 turtle.walk(-size / 20, false); 154 turtle.walk(size / 6.5); 155 turtle.pitch(-30); 156 turtle.walk(-size / 20, false); 157 turtle.walk(size / 6.5); 158 turtle.pitch(-30); 159 turtle.walk(-size / 20, false); 160 turtle.walk(size / 6.5); 161 turtle.pitch(-30); 162 turtle.walk(-size / 20, false); 163 turtle.walk(size / 6.5); 164 turtle.pitch(-30); 165 turtle.walk(-size / 20, false); 166 turtle.walk(size / 6.5); 167 turtle.pitch(-10); 168 turtle.walk(size / 20); 169 turtle.set_pg(pg2); 170 171 turtle.turn(-90); 172 turtle.walk(-size / 20, false); 173 turtle.walk(size / 6.5); 174 turtle.pitch(-30); 175 turtle.walk(-size / 20, false); 176 turtle.walk(size / 6.5); 177 turtle.pitch(-30); 178 turtle.walk(-size / 20, false); 179 turtle.walk(size / 6.5); 180 turtle.pitch(-30); 181 turtle.walk(-size / 20, false); 182 turtle.walk(size / 6.5); 183 turtle.pitch(-30); 184 turtle.walk(-size / 20, false); 185 turtle.walk(size / 6.5); 186 turtle.pitch(-10); 187 turtle.walk(size / 20); 188 turtle.set_pg(pg); 189 }
レポジトリは
https://github.com/katahiromz/3D
からダウンロードできます。
投稿2020/07/26 08:48
総合スコア186
あなたの回答
tips
プレビュー
