Boxed polka dots ⚪

Including a big inverting and rotating one than can apply lensing effects possibly in a vortex.

Inverting + Loupe: Boxed polka dots ⚪ (variation)
Rotation: Boxed polka dots ⚪ (variation)
Magnification: Boxed polka dots ⚪ (variation)
Black hole warp: Boxed polka dots ⚪ (variation)
Flashlight effect: Boxed polka dots ⚪ (variation)
Vortex: Boxed polka dots ⚪ (variation)

Log in to post a comment.

const grid = 10; //min=1 max=50 step=1
const margin = 5; //min=0 max=50 step=1
const diameter = .5; //min=.01 max=1 step=.01
const bigDiameter = .5 //min=0 max=1 step=.01
const topleft = 0; //min=0 max=1 step=1 (Black on white, White on black)
const randomness = 1; //min=0 max=1 step=.01
const onlyOutlines = 0; //min=0 max=1 step=1 (No, Yes)
const innerGreys = 1; //min=0 max=2 step=1 (Brighten, Neutral, Darken)
const outerGreys = 1; //min=0 max=2 step=1 (Brighten, Neutral, Darken)
const inverseBig = 1; //min=0 max=1 step=1 (No, Yes)
const rotation = 0; //min=0 max=1 step=.01
const vortex = 0; //min=-1 max=1 step=.1
//const warping = 0; //min=-1 max=1 step=.01
//const magnification = 1; //min=0 max=2 step=.01
const lensWarp = 0; //min=-1 max=1 step=.01
const lensMagnify = 1; //min=0 max=3 step=.01
const lensingLevel = 1; //min=0 max=5 step=.01
const pen = .15; //min=.01 max=1 step=.01 How thick is the pen you loaded your plotter with?
const seed = 0; //min=0 max=500 step=1 Setting seed to 0 resets it to Date.now() so it becomes a dynamic seed

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(1);

// 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(''+(seed === 0? Date.now(): seed));
// Add a seed in seedrandom, then Math.random will use this seed

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

const bigSize = (200 - margin - margin);
const cellSize = bigSize / grid;

const greyscale = (greying, inverse) => {
    switch(greying) {
        case 2: return [[[1, pen]], [[1, 4*pen]]];
        case 1: return [[[1, pen]], [[]]];
        case 0: return [[[1, 2*pen]], [[]]];
    }
}

const hatchOutside = greyscale(outerGreys);
const hatchInside = inverseBig == 1? greyscale(innerGreys): greyscale(innerGreys).reverse();

const bigCircleLocation = Array.from({length: 2}).map(v => randomness * ((2*Math.random()-1) * (1-bigDiameter) * bigSize / 2));
const bigCircleRadius = bigSize * bigDiameter / 2;
const bigCircle = new Path(...getRegularPolygonPoints(bigCircleRadius).map(pt => add2(bigCircleLocation, pt)));

const lensLoupe = [, ]
const transforms = [
    Transpose(scale2(bigCircleLocation, -1)),
    Rotate(2 * Math.PI * rotation),
    //Warp(warping, bigCircleRadius),
    //Magnify(magnification, bigCircleRadius),
    Vortex(vortex, bigCircleRadius),
    Lens(lensWarp, lensMagnify, bigCircleRadius, lensingLevel),
    Transpose(bigCircleLocation)
];

// The walk function will be called until it returns false.
function walk(i) {
    const col = i % grid;
    const row = i / grid | 0;
    
    const location = [cellSize*(.5-(grid/2))].map(v => [v+col*cellSize,v+row*cellSize]).pop();
    const circleLocation = Array.from({length: 2}).map(v => randomness * ((2*Math.random()-1) * (1-diameter) * cellSize / 2));

    const even = (col+row+topleft)%2 == 0;
    
    if(diameter > 0) {
        const circle = new Path(...getRegularPolygonPoints(diameter * cellSize / 2).map(pt => add2(circleLocation, add2(location, pt))));

        applyMagic(polygons, turtle, circle, bigCircle, onlyOutlines == 1? []: even? hatchOutside[0]: hatchOutside[1], onlyOutlines == 1? []: even? hatchInside[1]: hatchInside[0], onlyOutlines == 1, cellSize / 4 | 0, transforms);
    }
    const square = new Path(...getRegularPolygonPoints(Math.SQRT2 * cellSize / 2, 4, Math.PI/4).map(pt => add2(location, pt)));
    
    applyMagic(polygons, turtle, square, bigCircle, onlyOutlines == 1? []: even? hatchOutside[1]: hatchOutside[0], onlyOutlines == 1? []: even? hatchInside[0]: hatchInside[1], onlyOutlines == 1, cellSize * 5, transforms);

    return i < grid**2-1;
}

function applyMagic(polygons, turtle, circle, bigCircle, hatchOutside, hatchInside, outline, pointCountIncrease, transforms) {
    let intersections = circle.getIntersections(bigCircle, true);
    if(intersections.length > 0) {
        const paths = circle.splitByPath(bigCircle, true);
    
        paths[0].drawPolygon(polygons, turtle, hatchOutside, outline); //outside
        paths[1].increasePointCount(pointCountIncrease).drawPolygon(polygons, turtle, hatchInside, outline, transforms); //inside
        return;
    }
    if(bigCircle.contains(circle.pts[0])) {
        circle.increasePointCount(pointCountIncrease).drawPolygon(polygons, turtle, hatchInside, outline, transforms); //inside
        return;
    }
    circle.drawPolygon(polygons, turtle, hatchOutside, outline); //outside
}

function Transpose(pt) { return (a) => add2(pt, a); }
function Rotate(angle) { const rot = rot2(angle); return (a) => trans2(rot, a); }
function Warp(amount, radius) { return (a) => {
        const length = len2(a);
        if(approx1(length, 0)) return a;
        const newLength = Math.min(radius, Math.max(0, length + (radius - length) * amount));
        return scale2(a, newLength/length);
    }
}
function Magnify(amount, radius) { return (a) => {
        const length = len2(a);
        if(approx1(length, 0) || approx1(length - radius, 0, .1)) return a;
        const newLength = Math.min(radius, Math.max(0, length * amount));
        return scale2(a, newLength/length);
    }
}
function Lens(amountWarp, amountMagnify, radius, level) {
    const warp = Warp(amountWarp, radius);
    const magnification = Magnify(amountMagnify, radius);
    
    return (pt) => {
        const length = len2(pt);
        return lerp2(magnification(pt), warp(pt), (length/radius)**level);
    }
}
function Vortex(turns, radius) { return (a) => {
        const amount = len2(a)/radius;
        return trans2(rot2(((1-amount)**2) * turns * 2 * Math.PI), a);
    }
}

function Path(...pts) {
    const tourize = (p) => p.pts.concat([p.pts[0]]);
    const intersect_info2 = (as, ad, bs, bd) => {
        const d = [bs[0] - as[0], bs[1] - as[1]];
        const det = bd[0] * ad[1] - bd[1] * ad[0];
        if(det === 0) return false;
        const res = [(d[1] * bd[0] - d[0] * bd[1]) / det, (d[1] * ad[0] - d[0] * ad[1]) / det];
        return [...res, add2(as, scale2(ad, res[0]))];
    }
    //different return than my usual segment_intersect2
    const segment_intersect2 = (a,b,c,d, inclusive = true) => {
        const i = intersect_info2(a, sub2(b, a), c, sub2(d, c));
        if(i === false) return false;
        const t = inclusive? 0<=i[0]&&i[0]<=1&&0<=i[1]&&i[1]<=1: 0<i[0]&&i[0]<1&&0<i[1]&&i[1]<1;
        return t?i:false;
    }

    class Path {
        constructor(...pts) {
            this.pts = pts;
        }
        draw(turtle, asTour = false, transforms = []) {
            (asTour? tourize(this): this.pts).map(pt => transforms.reduce((a, c) => c(a), pt)).forEach((pt, i) => turtle[i == 0? 'jump':'goto'](pt));
        }
        drawPolygon(polygons, turtle, hatch = [], outline = false, transforms = []) {
            const p = polygons.create();
            if(transforms.length == 0) {
                p.addPoints(...this.pts);
            } else {
                p.addPoints(...this.pts.map(pt => transforms.reduce((a, c) => c(a), pt)));
            }
            hatch.forEach(v => p.addHatching(...v));
            if(outline) p.addOutline();
            polygons.draw(turtle, p);
        }
        increasePointCount(n = 2) {
            this.pts = this.pts.flatMap((pt, i, a) => 
                Array.from({length: n})
                     .flatMap((w, j) => [lerp2(pt, a[(i+1)%a.length], j/n)])
            );
            return this;
        }
        contains(pt) {
           return tourize(this).map((v, i, a) => intersect_info2(v, sub2(a[(i+1)%a.length], v), pt, [pt[0], Number.MAX_SAFE_INTEGER])).filter(ii => ii !== false && 0 <= ii[0] && ii[0] < 1 && 0 < ii[1]).length % 2 == 1;
        }
        getIntersections(path, asTour = false) { //intersection
            const path1 = asTour? tourize(this): this.pts;
            const path2 = asTour? tourize(path): path.pts;
            return path1.flatMap((pt1, i1) => 
                i1 == path1.length - 1? [[false]]: path2.map((pt2, i2) => 
                    i2 == path2.length - 1? [false]: 
                    [segment_intersect2(pt1, path1[i1 + 1], pt2, path2[i2 + 1]), i1, i2]
                )
            ).filter(v => v[0] !== false);
        }
        splitByPath(path, asTour = false) { //only works for convex polygons, not concaves... And only for 2 intersections, not 4 with e.g. overlapping ellipses where they look like a + sign
            const iss = this.getIntersections(path, asTour);
            if(iss.length < 2) return false;
            //console.log('inter', iss);

            const pts_one = [];
            const joined = [];
            for(let i = 0; i <= iss[0][1]; i++) {
                pts_one.push(this.pts[i]);
            }
            pts_one.push(iss[0][0][2]);
            
            let pts_one_in_path = approx1(this.pts[0], iss[0][0][2])? null: (path.contains(this.pts[0])? true: false);
            
            //should we go left or right? convex so this works
            const direction = (() => {
                if(iss[0][2] != iss[1][2]) {
                    return this.contains(path.pts[(iss[0][2] + 1) % path.pts.length])? 1: -1;
                }
                const directionToNextIntersection = sub2(iss[1][0][2], iss[0][0][2]);
                const directionToNextNodeOfPath = sub2(path.pts[(iss[0][2] + 1) % path.pts.length], path.pts[iss[0][2]]);
                
                return dot2(directionToNextIntersection, directionToNextNodeOfPath) < 0? -1: 1;
            })();
            
            const startAt = iss[0][2] + (direction == 1? 1: 0);
            const endAtNotInclusive = (iss[1][2] - (direction == 1? 0: 1) + path.pts.length) % path.pts.length;
            if(iss[0][2] != iss[1][2]) {
                for(let i = startAt; i != endAtNotInclusive; i = (i + direction + path.pts.length) % path.pts.length) {
                    joined.push(path.pts[i]);
                }
            }
            joined.forEach(pt => pts_one.push(pt));
            
            pts_one.push(iss[1][0][2]);

            for(let i = iss[1][1] + 1; i < this.pts.length; i++) {
                pts_one.push(this.pts[i]);
            }
            if(pts_one_in_path === null) pts_one_in_path = path.contains(iss[1][1] + 1);
            
            const pts_two = [iss[0][0][2]];
            for(let i = iss[0][1] + 1; i <= iss[1][1]; i++) {
                pts_two.push(this.pts[i]);
            }
            pts_two.push(iss[1][0][2]);
            
            const result = [new Path(...pts_one), new Path(...pts_two.concat(joined.reverse()))];
            return pts_one_in_path? result.reverse(): result;
        }
    }
    return new Path(...pts);
}

function getRegularPolygonPoints(r, steps = null, rotatedStart = 0) { return Array.from({length: steps === null? Math.max(12, 2 * Math.PI * r): steps}).map((v, i, a) =>[rotatedStart + Math.PI * 2 * i / a.length].map(v => [r * Math.sin(v), r * -Math.cos(v)]).pop()); }


/// Below is the standard lib I just copy paste under almost all my turtles

function approx1(a,b,delta=0.0001) { return -delta < a-b && a-b < delta }

////////////////////////////////////////////////////////////////
// 2D Vector Math utility code - Created by several Turtletoy users
////////////////////////////////////////////////////////////////
function norm2(a) { return scale2(a, 1/len2(a)); }
function add2(a, b) { return [a[0]+b[0], a[1]+b[1]]; }
function sub2(a, b) { return [a[0]-b[0], a[1]-b[1]]; }
function mul2(a, b) { return [a[0]*b[0], a[1]*b[1]]; }
function scale2(a, s) { return [a[0]*s,a[1]*s]; }
function lerp2(a,b,t) { return [a[0]*(1-t) + b[0]*t, a[1]*(1-t) + b[1]*t]; }
function lenSq2(a) { return a[0]**2+a[1]**2; }
function len2(a) { return Math.sqrt(lenSq2(a)); }
function rot2(a) { return [Math.cos(a), -Math.sin(a), Math.sin(a), Math.cos(a)]; }
function trans2(m, a) { return [m[0]*a[0]+m[2]*a[1], m[1]*a[0]+m[3]*a[1]]; } //Matrix(2x1) x Matrix(2x2)
function dist2(a,b) { return Math.hypot(...sub2(a,b)); }
function dot2(a,b) { return a[0]*b[0]+a[1]*b[1]; }
function cross2(a,b) { return a[0]*b[1] - a[1]*b[0]; }
function multiply2(a2x2, a) { return [(a[0]*a2x2[0])+(a[1]*a2x2[1]),(a[0]*a2x2[2])+(a[1]*a2x2[3])]; } //Matrix(2x2) x Matrix(1x2)
function intersect_info2(as, ad, bs, bd) {
    const d = [bs[0] - as[0], bs[1] - as[1]];
    const det = bd[0] * ad[1] - bd[1] * ad[0];
    if(det === 0) return false;
    const res = [(d[1] * bd[0] - d[0] * bd[1]) / det, (d[1] * ad[0] - d[0] * ad[1]) / det];
    return [...res, add2(as, scale2(ad, res[0]))];
}
function intersect_ray2(a, b, c, d) {
    const i = intersect_info2(a, b, c, d);
    return i === false? i: i[2];
}
function segment_intersect2(a,b,c,d, inclusive = true) {
    const i = intersect_info2(a, sub2(b, a), c, sub2(d, c));
    if(i === false) return false;
    const t = inclusive? 0<=i[0]&&i[0]<=1&&0<=i[1]&&i[1]<=1: 0<i[0]&&i[0]<1&&0<i[1]&&i[1]<1;
    return t?i[2]:false;
}
function approx2(a,b,delta=0.0001) { return len2(sub2(a,b)) < delta }
function eq2(a,b) { return a[0]==b[0]&&a[1]==b[1]; }
function clamp2(a, tl, br) { return [Math.max(Math.min(br[0], a[0]), tl[0]), Math.max(Math.min(br[1], a[1]), tl[1])]; }
function nearSq2(test, near, delta = .0001) {
    return near[0] - delta < test[0] && test[0] < near[0] + delta &&
           near[1] - delta < test[1] && test[1] < near[1] + delta;
}

////////////////////////////////////////////////////////////////
// Polygon Clipping utility code - Created by Reinder Nijhoff 2019
// (Polygon binning by Lionel Lemarie 2021)
// https://turtletoy.net/turtle/a5befa1f8d
////////////////////////////////////////////////////////////////
function Polygons(){const t=[],s=25,e=Array.from({length:s**2},t=>[]),n=class{constructor(){this.cp=[],this.dp=[],this.aabb=[]}addPoints(...t){let s=1e5,e=-1e5,n=1e5,h=-1e5;(this.cp=[...this.cp,...t]).forEach(t=>{s=Math.min(s,t[0]),e=Math.max(e,t[0]),n=Math.min(n,t[1]),h=Math.max(h,t[1])}),this.aabb=[s,n,e,h]}addSegments(...t){t.forEach(t=>this.dp.push(t))}addOutline(){for(let t=0,s=this.cp.length;t<s;t++)this.dp.push(this.cp[t],this.cp[(t+1)%s])}draw(t){for(let s=0,e=this.dp.length;s<e;s+=2)t.jump(this.dp[s]),t.goto(this.dp[s+1])}addHatching(t,s){const e=new n;e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]);const h=Math.sin(t)*s,o=Math.cos(t)*s,a=200*Math.sin(t),i=200*Math.cos(t);for(let t=.5;t<150/s;t++)e.dp.push([h*t+i,o*t-a],[h*t-i,o*t+a]),e.dp.push([-h*t+i,-o*t-a],[-h*t-i,-o*t+a]);e.boolean(this,!1),this.dp=[...this.dp,...e.dp]}inside(t){let s=0;for(let e=0,n=this.cp.length;e<n;e++)this.segment_intersect(t,[.1,-1e3],this.cp[e],this.cp[(e+1)%n])&&s++;return 1&s}boolean(t,s=!0){const e=[];for(let n=0,h=this.dp.length;n<h;n+=2){const h=this.dp[n],o=this.dp[n+1],a=[];for(let s=0,e=t.cp.length;s<e;s++){const n=this.segment_intersect(h,o,t.cp[s],t.cp[(s+1)%e]);!1!==n&&a.push(n)}if(0===a.length)s===!t.inside(h)&&e.push(h,o);else{a.push(h,o);const n=o[0]-h[0],i=o[1]-h[1];a.sort((t,s)=>(t[0]-h[0])*n+(t[1]-h[1])*i-(s[0]-h[0])*n-(s[1]-h[1])*i);for(let n=0;n<a.length-1;n++)(a[n][0]-a[n+1][0])**2+(a[n][1]-a[n+1][1])**2>=.001&&s===!t.inside([(a[n][0]+a[n+1][0])/2,(a[n][1]+a[n+1][1])/2])&&e.push(a[n],a[n+1])}}return(this.dp=e).length>0}segment_intersect(t,s,e,n){const h=(n[1]-e[1])*(s[0]-t[0])-(n[0]-e[0])*(s[1]-t[1]);if(0===h)return!1;const o=((n[0]-e[0])*(t[1]-e[1])-(n[1]-e[1])*(t[0]-e[0]))/h,a=((s[0]-t[0])*(t[1]-e[1])-(s[1]-t[1])*(t[0]-e[0]))/h;return o>=0&&o<=1&&a>=0&&a<=1&&[t[0]+o*(s[0]-t[0]),t[1]+o*(s[1]-t[1])]}};return{list:()=>t,create:()=>new n,draw:(n,h,o=!0)=>{reducedPolygonList=function(n){const h={},o=200/s;for(var a=0;a<s;a++){const c=a*o-100,r=[0,c,200,c+o];if(!(n[3]<r[1]||n[1]>r[3]))for(var i=0;i<s;i++){const c=i*o-100;r[0]=c,r[2]=c+o,n[0]>r[2]||n[2]<r[0]||e[i+a*s].forEach(s=>{const e=t[s];n[3]<e.aabb[1]||n[1]>e.aabb[3]||n[0]>e.aabb[2]||n[2]<e.aabb[0]||(h[s]=1)})}}return Array.from(Object.keys(h),s=>t[s])}(h.aabb);for(let t=0;t<reducedPolygonList.length&&h.boolean(reducedPolygonList[t]);t++);h.draw(n),o&&function(n){t.push(n);const h=t.length-1,o=200/s;e.forEach((t,e)=>{const a=e%s*o-100,i=(e/s|0)*o-100,c=[a,i,a+o,i+o];c[3]<n.aabb[1]||c[1]>n.aabb[3]||c[0]>n.aabb[2]||c[2]<n.aabb[0]||t.push(h)})}(h)}}}