Interlaced rings ◯‍◯‍◯‍◯‍◯

This turtle is able to generate a variety of ways to interlace 4 or 5 rings. Any similarity to current (Interlaced rings ◯‍◯‍◯‍◯‍◯), former (1986 to 2010: Interlaced rings ◯‍◯‍◯‍◯‍◯ (variation)) or future (?) (Interlaced rings ◯‍◯‍◯‍◯‍◯ (variation) or Interlaced rings ◯‍◯‍◯‍◯‍◯ (variation)) trademarks is completely coincidental. Even if it reminds you of some car manufacturer (Interlaced rings ◯‍◯‍◯‍◯‍◯ (variation)).

Log in to post a comment.

const size =  2; //min=1 max=10 step=.1

const outerRadius = 15; //min=5 max=20 step=.1
const innerRadius = 12.5; //min=4 max=19 step=.1
const marginRadius = 0; //min=0 max=4 step=.01
const margin = 2; //min=.1 max=5 step=.1
const deltaY = 7; //min=0 max=10 step=.1
const rings = 5; //min=4 max=5 step=1
const drawRing = 0; //min=0 max=5 step=1

const xCorrection = rings == 5? 0: outerRadius + margin;
const distance = 2 * (outerRadius + margin);

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

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

function addCircular(path, center, start, end, radius, step = Math.PI / (2*radius)) {
    const clockwise = start < end;
    step *= (clockwise?1:-1);
    for(let j = start; (clockwise && j < end) || (!clockwise && j > end); j += step) {
        path.push(V.add(center, [radius * Math.cos(j),radius * Math.sin(j)]));
    }
}

function angle(c0, r0, c1, r1, pt) {
    return V.angle(V.sub(Intersection.circles(circles[c0], r0 * size, circles[c1], r1 * size)['point_'+pt], circles[c0]));
}

function getFirstCirclePath(circles, outerRadius, innerRadius, marginRadius, size) {
    const path = [];
    // clockwise outside
    addCircular(path, circles[2],
        angle(2, outerRadius, 3, outerRadius + marginRadius, 1),
        angle(2, outerRadius, 3, innerRadius - marginRadius, 1) + 2 * Math.PI,
        outerRadius * size);
    //other clockwise inside
    addCircular(path, circles[3],
        angle(3, innerRadius - marginRadius, 2, outerRadius, 2),
        angle(3, innerRadius - marginRadius, 2, innerRadius, 2),
        (innerRadius - marginRadius) * size);
    //counter clockwise inside
    addCircular(path, circles[2],
        angle(2, innerRadius, 3, innerRadius - marginRadius, 1) + 2 * Math.PI,
        angle(2, innerRadius, 3, outerRadius + marginRadius, 1),
        innerRadius * size);
    //other counter clockwise outside
    addCircular(path, circles[3],
        angle(3, outerRadius + marginRadius, 2, innerRadius, 2),
        angle(3, outerRadius + marginRadius, 2, outerRadius, 2),
        (outerRadius + marginRadius) * size);
    return path.map(pt => V.sub(pt, circles[2]));
}

function getMiddleCirclePaths(circles, outerRadius, innerRadius, marginRadius, size) {
    const path = [];
    
    // clockwise outside
    addCircular(path, circles[2],
        angle(2, outerRadius, 3, outerRadius + marginRadius, 1),
        angle(2, outerRadius, 1, innerRadius - marginRadius, 1),
        outerRadius * size);
    //other clockwise inside
    addCircular(path, circles[1],
        angle(1, innerRadius - marginRadius, 2, outerRadius, 2),
        angle(1, innerRadius - marginRadius, 2, innerRadius, 2),
        (innerRadius - marginRadius) * size);
    //counter clockwise inside
    addCircular(path, circles[2],
        angle(2, innerRadius, 1, innerRadius - marginRadius, 1),
        angle(2, innerRadius, 3, outerRadius + marginRadius, 1),
        innerRadius * size);
    //other counter clockwise outside
    addCircular(path, circles[3],
        angle(3, outerRadius + marginRadius, 2, innerRadius, 2),
        angle(3, outerRadius + marginRadius, 2, outerRadius, 2),
        (outerRadius + marginRadius) * size);
    
    const path2 = [];
    // clockwise outside
    addCircular(path2, circles[2],
        angle(2, outerRadius, 1, outerRadius + marginRadius, 1),
        angle(2, outerRadius, 3, innerRadius - marginRadius, 1) + 2 * Math.PI,
        outerRadius * size);
    //other clockwise inside
    addCircular(path2, circles[3],
        angle(3, innerRadius - marginRadius, 2, outerRadius, 2),
        angle(3, innerRadius - marginRadius, 2, innerRadius, 2),
        (innerRadius - marginRadius) * size);
    //counter clockwise inside
    addCircular(path2, circles[2],
        angle(2, innerRadius, 3, innerRadius - marginRadius, 1) + 2 * Math.PI,
        angle(2, innerRadius, 1, outerRadius + marginRadius, 1),
        innerRadius * size);
    //other counter clockwise outside
    addCircular(path2, circles[1],
        angle(1, outerRadius + marginRadius, 2, innerRadius, 2),
        angle(1, outerRadius + marginRadius, 2, outerRadius, 2),
        (outerRadius + marginRadius) * size);

    return [path.map(pt => V.sub(pt, circles[2])), path2.map(pt => V.sub(pt, circles[2]))];
}

function getLastCirclePath(circles, outerRadius, innerRadius, marginRadius, size) {
    const path = [];
    // clockwise outside
    addCircular(path, circles[2],
        angle(2, outerRadius, 1, outerRadius + marginRadius, 1),
        angle(2, outerRadius, 1, innerRadius - marginRadius, 1) + 2 * Math.PI,
        outerRadius * size);
    //other clockwise inside
    addCircular(path, circles[1],
        angle(1, innerRadius - marginRadius, 2, outerRadius, 2),
        angle(1, innerRadius - marginRadius, 2, innerRadius, 2),
        (innerRadius - marginRadius) * size);
    //counter clockwise inside
    addCircular(path, circles[2],
        angle(2, innerRadius, 1, innerRadius - marginRadius, 1) + 2 * Math.PI,
        angle(2, innerRadius, 1, outerRadius + marginRadius, 1),
        innerRadius * size);
    //other counter clockwise outside
    addCircular(path, circles[1],
        angle(1, outerRadius + marginRadius, 2, innerRadius, 2),
        angle(1, outerRadius + marginRadius, 2, outerRadius, 2),
        (outerRadius + marginRadius) * size);
    return path.map(pt => V.sub(pt, circles[2]));
}

const circles = [];
for(let i = -2; i <= 2; i+=1) {
    circles.push([i/2 * distance * size + xCorrection, size*deltaY * (i%2==0?-1:1)]);
}

const firstPath = getFirstCirclePath(circles, outerRadius, innerRadius, marginRadius, size);
if(drawRing == 0 || drawRing == 1) PT.drawTour(turtle, firstPath.map(pt => V.add(pt, circles[0])));

const paths = getMiddleCirclePaths(circles, outerRadius, innerRadius, marginRadius, size);
const rots = [V.rot2d(0), V.rot2d(Math.PI)];
for(let i = -1; (rings == 5 && i <= 1) || (rings == 4 && i < 1); i++) {
    if(drawRing == 0 || drawRing == i+3) paths.forEach(path => PT.drawTour(turtle, path.map(pt => V.add(V.trans(rots[Math.abs(i)], pt), circles[2+i]))));
}

if(rings == 5) {
    const lastPath = getLastCirclePath(circles, outerRadius, innerRadius, marginRadius, size);
    if(drawRing == 0 || drawRing == 5) PT.drawTour(turtle, lastPath.map(pt => V.add(pt, circles[4])));
} else {
    if(drawRing == 0 || drawRing == 4) PT.drawTour(turtle, firstPath.map(pt => V.add(V.trans(rots[1], pt), circles[3])));
}

function init() {
    ///////////////////////////////////////////////////////
    // Vector functions - Created by Jurgen Westerhof 2024
    // https://turtletoy.net/turtle/d068ad6040
    ///////////////////////////////////////////////////////
    class Vector {
        static add  (a,b) { return a.map((v,i)=>v+b[i]); }
        static sub  (a,b) { return a.map((v,i)=>v-b[i]); }
        static mul  (a,b) { return a.map((v,i)=>v*b[i]); }
        static div  (a,b) { return a.map((v,i)=>v/b[i]); }
        static scale(a,s) { return a.map(v=>v*s); }
    
        static det(m)                { return m.length == 1? m[0][0]: m.length == 2 ? m[0][0]*m[1][1]-m[0][1]*m[1][0]: m[0].reduce((r,e,i) => r+(-1)**(i+2)*e*this.det(m.slice(1).map(c => c.filter((_,j) => i != j))),0); }
        static angle(a)              { return Math.PI - Math.atan2(a[1], -a[0]); } //compatible with turtletoy heading
        static rot2d(angle)          { return [[Math.cos(angle), -Math.sin(angle)], [Math.sin(angle), Math.cos(angle)]]; }
        static rot3d(yaw,pitch,roll) { return [[Math.cos(yaw)*Math.cos(pitch), Math.cos(yaw)*Math.sin(pitch)*Math.sin(roll)-Math.sin(yaw)*Math.cos(roll), Math.cos(yaw)*Math.sin(pitch)*Math.cos(roll)+Math.sin(yaw)*Math.sin(roll)],[Math.sin(yaw)*Math.cos(pitch), Math.sin(yaw)*Math.sin(pitch)*Math.sin(roll)+Math.cos(yaw)*Math.cos(roll), Math.sin(yaw)*Math.sin(pitch)*Math.cos(roll)-Math.cos(yaw)*Math.sin(roll)],[-Math.sin(pitch), Math.cos(pitch)*Math.sin(roll), Math.cos(pitch)*Math.cos(roll)]]; }
        static trans(matrix,a)       { return a.map((v,i) => a.reduce((acc, cur, ci) => acc + cur * matrix[ci][i], 0)); }
        //Mirror vector a in a ray through [0,0] with direction mirror
        static mirror2d(a,mirror)    { return [Math.atan2(...mirror)].map(angle => this.trans(this.rot2d(angle), this.mul([-1,1], this.trans(this.rot2d(-angle), a)))).pop(); }

        static equals(a,b)   { return !a.some((e, i) => e != b[i]); }
        static approx(a,b,p) { return this.len(this.sub(a,b)) < (p === undefined? .001: p); }
        static norm  (a)     { return this.scale(a,1/this.len(a)); }
        static len   (a)     { return Math.hypot(...a); }
        static lenSq (a)     { return a.reduce((a,c)=>a+c**2,0); }
        static lerp  (a,b,t) { return a.map((v, i) => v*(1-t) + b[i]*t); }
        static dist  (a,b)   { return Math.hypot(...this.sub(a,b)); }
        
        static dot  (a,b)   { return a.reduce((a,c,i) => a+c*b[i], 0); }
        static cross(...ab) { return ab[0].map((e, i) => ab.map(v => v.filter((ee, ii) => ii != i))).map((m,i) => (i%2==0?-1:1)*this.det(m)); }
        
        static clamp(a,min,max) { return a.map((e,i) => Math.min(Math.max(e, min[i]), max[i])) };
        static rotateClamp(a,min,max) { return a.map((e,i) => {
            const d = max[i]-min[i];
            if(d == 0) return min[i];
            while(e < min[i]) { e+=d; }
            while(e > max[i]) { e-=d; }
            return e;
        });
        }
    }
    this.V = Vector;
    
    class Intersection2D {
        //a-start, a-direction, b-start, b-direction
        //returns false on no intersection or [[intersection:x,y], scalar a-direction, scalar b-direction
        static info(as, ad, bs, bd) { const d = V.sub(bs, as), det = -V.det([bd, ad]); if(det === 0) return false; const res = [V.det([d, bd]) / det, V.det([d, ad]) / det]; return [V.add(as, V.scale(ad, res[0])), ...res]; }
        static ray(a, b, c, d) { return this.info(a, b, c, d); }
        static segment(a,b,c,d, inclusiveStart = true, inclusiveEnd = true) { const i = this.info(a, V.sub(b, a), c, V.sub(d, c)); return i === false? false: ( (inclusiveStart? 0<=i[1] && 0<=i[2]: 0<i[1] && 0<i[2]) && (inclusiveEnd?   i[1]<=1 && i[2]<=1: i[1]<1 && i[2]<1) )?i[0]:false;}
        static tour(tour, segmentStart, segmentDirection) { return tour.map((e, i, a) => [i, this.info(e, V.sub(a[(i+1)%a.length], e), segmentStart, segmentDirection)]).filter(e => e[1] !== false && 0 <= e[1][1] && e[1][1] <= 1).filter(e => 0 <= e[1][2]).map(e => ({position: e[1][0],tourIndex: e[0],tourSegmentPortion: e[1][1],segmentPortion: e[1][2],}));}
        static inside(tour, pt) { return tour.map((e,i,a) => this.segment(e, a[(i+1)%a.length], pt, [Number.MAX_SAFE_INTEGER, 0], true, false)).filter(e => e !== false).length % 2 == 1; }
        static circles(centerA, radiusA, centerB, radiusB) {
            const result = {intersect_count: 0,intersect_occurs: true,one_is_in_other: false,are_equal: false,point_1: [null, null],point_2: [null, null],};
            const dx = centerB[0] - centerA[0];
            const dy = centerB[1] - centerA[1];
            const dist = Math.hypot(dy, dx);
            if (dist > radiusA + radiusB) {
                result.intersect_occurs = false;
            }
            if (dist < Math.abs(radiusA - radiusB) && !N.approx(dist, Math.abs(radiusA - radiusB))) {
                result.intersect_occurs = false;
                result.one_is_in_other = true;
            }
            if (V.approx(centerA, centerB) && radiusA === radiusB) {
                result.are_equal = true;
            }
            if (result.intersect_occurs) {
                const centroid = (radiusA**2 - radiusB**2 + dist * dist) / (2.0 * dist);
                const x2 = centerA[0] + (dx * centroid) / dist;
                const y2 = centerA[1] + (dy * centroid) / dist;
                const prec = 10000;
                const h = (Math.round(radiusA**2 * prec)/prec - Math.round(centroid**2 * prec)/prec)**.5;
                const rx = -dy * (h / dist);
                const ry = dx * (h / dist);
                result.point_1 = [x2 + rx, y2 + ry];
                result.point_2 = [x2 - rx, y2 - ry];
                if (result.are_equal) {
                    result.intersect_count = Infinity;
                } else if (V.equals(result.point_1, result.point_2)) {
                    result.intersect_count = 1;
                } else {
                    result.intersect_count = 2;
                }
            }
            return result;
        }
    }
    this.Intersection = Intersection2D;
    
    class PathTools {
        static bezier(p1, cp1, cp2, p2, steps = null) {steps = (steps === null? Math.max(3, (V.len(V.sub(cp1, p1)) + V.len(V.sub(cp2, cp1)) + V.len(V.sub(p2, cp2))) | 0): steps) - 1; return Array.from({length: steps + 1}).map((v, i, a, f = i/steps) => [[V.lerp(p1, cp1, f),V.lerp(cp1, cp2, f),V.lerp(cp2, p2, f)]].map(v => V.lerp(V.lerp(v[0], v[1], f), V.lerp(v[1], v[2], f), f))[0]);}
        // https://stackoverflow.com/questions/18655135/divide-bezier-curve-into-two-equal-halves#18681336
        static splitBezier(p1, cp1, cp2, p2, t=.5) {const e = V.lerp(p1, cp1, t);const f = V.lerp(cp1, cp2, t);const g = V.lerp(cp2, p2, t);const h = V.lerp(e, f, t);const j = V.lerp(f, g, t);const k = V.lerp(h, j, t);return [[p1, e, h, k], [k, j, g, p2]];}
        static circular(radius,verticeCount,rotation=0) {return Array.from({length: verticeCount}).map((e,i,a,f=i*2*Math.PI/verticeCount+rotation) => [radius*Math.cos(f),radius*Math.sin(f)])}
        static circle(r){return this.circular(r,Math.max(12, r*2*Math.PI|0));}
        static arc(radius, extend = 2 * Math.PI, clockWiseStart = 0, steps = null, includeLast = false) { return [steps == null? (radius*extend+1)|0: steps].map(steps => Array.from({length: steps}).map((v, i, a) => [radius * Math.cos(clockWiseStart + extend*i/(a.length-(includeLast?1:0))), radius * Math.sin(clockWiseStart + extend*i/(a.length-(includeLast?1:0)))])).pop(); }
        static draw(turtle, path) {path.forEach((pt, i) => turtle[i==0?'jump':'goto'](pt));}
        static drawTour(turtle, path) {this.draw(turtle, path.concat([path[0]]));}
        static drawPoint(turtle, pt, r = .1) {this.drawTour(turtle, this.circle(r).map(e => V.add(e, pt)));}
        static drawArrow(turtle, s, d, width = 6, length = 3) {turtle.jump(s);const arrowHeadBase = V.add(s,d);turtle.goto(arrowHeadBase);turtle.goto(V.add(arrowHeadBase, V.trans(V.rot2d(-V.angle(d)), [-length, width/2])));turtle.jump(V.add(arrowHeadBase, V.trans(V.rot2d(-V.angle(d)), [-length, -width/2])));turtle.goto(arrowHeadBase);}
        static circlesTangents(c1_center, c1_radius, c2_center, c2_radius, internal = false) {let middle_circle = [V.scale(V.sub(c1_center, c2_center), .5)].map(hwp => [V.add(c2_center, hwp), V.len(hwp)]).pop();if(!internal && c1_radius == c2_radius) {let target = V.sub(c2_center, c1_center);let scaledTarget = V.scale(target, c1_radius/V.len(target));let partResult = [V.add(c1_center, V.trans(V.rot2d(Math.PI/2), scaledTarget)),V.add(c1_center, V.trans(V.rot2d(Math.PI/-2), scaledTarget))];return [partResult,partResult.map(pt => V.add(pt, target))]}let swap = !internal && c2_radius > c1_radius;if(swap) {let t = [[...c1_center], c1_radius];c1_center = c2_center;c1_radius = c2_radius;c2_center = t[0];c2_radius = t[1];}let internal_waypoints = intersectCircles2(c1_center, c1_radius + (internal?c2_radius:-c2_radius), ...middle_circle);if(internal_waypoints.length == 0) return [];const circlePointAtDirection2 = (circle_center, radius, direction) => V.add(circle_center, V.scale(direction, radius/V.len(direction)));const result = [[circlePointAtDirection2(c1_center, c1_radius, V.sub(internal_waypoints[0], c1_center)),circlePointAtDirection2(c1_center, c1_radius, V.sub(internal_waypoints[1], c1_center))],[circlePointAtDirection2(c2_center, c2_radius, internal? V.sub(c1_center, internal_waypoints[0]): V.sub(internal_waypoints[0], c1_center)),circlePointAtDirection2(c2_center, c2_radius, internal? V.sub(c1_center, internal_waypoints[1]): V.sub(internal_waypoints[1], c1_center))]];return swap? [[result[1][1],result[1][0]],[result[0][1],result[0][0]]]: result;}
    }
    
    this.PT = PathTools;
    
    class Complex {
        static add(a,b)     { return V.add(a,b); }
        static sub(a,b)     { return V.sub(a,b); }
        static scale(a,s)   { return V.scale(a,s); }
        static mult(a,b)    { return [a[0]*b[0]-a[1]*b[1],a[0]*b[1]+a[1]*b[0]]; }
        static sqrt(a)      { return [[Math.hypot(...a)**.5, Math.atan2(...a.reverse()) / 2]].map(ra => [ra[0]*Math.cos(ra[1]), ra[0]*Math.sin(ra[1])]).pop(); }
    }
    this.C = Complex;
    
    class Numbers {
        static approx(a,b,p)        { return Math.abs(a-b) < (p === undefined? .001: p); }
        static clamp(a, min, max)   { return Math.min(Math.max(a, min), max); }
        static rotateClamp(a, min, max) {
            if(min == max) return min;
            while (a < min) { a+=(max-min); }
            while (a > max) { a-=(max-min); }
            return a;
        }
    }
    this.N = Numbers;

    class Matrix {
        static bayer(order) { return [...Array(1<<order)].map((_,y,a) => { const g = (k=order,x)=>k--&&4*g(k,x)|2*(x>>k)+3*(y>>k&1)&3; return a.map(g); }); }
        static rotate(m) { return m[0].map((e, i) => m.map(r => r[i]).reverse()); }
        static rotateCCW(m) { return m[0].map((e, i) => m.map(r => r[r.length-1-i])); }
        static add(a,b) { return a.map((e, c) => e.map((e, r) => a[c][r] + b[c][r])); }
        static sub(a,b) { return a.map((e, c) => e.map((e, r) => a[c][r] - b[c][r])); }
        static multiply(a,b) { return Array.from({length: b.length}, (e,resCol) => Array.from({length: a[0].length}, (e,resRow) => b[resCol].reduce((acc, c, bRow) => acc + a[bRow][resRow] * b[resCol][bRow], 0)));}
        static scale(a,s) { return a.map((e, c) => e.map((e, r) => a[c][r] * s)); }
        static random(c,r,fillFn = Math.random) { return Array.from({length: c}, (e,i) => Array.from({length: r}, e => fillFn(c, r))); }
        static identity(d) { return Array.from({length: d}, (e,c) => Array.from({length: d}, (e, r) => c==r?1:0 )); }
        static log(m, name, logFn = console.log) { if(name != undefined) logFn(name); if(m === undefined || (typeof m == 'object' && (m[0] === undefined || m[0][0] === undefined))) { return logFn(`Failed to log matrix:`, m); } logFn(m[0].map((e,r) => m.map((e,c) => m[c][r]).join(', ')).join('\n')); }
        static invert(m) { let _A = m.map(col => col.map(cell => cell));/*clone matrix*/let temp;const N = _A.length;const E = Array.from({length: N}, (e,i) => Array.from({length: _A[0].length}, (e,j) => i==j?1:0));for (let k = 0; k < N; k++) {temp = _A[k][k];for (let j = 0; j < N; j++) {_A[k][j] /= temp;E[k][j] /= temp;}for (let i = k + 1; i < N; i++) {temp = _A[i][k];for (let j = 0; j < N; j++) {_A[i][j] -= _A[k][j] * temp;E[i][j] -= E[k][j] * temp;}}}for (let k = N - 1; k > 0; k--) {for (let i = k - 1; i >= 0; i--) {temp = _A[i][k];for (let j = 0; j < N; j++) {_A[i][j] -= _A[k][j] * temp;E[i][j] -= E[k][j] * temp;}}}return E; }
        static determinant(m) { return m.length == 1 ?m[0][0] :m.length == 2 ? m[0][0]*m[1][1]-m[0][1]*m[1][0] :m[0].reduce((r,e,i) => r+(-1)**(i+2)*e*this.determinant(m.slice(1).map(c => c.filter((_,j) => i != j))), 0)}
        static flip(m) { return Array.from({length: m[0].length}, (_, r) => Array.from({length: m.length}, (e, c) => m[c][r])); }
        static sum(m) { return m.reduce((a, c) => a + c.reduce((aa, cc) => aa + cc, 0), 0); }
    }
    this.M = Matrix;
    
    class Algorithms {
        static nthTriangular(n) { return ((n * n) + n) / 2; }
    }
    this.A = Algorithms;
}