🗺️Garden Builders

Visualizing the garden

A simple visualizer of the garden called the Garden Map has been inscribed on-chain, and its code expresses the canonical shape of the garden's path and the distribution of garden plots along the path.

The getSpiralPoints function creates the 3D coordinates of the spiral.

The getCumulativeDistances and getPositionForItemNumber functions calculate where the waypoint should be based on user input, and updatePointPosition updates the position of the waypoint.

The garden path

The garden's spiral path is generated using a parametric equation, where the coordinates of each point on the spiral are calculated using trigonometric functions.

function getSpiralPoints() {
    let e = [];
    let t = 2 * Math.PI;
    for (let n = 0; n <= 1e4; n++) {
        let i = Math.sqrt(80 * t) * Math.sqrt(n / 1e4);
        let o = 50 * Math.sqrt(i * i / 80);
        let r = i * i / 2;
        let a = i * i / (80 + i * i);
        let s = o * Math.cos(r);
        let l = 80 * (a *= Math.sqrt(i / Math.sqrt(80 * t)));
        let d = o * Math.sin(r);
        e.push(new THREE.Vector3(s, l, d));
    }
    return e;
}

Mathematical Equations:

The angle of rotation for each point on the spiral is given by r = i*i/2, where i is the scaled version of the index n. This ensures the spiral rotates as you move outward from the center.
The radial distance from the center (in the xz-plane) is calculated using o = 50 * Math.sqrt(i*i/80), where i determines how far out the point is from the center.
The y-coordinate is calculated using l = 80 * (a *= Math.sqrt(i/Math.sqrt(80*t))), where a is a factor that controls how the spiral moves vertically as it expands.

The x, y, and z coordinates of each point on the spiral are then calculated as:

x = o * Math.cos(r) (position in the x-direction based on the angle r)
y = l (height of the point)
z = o * Math.sin(r) (position in the z-direction based on the angle r)

These calculated points are stored in an array e and represent the 3D positions of the spiral path.

Seed distribution on the garden path

The garden plots for each seed are located on the spiral path using the following code:

function getCumulativeDistances(e) {
    let t = [0];
    for (let n = 1; n < e.length; n++) {
        let i = e[n].distanceTo(e[n - 1]);
        t.push(t[n - 1] + i);
    }
    return t;
}

function getPositionForItemNumber(e, t, n) {
    let i = Math.pow(n / 1e4, 1.5) * t[t.length - 1];
    for (let o = 1; o < t.length; o++) {
        if (t[o] >= i) {
            let r = e[o - 1];
            let a = e[o];
            let s = t[o] - t[o - 1];
            let l = (i - t[o - 1]) / s;
            return new THREE.Vector3(
                r.x + l * (a.x - r.x),
                r.y + l * (a.y - r.y),
                r.z + l * (a.z - r.z)
            );
        }
    }
    return e[e.length - 1];
}

function updatePointPosition(e) {
    let t = getCumulativeDistances(e);
    let n = getPositionForItemNumber(e, t, itemNumber);
    point.position.copy(n);
    targetColor.set(16711680);
    targetScale.set(1.2, 1.2, 1.2);
    hoverTimeout && clearTimeout(hoverTimeout);
    hoverTimeout = setTimeout(() => {
        targetColor.set(0);
        targetScale.set(1, 1, 1);
    }, 500);
}

The function getCumulativeDistances(e) computes the cumulative distance along the spiral path between consecutive points. This creates an array t where each entry represents the total distance traveled along the path up to that point.

The user's input number is normalized to the range of the cumulative distances array. This is done using the formula:

let i = Math.pow(n/1e4, 1.5) * t[t.length - 1];

Here, n is the input number, normalized to the total distance traveled along the spiral.

The function getPositionForItemNumber(e, t, itemNumber) uses linear interpolation to find the exact position of the garden plot on the spiral. It searches for the segment of the spiral where the cumulative distance matches the normalized distance i.

The function finds the two closest points (one before and one after) and interpolates between them to determine the precise location on the spiral corresponding to the input number.

The garden plot's position is then updated by setting the position of the point mesh in the scene to this calculated position.

Last updated 5 months ago