海龜繪圖

想像有隻海龜，只會前進與轉彎，在沙灘上爬行，爬過的路線都會留下痕跡，如果這隻海龜很特別，行走時有個規律，那它就會是隻有藝術感的海龜！

因為只會前進與轉彎，想以程式實作出海龜的行為並不困難，在 p5.js 中，借助 p5.Vector，以向量的方式可以更簡潔地實作出海龜。

class Turtle {
    // 起始位置 (x, y) 與頭面向的角度
    constructor(x = 0, y = 0, angle = 0) {
        this.coordinateVector = createVector(x, y);
        this.headingVector = createVector(1, 0).rotate(angle);
    }

    // 傳回座標
    coordinate() {
        return {
            x: this.coordinateVector.x,
            y: this.coordinateVector.y
        };
    }

    // 前進，為了便於繪圖，傳回起點與終點座標
    forward(length) {
        const from = this.coordinate();

        const v = p5.Vector.mult(this.headingVector, length);
        this.coordinateVector.add(v);

        const to = this.coordinate();

        return {from, to};
    }

    // 轉彎
    turn(angle) {
        this.headingVector.rotate(angle);
    }
}

如果海龜行走的規律是前進 length 長度，轉動 120 度，能畫出什麼圖案呢？一個三角形！

海龜繪圖法的價值在於，只要將前進、轉彎這兩個簡單動作，以一定規律來組合，就能呈現規律之美，就算每次只有前進、轉彎兩個動作，效果也已經令人驚嘆了：