赞
踩
最近看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开发指南)
- function gosper(a, b) {
-
- var turtle = [0, 0, 0];
- var points = [];
- //var count = 0;
-
- rg(a, b, turtle);
-
-
- return points;
-
- function rt(x) {
- turtle[2] += x;
- }
-
- function lt(x) {
- turtle[2] -= x;
- }
-
- function fd(dist) {
- points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
- //var dir = turtle[2] * (Math.PI / 180);
- //turtle[0] += Math.cos(dir) * dist;
- //turtle[1] += Math.sin(dir) * dist;
- //points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
- }
-
- function rg(st, ln, turtle) {
- st--;
- ln = ln / 2.6457;
- if (st > 0) {
- rg(st, ln, turtle);
- rt(60);
- gl(st, ln, turtle);
- rt(120);
- gl(st, ln, turtle);
- lt(60);
- rg(st, ln, turtle);
- lt(120);
- rg(st, ln, turtle);
- rg(st, ln, turtle);
- lt(60);
- gl(st, ln, turtle);
- 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)
- }
- }
-
- function gl(st, ln, turtle) {
- st--;
- ln = ln / 2.6457;
- if (st > 0) {
- lt(60);
- rg(st, ln, turtle);
- rt(60);
- gl(st, ln, turtle);
- gl(st, ln, turtle);
- rt(120);
- gl(st, ln, turtle);
- rt(60);
- rg(st, ln, turtle);
- lt(120);
- rg(st, ln, turtle);
- lt(60);
- gl(st, ln, turtle);
- }
- 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);
- }
- }
- }

其中fd方法就获得曲线的某一个点值
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。