当前位置:   article > 正文

高斯帕曲线 Gosper curve理解与js实现_three.js中如何使用gosper

three.js中如何使用gosper

    最近看threejs相关的知识点,发现一个 比较有趣的曲线-Gosper curve,如图所示:

是由无数个基本图像组成

    类似的曲线还有很多,比如龙曲线(Dragon curve)、Koch曲线(Koch curve)、摩尔定律曲线(Moore curve)、谢尔宾斯基曲线(Sierpiński curve)、奥斯古德曲线(Osgood curve)等等,这些曲线的共有特性为降维,以Gosper为例,当曲线足够长时,它可以充满一个二维的矩形,此时通过曲线的长度就可以表示二维矩形的某一点,同理可以上升为三维。这些曲线的实际应用之一就是作为地图的索引,详情请点击点击打开链接

    废话这么多,来看此曲线的定义和伪代码,粘贴自wiki点击打开链接

    The Gosper curve can be represented using an L-System with rules as follows:

    

Angle: 60°
Axiom: {\displaystyle A} A
Replacement rules:
{\displaystyle A\mapsto A-B--B+A++AA+B-} A\mapsto A-B--B+A++AA+B-
{\displaystyle B\mapsto +A-BB--B-A++A+B} B\mapsto +A-BB--B-A++A+B

    In this case both A and B mean to move forward, + means to turn left 60 degrees and - means to turn right 60 degrees - using a "turtle"-style program such as Logo.

    上面代码中+代表加60,-代表减60,两个--代表减120。

to rg :st :ln
make "st :st - 1
make "ln :ln / sqrt 7
if :st > 0 [rg :st :ln rt 60 gl :st :ln  rt 120 gl :st :ln lt 60 rg :st :ln lt 120 rg :st :ln rg :st :ln lt 60 gl :st :ln rt 60]
if :st = 0 [fd :ln rt 60 fd :ln rt 120 fd :ln lt 60 fd :ln lt 120 fd :ln fd :ln lt 60 fd :ln rt 60]
end

to gl :st :ln
make "st :st - 1
make "ln :ln / sqrt 7
if :st > 0 [lt 60 rg :st :ln rt 60 gl :st :ln gl :st :ln rt 120 gl :st :ln rt 60 rg :st :ln lt 120 rg :st :ln lt 60 gl :st :ln]
if :st = 0 [lt 60 fd :ln rt 60 fd :ln fd :ln rt 120 fd :ln rt 60 fd :ln lt 120 fd :ln lt 60 fd :ln]
end

   js代码如下:(代码参照Three.js开发指南)

  1. function gosper(a, b) {
  2. var turtle = [0, 0, 0];
  3. var points = [];
  4. //var count = 0;
  5. rg(a, b, turtle);
  6. return points;
  7. function rt(x) {
  8. turtle[2] += x;
  9. }
  10. function lt(x) {
  11. turtle[2] -= x;
  12. }
  13. function fd(dist) {
  14. points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
  15. //var dir = turtle[2] * (Math.PI / 180);
  16. //turtle[0] += Math.cos(dir) * dist;
  17. //turtle[1] += Math.sin(dir) * dist;
  18. //points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
  19. }
  20. function rg(st, ln, turtle) {
  21. st--;
  22. ln = ln / 2.6457;
  23. if (st > 0) {
  24. rg(st, ln, turtle);
  25. rt(60);
  26. gl(st, ln, turtle);
  27. rt(120);
  28. gl(st, ln, turtle);
  29. lt(60);
  30. rg(st, ln, turtle);
  31. lt(120);
  32. rg(st, ln, turtle);
  33. rg(st, ln, turtle);
  34. lt(60);
  35. gl(st, ln, turtle);
  36. rt(60);
  37. }
  38. if (st == 0) {
  39. fd(ln);
  40. rt(60);
  41. fd(ln);
  42. rt(120);
  43. fd(ln);
  44. lt(60);
  45. fd(ln);
  46. lt(120);
  47. fd(ln);
  48. fd(ln);
  49. lt(60);
  50. fd(ln);
  51. rt(60)
  52. }
  53. }
  54. function gl(st, ln, turtle) {
  55. st--;
  56. ln = ln / 2.6457;
  57. if (st > 0) {
  58. lt(60);
  59. rg(st, ln, turtle);
  60. rt(60);
  61. gl(st, ln, turtle);
  62. gl(st, ln, turtle);
  63. rt(120);
  64. gl(st, ln, turtle);
  65. rt(60);
  66. rg(st, ln, turtle);
  67. lt(120);
  68. rg(st, ln, turtle);
  69. lt(60);
  70. gl(st, ln, turtle);
  71. }
  72. if (st == 0) {
  73. lt(60);
  74. fd(ln);
  75. rt(60);
  76. fd(ln);
  77. fd(ln);
  78. rt(120);
  79. fd(ln);
  80. rt(60);
  81. fd(ln);
  82. lt(120);
  83. fd(ln);
  84. lt(60);
  85. fd(ln);
  86. }
  87. }
  88. }
    其中fd方法就获得曲线的某一个点值
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/138577
推荐阅读
相关标签
  

闽ICP备14008679号