Waved Grid 🏁

Combines multiple of @reinder 's utils:
- Grid Grid variations
- Tortoise / transforms Transforms
- Simplex noise (as transform) Simplex Noise

Use the sliders or click these links to adjust variables:
- Waved Grid 🏁 (variation)
- Waved Grid 🏁 (variation)

Log in to post a comment.

// Global code will be evaluated once.
const turtle = new Tortoise();
const simplex = new SimplexNoise();


const totalInnerShapes = 10; // min=1, max=50, step=1
const innerDepth = 0; // min=-2.5, max=2.5, step=0.01
const innerPow = 1; // min=0, max=2, step=0.01
const density = 0.66; // min=0.05, max=1, step=0.01
const noiseAmplitude = 15; // min=1, max=20, step=0.01
const noiseFrequency = 0.009; // min=0.001, max=0.1, step=0.001
const baseShape = 0; // min=0, max=3, step=1
const seed = 50; /// min=1, max=100, step=1
const randomDistortion = .5; // min=0, max=1, step=0.01

function Simplex() { 
    return p => {
        const dx = noiseAmplitude * simplex.noise2D(scl(p, noiseFrequency));
        const dy = noiseAmplitude * simplex.noise2D(scl([p[1]+1000, -p[0] + 2500], noiseFrequency));
        return [p[0]+dx, p[1]+dy]; 
    }
}
turtle.addTransform(Simplex());

function walk(i) {
    const grid = 17; // min=3, max=21, step=2
    const size = 240;
    const scale = size / grid;
    const x = (i % grid) - (grid/2|0);
    const y = (i/grid|0) - (grid/2|0);
    
    // create base shape
    let points = baseShape % 2 == 0 ? createHexagon(x, y) : createSquare(x, y);
    
    // give vertices random offset
    points = randomizePoints(points, randomDistortion);
    
    // shatter shape into shapes
    const shapes = shatterPoints(points);
    
    // inner scales
    const scales = [];
    const totalScales = density > rand() ? totalInnerShapes : (density > rand() * 0.5 ? 1 : 0);
    for (let ii = 0; ii < totalScales; ++ii) scales.push(1 - Math.pow((ii/totalScales), innerPow)  * (1-innerDepth));

   // for each shape: repeatedly scale from center
    shapes.forEach(shapePoints => {
        scales.forEach(innerScale => {
            let points = shapePoints.map(point => scl(point, scale));
            let mid = [0, 0];
            points.forEach(p => {
                mid[0] += p[0] / points.length;
                mid[1] += p[1] / points.length;
            });
            points = points.map(p => add(scl(sub(p, mid), innerScale), mid));
            drawPoints(points, turtle);
        });
    });  
    
    return i < grid * grid - 1;
}

// shape generators 
function createSquare(x,y) {
    return [[x-.5,y+.5], [x-.5,y-.5], [x+.5,y-.5], [x+.5,y+.5]];
}

function createHexagon(x,y) {
    const h = .75, w = 3/8 * (h/(Math.sqrt(3)/4)), center = [x*2*w + (y%2)*w, y*3/2*h];
    return [[0,-h],[-w,-h/2],[-w,h/2],[0,h],[w,h/2],[w,-h/2]].map(p => add(center, p));
}
// vec2 functions
function scl(a,b)   { return [a[0]*b, a[1]*b]; }
function add(a,b)   { return [a[0]+b[0], a[1]+b[1]]; }
function sub(a,b)   { return [a[0]-b[0], a[1]-b[1]]; }
function dot(a,b)   { return a[0]*b[0] + a[1]*b[1]; }
function len(a)     { return Math.sqrt(a[0]**2 + a[1]**2); }
function nrm(a)     { return scl(a, 1/len(a)); }
function lrp(a,b,f) { return [a[0]*f+b[0]*(1-f), a[1]*f+b[1]*(1-f)]; }

// shape functions
function randomizePoints(points, scale = 1) {
    return points.map( point => add(point, 
        scl( add( [hash(dot(point, [11, 13])), hash(dot(point, [17, 19]))], [-.5,-.5]), scale)));
}

function drawPoints(points, turtle) {
    if (points.length > 0) turtle.jump(points[points.length-1]);
    points.forEach(point => turtle.goto(point));
}

function shatterPoints(points) {
    if (points.length <= 3) return [points];
    
    // calculate angle at each vertex and sort them
    const l = points.length, angles = points.map( (p, i) => {
        return [dot( nrm( sub(points[(i+1)%l],p)), nrm( sub( points[(i+l-1)%l],p))), i];
    }).sort((a,b) => a[0]-b[0]);
    
    // split at vertex with largest angle or just randomly
    const splitChange = baseShape < 2 ? 0 : 1; /// min=0, max=1, step=0.01
    if (rand() < splitChange) {
        const i = angles[0][1], d = 3 + (l-4)|0, p2 = [...points, ...points];
        return [...shatterPoints([...p2].splice(i, d)), ...shatterPoints([...p2].splice(i+d-1, l-d+2))];
    } else {
        return [points];
    }
}

// pseudo random methods
function hash(p) {
    p += seed;
    p = 1103515245 * (((p) >> 1) ^ (p));
    p = 1103515245 * (p ^ (p>>3));
    p = p ^ (p >> 16);
    return p / 1103515245 % 1;	
}

let rseed = seed;
function rand() {
    rseed = 1103515245 * (((rseed) >> 1) ^ (rseed));
    rseed = 1103515245 * (rseed ^ (rseed>>3));
    rseed = rseed ^ (rseed >> 16);
    return rseed / 1103515245 % 1;	
}


////////////////////////////////////////////////////////////////
// Tortoise utility code (Minimal Turtle and Transforms)
// https://turtletoy.net/turtle/102cbd7c4d
////////////////////////////////////////////////////////////////

function Tortoise(x, y) {
    class Tortoise extends Turtle {
        constructor(x, y) {
            super(x, y);
            this.ps = Array.isArray(x) ? [...x] : [x || 0, y || 0];
            this.transforms = [];
        }
        addTransform(t) {
            this.transforms.push(t);
            this.jump(this.ps);
            return this;
        }
        applyTransforms(p) {
            if (!this.transforms) return p;
            let pt = [...p];
            this.transforms.map(t => { pt = t(pt); });
            return pt;
        }
        goto(x, y) {
            const p = Array.isArray(x) ? [...x] : [x, y];
            const pt = this.applyTransforms(p);
            if (this.isdown() && (this.pt[0]-pt[0])**2 + (this.pt[1]-pt[1])**2 > 4) {
               this.goto((this.ps[0]+p[0])/2, (this.ps[1]+p[1])/2);
               this.goto(p);
            } else {
                super.goto(pt);
                this.ps = p;
                this.pt = pt;
            }
        }
        position() { return this.ps; }
    }
    return new Tortoise(x,y);
}

////////////////////////////////////////////////////////////////
// Simplex Noise utility code. Created by Reinder Nijhoff 2020
// https://turtletoy.net/turtle/6e4e06d42e
// Based on: http://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
////////////////////////////////////////////////////////////////
function SimplexNoise(seed = 1) {
	const grad = [  [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],
	            	[1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],
            		[0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1] ];
	const perm = new Uint8Array(512);
            		
	const F2 = (Math.sqrt(3) - 1) / 2, F3 = 1/3;
	const G2 = (3 - Math.sqrt(3)) / 6, G3 = 1/6;

	const dot2 = (a, b) => a[0] * b[0] + a[1] * b[1];
	const sub2 = (a, b) => [a[0] - b[0], a[1] - b[1]];
	const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
	const sub3 = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];

	class SimplexNoise {
		constructor(seed = 1) {
			for (let i = 0; i < 512; i++) {
				perm[i] = i & 255;
			}
			for (let i = 0; i < 255; i++) {
				const r = (seed = this.hash(i+seed)) % (256 - i)  + i;
				const swp = perm[i];
				perm[i + 256] = perm[i] = perm[r];
				perm[r + 256] = perm[r] = swp;
			}
		}
		noise2D(p) {
			const s = dot2(p, [F2, F2]);
			const c = [Math.floor(p[0] + s), Math.floor(p[1] + s)];
			const i = c[0] & 255, j = c[1] & 255;
			const t = dot2(c, [G2, G2]);

			const p0 = sub2(p, sub2(c, [t, t]));
			const o  = p0[0] > p0[1] ? [1, 0] : [0, 1];
			const p1 = sub2(sub2(p0, o), [-G2, -G2]);
			const p2 = sub2(p0, [1-2*G2, 1-2*G2]);
			
			let n =  Math.max(0, 0.5-dot2(p0, p0))**4 * dot2(grad[perm[i+perm[j]] % 12], p0);
			    n += Math.max(0, 0.5-dot2(p1, p1))**4 * dot2(grad[perm[i+o[0]+perm[j+o[1]]] % 12], p1);
		    	n += Math.max(0, 0.5-dot2(p2, p2))**4 * dot2(grad[perm[i+1+perm[j+1]] % 12], p2);
			
			return 70 * n;
		}
		noise3D(p) {
			const s = dot3(p, [F3, F3, F3]);
			const c = [Math.floor(p[0] + s), Math.floor(p[1] + s), Math.floor(p[2] + s)];
			const i = c[0] & 255, j = c[1] & 255, k = c[2] & 255;
			const t = dot3(c, [G3, G3, G3]);

			const p0 = sub3(p, sub3(c, [t, t, t]));
            const [o0, o1] = p0[0] >= p0[1] ? p0[1] >= p0[2] ? [ [1, 0, 0], [1, 1, 0] ] 
                                                             : p0[0] >= p0[2] ? [ [1, 0, 0], [1, 0, 1] ] 
                                                                              : [ [0, 0, 1], [1, 0, 1] ] 
                                            : p0[1] < p0[2]  ? [ [0, 0, 1], [0, 1, 1] ] 
                                                             : p0[0] < p0[2]  ? [ [0, 1, 0], [0, 1, 1] ] 
                                                                              : [ [0, 1, 0], [1, 1, 0] ];
			const p1 = sub3(sub3(p0, o0), [-G3, -G3, -G3]);
			const p2 = sub3(sub3(p0, o1), [-2*G3, -2*G3, -2*G3]);
			const p3 = sub3(p0, [1-3*G3, 1-3*G3, 1-3*G3]);
			
			let n  = Math.max(0, 0.6-dot3(p0, p0))**4 * dot3(grad[perm[i+perm[j+perm[k]]] % 12], p0);
	            n += Math.max(0, 0.6-dot3(p1, p1))**4 * dot3(grad[perm[i+o0[0]+perm[j+o0[1]+perm[k+o0[2]]]] % 12], p1);
	            n += Math.max(0, 0.6-dot3(p2, p2))**4 * dot3(grad[perm[i+o1[0]+perm[j+o1[1]+perm[k+o1[2]]]] % 12], p2);
                n += Math.max(0, 0.6-dot3(p3, p3))**4 * dot3(grad[perm[i+1+perm[j+1+perm[k+1]]] % 12], p3);

			return 32 * n;
		}
		hash(i) {
            i = 1103515245 * ((i >> 1) ^ i);
            const h32 = 1103515245 * (i ^ (i>>3));
            return h32 ^ (h32 >> 16);
		}
	}
	return new SimplexNoise(seed);
}