Bézier Grid 🌊

Know to Turtletoy is Bézier Grid 🌊 (variation) like in Interpolated random grid and Bézier Grid 🌊 (variation) like in Grid

This adds Bézier curves to the equation, making things like Bézier Grid 🌊 (variation) possible.

en.wikipedia.org/wiki/b%c3%a9zier_curve

Log in to post a comment.

const seed = 0; //min=0 max=99999 step=1
const type = 2; //min=0 max=2 step=1 (Linear, Fixed Bezier, Dynamic Bezier)
const rows = 25; //min=1 max=50 step=1
const columns = 25;//min=1 max=50 step=1
const padding = 10; //min=-50 max=50 step=1
const displace = .48; //min=0 max=2 step=.01
const pDisplace = .5; //min=0 max=1 step=.01
const horizontals = 25; //min=0 max=40 step=1
const verticals = 25; //min=0 max=40 step=1
const bezierLength = .3; //min=0 max=3 step=.1
const penOpacity = .3;//min=.1 max=1 step=.1

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(penOpacity);
const CanvasDimensions = [200, 200];
const CellDimensions = [(CanvasDimensions[0] - padding - padding) / columns, (CanvasDimensions[1] - padding - padding) / rows];


if(seed !== 0) {
    // Seedable random number generator by David Bau: http://davidbau.com/archives/2010/01/30/random_seeds_coded_hints_and_quintillions.html
    !function(a,b,c,d,e,f,g,h,i){function j(a){var b,c=a.length,e=this,f=0,g=e.i=e.j=0,h=e.S=[];for(c||(a=[c++]);d>f;)h[f]=f++;for(f=0;d>f;f++)h[f]=h[g=s&g+a[f%c]+(b=h[f])],h[g]=b;(e.g=function(a){for(var b,c=0,f=e.i,g=e.j,h=e.S;a--;)b=h[f=s&f+1],c=c*d+h[s&(h[f]=h[g=s&g+b])+(h[g]=b)];return e.i=f,e.j=g,c})(d)}function k(a,b){var c,d=[],e=typeof a;if(b&&"object"==e)for(c in a)try{d.push(k(a[c],b-1))}catch(f){}return d.length?d:"string"==e?a:a+"\0"}function l(a,b){for(var c,d=a+"",e=0;e<d.length;)b[s&e]=s&(c^=19*b[s&e])+d.charCodeAt(e++);return n(b)}function m(c){try{return o?n(o.randomBytes(d)):(a.crypto.getRandomValues(c=new Uint8Array(d)),n(c))}catch(e){return[+new Date,a,(c=a.navigator)&&c.plugins,a.screen,n(b)]}}function n(a){return String.fromCharCode.apply(0,a)}var o,p=c.pow(d,e),q=c.pow(2,f),r=2*q,s=d-1,t=c["seed"+i]=function(a,f,g){var h=[];f=1==f?{entropy:!0}:f||{};var o=l(k(f.entropy?[a,n(b)]:null==a?m():a,3),h),s=new j(h);return l(n(s.S),b),(f.pass||g||function(a,b,d){return d?(c[i]=a,b):a})(function(){for(var a=s.g(e),b=p,c=0;q>a;)a=(a+c)*d,b*=d,c=s.g(1);for(;a>=r;)a/=2,b/=2,c>>>=1;return(a+c)/b},o,"global"in f?f.global:this==c)};if(l(c[i](),b),g&&g.exports){g.exports=t;try{o=require("crypto")}catch(u){}}else h&&h.amd&&h(function(){return t})}(this,[],Math,256,6,52,"object"==typeof module&&module,"function"==typeof define&&define,"random");
    Math.seedrandom('anything here' + seed);
    // Add a seed in seedrandom, then Math.random will use this seed
}

const add2 = (a, b) => [a[0]+b[0], a[1]+b[1]];
const sub2 = (a, b) => [a[0]-b[0], a[1]-b[1]];
const mul2 = (a, b) => [a[0]*b[0], a[1]*b[1]];
const scale2 = (a, s) => mul2(a, [s,s]);
const lerp2 = (a,b,t) => [a[0]*(1-t) + b[0]*t, a[1]*(1-t) + b[1]*t];
const lenSq2 = (a) => a[0]**2+a[1]**2;
const len2 = (a) => Math.sqrt(lenSq2(a));

const bezier2 = (origin, relativeOriginControl, target, relativeTargetControl, steps) => Array.from({length: steps + 1}, (v, idx) => {
    const t = idx/steps;
    
    const originControl = add2(origin, relativeOriginControl);
    const targetControl = add2(target, relativeTargetControl);
    
    const originDev = lerp2(origin, originControl, t);
    const secDev = lerp2(originControl, targetControl, t);
    const targetDev = lerp2(targetControl, target, t);
    
    const originPt = lerp2(originDev, secDev, t);
    const targetPt = lerp2(secDev, targetDev, t);

    return lerp2(originPt, targetPt, t);
});
const redistributeLinear = (path, steps) => {
    const segments = path.map((v, i, arr) => [v, arr[(i+1)%arr.length], len2(sub2(v, arr[(i+1)%arr.length]))]);
    const last = segments.pop();
    const length = segments.reduce((p, v) => p + v[2], 0);
    const stepLength = length/steps;

    let lengthLeft = stepLength;
    const result = [segments[0][0]];
    while(segments.length > 0) {
        const segment = segments.shift();
        const delta = lengthLeft - segment[2];
        if(delta > 0) {
            lengthLeft = delta;
            continue;
        }
        if(delta === 0) {
            result.push(segment[1]);
            lengthLeft = stepLength;
            continue;
        }
        const newPoint = lerp2(segment[0], segment[1], lengthLeft / segment[2]);
        result.push(newPoint);
        segments.unshift([newPoint, segment[1], segment[2] - lengthLeft]);
        lengthLeft = stepLength;
    }
    if(result.length < steps + 1) result.push(last[0]);
    return result;
}

// Global code will be evaluated once.
const turtle = new Turtle();

const randomDisplacement = (angle) => {
    const fullDisplacement = scale2(mul2(CellDimensions, [Math.cos(angle),  Math.sin(angle)]), displace);
    //0 <= pDisplace <= .5 then no to full random displacement
    //.5 <= pDisplace <= 1 then full random to full displacement
    const factor = (pDisplace <= .5)? pDisplace * 2 * Math.random(): 1 - ((1-pDisplace) * 2) * Math.random();
    return scale2(fullDisplacement, factor);
}

const crossings = Array.from({length: rows + 1}).map((row, y) => Array.from({length: columns + 1}).map((column, x) => { return {
    origin: [padding - CanvasDimensions[0] / 2 + x * CellDimensions[0], padding - CanvasDimensions[1] / 2 + y * CellDimensions[1]],
    location: add2(
        [padding - CanvasDimensions[0] / 2 + x * CellDimensions[0], padding - CanvasDimensions[1] / 2 + y * CellDimensions[1]],
        randomDisplacement(Math.random() * Math.PI * 2)
    )};
}));

const point = (...pts) => pts.forEach((p, i) => {
    turtle.jump(p[0], p[1] - .15);
    turtle.circle(.3);
});

// The walk function will be called until it returns false.
function walk(i) {
    const column = i % (columns + 1);
    const row = i / (columns + 1) | 0;

    if(row == rows) return false;
    if(column == columns) return true;
    
    const isRightEdge = (column == columns - 1);
    const isBottomEdge = (row == rows - 1);
    
    switch(type) {
        case 0:
            drawLines(crossings[row][column], crossings[row + 1][column], crossings[row][column + 1], crossings[row + 1][column + 1], horizontals, isBottomEdge);
            drawLines(crossings[row][column], crossings[row][column + 1], crossings[row + 1][column], crossings[row + 1][column + 1], verticals, isRightEdge);
            break;
        case 1:
        case 2:
            drawBezierLines(crossings[row][column], crossings[row + 1][column], crossings[row][column + 1], crossings[row + 1][column + 1], horizontals, isBottomEdge, type == 1);
            drawBezierLines(crossings[row][column], crossings[row][column + 1], crossings[row + 1][column], crossings[row + 1][column + 1], verticals, isRightEdge, type == 1);
            break
    }
    return true;
}

function drawLines(leftTop, leftBottom, rightTop, rightBottom, steps, drawLast) {
    for(let i = 0, max = steps - 1; i < steps - (drawLast? 0: 1); i++) {
        turtle.jump(lerp2(leftTop.location, leftBottom.location, i/max));
        turtle.goto(lerp2(rightTop.location, rightBottom.location, i/max));
    }
}

function drawBezierLines(leftTop, leftBottom, rightTop, rightBottom, steps, drawLast, fixed = true) {
    const fixedFromControl = scale2(sub2(rightTop.origin, leftTop.origin), .5);
    const fixedToControl = scale2(fixedFromControl, -1);

    const rightTopControl = scale2(sub2(rightTop.location, rightTop.origin), bezierLength);
    const leftTopControl = scale2(sub2(leftTop.location, leftTop.origin), bezierLength);
    
    const rightBottomControl = scale2(sub2(rightBottom.location, rightBottom.origin), bezierLength);
    const leftBottomControl = scale2(sub2(leftBottom.location, leftBottom.origin), bezierLength);
    
    
    const fromLine = redistributeLinear(
                        bezier2(leftTop.location, leftTopControl,
                             leftBottom.location, leftBottomControl, 40)
                        , steps);
    const toLine   = redistributeLinear(
                        bezier2(rightTop.location, rightTopControl,
                             rightBottom.location, rightBottomControl, 40)
                        , steps);
    
    const cellDim = Math.max(len2(sub2(leftTop.location, rightTop.location)), len2(sub2(leftBottom.location, rightBottom.location)));
    
    fromLine.forEach((v, i) => {
        if(i < fromLine.length - 1 || drawLast) {
            const p = i/(fromLine.length - 1);

            const fromControl = fixed? fixedFromControl: lerp2(leftTopControl, leftBottomControl, p);
            const toControl = fixed? fixedToControl: lerp2(rightTopControl, rightBottomControl, p);
            
            const pts = bezier2(v, fromControl, toLine[i], toControl, Math.ceil(cellDim));
            pts.forEach((p, i) => {
                turtle[i == 0? 'jump': 'goto'](p);
            });
        }
    });
}