Recursive Regular Rotation 🔄

and Repetitive.

Export to animated GIF with 'draw different frames' option enabled (and 'loop GIF' but that's enabled by default).

Log in to post a comment.

const r = 90; //min=1 max=100 step=1 Maximum radius
const iterations = 25; //min=1 max=50 step=1 The number of iterations (polygon + circumscribing circle)
const draw = 3; //min=1 max=3 step=1 (Control, Polygons, Both) Which polygons to draw
const effect = 4; //min=0 max=5 step=1 (Linear, Ease, Ease-in, Ease-out, Ease-in-out, Custom Bezier) CSS style easing
const effectAmount = .5; //min=0 max=1 step=.01 The amount of the effect to blend in with a LINEAR effect (this is added to make it easier to not have a full stop every loop of a GIF)
const effectBezierX1 = .3; //min=0 max=1 step=.01 1st parameter to 'custom bezier' in css styling
const effectBezierY1 = 3; //min=-20 max=20 step=.01 2nd parameter to 'custom bezier' in css styling
const effectBezierX2 = .7; //min=0 max=1 step=.01 3rd parameter to 'custom bezier' in css styling
const effectBezierY2 = -3; //min=-20 max=20 step=.01 4th parameter to 'custom bezier' in css styling

const EFFECTS = {
    LINEAR:     [0.00, 0.00, 1.00, 1.00],
    EASE:       [0.25, 0.10, 0.25, 1.00],
    EASEIN:     [0.42, 0.00, 1.00, 1.00],
    EASEOUT:    [0.00, 0.00, 0.58, 1.00],
    EASEINOUT:  [0.42, 0.00, 0.58, 1.00]
}; //when you add effects, make sure the 'custom bezier' is the last option on line 4 and the sequence of effect names matches the sequence of options

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

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

let rInner; // rInner needs to be reset every frame in animated gif export which is why line 32 instead of this line;

const easeFn = easeFunction(effect, effectBezierX1, effectBezierY1, effectBezierX2, effectBezierY2);

// The walk function will be called until it returns false.
function walk(i, t) {
    if(i == 0) rInner = r / computeLimitMultiplier(iterations);
    const edges = i + 3;
    const rOuter = rInner / Math.sin(.5 * (edges - 2) * Math.PI / edges);
    if((draw & 1) == 1) PT.drawTour(turtle, PT.circular(rInner, 7 * rInner | 0));
    if((draw & 2) == 2) PT.drawTour(turtle, PT.circular(rOuter, edges, -Math.PI/2 - (effectToT(t, easeFn) * 2 * Math.PI / edges)));
    rInner = rOuter;
    return i < iterations - 1;
}

function effectToT(t, effectFn) {
    return (1-effectAmount)*t + effectAmount * effectFn(t);
}

function easeFunction(effect, x1, y1, x2, y2) {
    function cubicBezier(x1, y1, x2, y2) {
      const bezier = (t, a1, a2) => 3 * (1 - t)**2 * t * a1 + 3 * (1 - t) * t**2 * a2 + t**3;
      const bezierDerivative = (t, a1, a2) => 3 * (2 * (1 - t) * t * (a2 - a1) + (1 - t)**2 * a1 + t**2 * (1 - a2));
    
      return function (x) {
        let t = x; // Initial guess
        for (let i = 0; i < 5; i++) {
          const xEstimate = bezier(t, x1, x2);
          const dx = bezierDerivative(t, x1, x2);
          if (dx === 0) break;
          t = t - (xEstimate - x) / dx;
        }
        // Compute y(t)
        const y = bezier(t, y1, y2);
        return y;
      };
    }
    
    const EFFECTNAMES = Object.keys(EFFECTS);
    
    if(effect < EFFECTNAMES.length) return cubicBezier(...EFFECTS[EFFECTNAMES[effect]]);
    if(effect == EFFECTNAMES.length) return cubicBezier(x1, y1, x2, y2);

    throw new Error(`Unknow easing effect: ${effect}`);
}

function computeLimitMultiplier(maxSteps = 10000) {
    let sum = 0;
    for (let k = 0; k < maxSteps; sum += Math.log(1 / Math.sin((Math.PI / 2) * ((k + 1) / (k + 3)))), k++);
    return Math.exp(sum);
}

// Below is automatically maintained by Turtlelib 1.0
// Changes below this comment might interfere with its correct functioning.
function turtlelib_init() {
	turtlelib_ns_c6665b0e9b_Jurgen_Vector_Math();
	turtlelib_ns_c5f8fa95ed_Jurgen_Intersection();
	turtlelib_ns_2d89bd6d64_Jurgen_Path_tools();
}
// Turtlelib Jurgen Vector Math v 4 - start - {"id":"c6665b0e9b","package":"Jurgen","name":"Vector Math","version":"4"}
function turtlelib_ns_c6665b0e9b_Jurgen_Vector_Math() {
/////////////////////////////////////////////////////////
// Vector functions - Created by Jurgen Westerhof 2024 //
/////////////////////////////////////////////////////////
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;
}
// Turtlelib Jurgen Vector Math v 4 - end
// Turtlelib Jurgen Intersection v 4 - start - {"id":"c5f8fa95ed","package":"Jurgen","name":"Intersection","version":"4"}
function turtlelib_ns_c5f8fa95ed_Jurgen_Intersection() {
///////////////////////////////////////////////////////////////
// Intersection functions - Created by Jurgen Westerhof 2024 //
///////////////////////////////////////////////////////////////
class Intersection {
    //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 = Intersection;
}
// Turtlelib Jurgen Intersection v 4 - end
// Turtlelib Jurgen Path tools v 3 - start - {"id":"2d89bd6d64","package":"Jurgen","name":"Path tools","version":"3"}
function turtlelib_ns_2d89bd6d64_Jurgen_Path_tools() {
///////////////////////////////////////////////////////
// Path functions - Created by Jurgen Westerhof 2024 //
///////////////////////////////////////////////////////
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 = Intersection.circles(c1_center, c1_radius + (internal?c2_radius:-c2_radius), ...middle_circle);if(!internal_waypoints.intersect_occurs) 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.point_1, c1_center)),circlePointAtDirection2(c1_center, c1_radius, V.sub(internal_waypoints.point_2, c1_center))],[circlePointAtDirection2(c2_center, c2_radius, internal?V.sub(c1_center, internal_waypoints.point_1):V.sub(internal_waypoints.point_1, c1_center)),circlePointAtDirection2(c2_center, c2_radius, internal?V.sub(c1_center, internal_waypoints.point_2):V.sub(internal_waypoints.point_2, c1_center))]];return swap? [[result[1][1],result[1][0]],[result[0][1],result[0][0]]]: result;}
    static vectors(path) {return Array.from({length: path.length - 1}).map((e, i) => V.sub(path[i+1], path[i]));}
    static path(vectors) {return vectors.reduce((a,c) => a.length==0?[c]:[...a, V.add(c, a[a.length-1])], []);}
    static redistributeLinear(path, length = .5) {const p = path.map(pt => [...pt]);const result = [[...p[0]]];let pointer = 1;doneAll: while(pointer < p.length) {let l = length;while(pointer < p.length) {const distance = V.len(V.sub(p[pointer], p[pointer - 1]));if(distance < l) {l-=distance;pointer++;continue;}if(distance == l) {if(pointer < p.length - 1) result.push([...p[pointer]]);pointer++;break doneAll;}if(l < distance) {const newPoint = V.lerp(p[pointer-1], p[pointer], l/distance);if(pointer < p.length - 1) result.push([...newPoint]);p[pointer - 1] = newPoint;break;}}}result.push(p.pop());return result;}
    static length(path) { return this.lengths(path).reduce((c, a) => a + c, 0); }
    static lengths(path) { return path.map((e, i, a) => V.len(V.sub(e, a[(i+1)%a.length]))).filter((e, i, a) => i < a.length - 1); }
    static intersectInfoRay(path, origin, direction) {const vectors = this.vectors(path);const ri = vectors.map((e, i) => [i, Intersection.info(origin, direction, path[i], e)]).filter(e => 0 <= e[1][2] && e[1][2] <= 1 && 0 < e[1][1]).sort(e => e[1][1]);if(ri.length == 0) return false;const hit = ri[0];const lengths = this.lengths(path);const length = lengths.reduce((a, c) => a + c, 0);let l = 0;for(let i = 0; i < hit[0]; i++) {l += lengths[i];}return [hit[1][0], (l + (lengths[hit[0]] * hit[1][2])) / length, hit[1][1]];}
    static lerp(path, part) {if(part < 0 || 1 < part) throw new Error('Range of part is 0 to 1, got ' + path);const lengths = this.lengths(path);const length = lengths.reduce((a, c) => a + c, 0);let l = length * part;for(let i = 0; i < lengths.length; i++) {if(lengths[i] < l) {l-=lengths[i];continue;}return V.lerp(path[i], path[i+1], l / V.len(V.sub(path[i+1], path[i])));}return [...path[path.length - 1]];}
    static boundingBox(path) { return path.reduce((a, c) => [[Math.min(c[0], a[0][0]), Math.min(c[1], a[0][1])],[Math.max(c[0], a[1][0]), Math.max(c[1], a[1][1])]], [path[0], path[0]]); }
}
this.PT = PathTools;
}
// Turtlelib Jurgen Path tools v 3 - end